Actualiser un div sans avoir actualisé une page entière?

Est-il possible de rafraîchir un div sur un clic d'un bouton et pas d'actualisation automatique? Une fois que j'ai imprimé # print-container, je voudrais actualiser # print-container à son état d'origine sans actualiser la page entière.Actualiser un div sans avoir actualisé une page entière?

<body onLoad="renderTime();"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-4" id="printarea" > 
       <div id="print-container"> 
        <div class="item"></div> 
        <div class="total"></div> 
       </div> 
      </div> 
      <div class="col-xs-8"> 
       <ul class="final"> 
        <li class="remove"><a href="#"><input type="submit" value="Remove Last" class="print-btn remove-item"></a></li> 
        <li class="remove"><a href="#"><input type="submit" value="Refresh" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></a></li> 
       </ul> 
       <hr /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="box"> 
        <div class="content"> 
         <ul class="sub-menu"> 
          <li><a href="#"><button class="menu item1">Item 1</button></a></li> 
          <li><a href="#"><button class="menu item2">Item 2</button></a></li> 
         </ul> 
         </div> 
     <!--END BEER--> 
       </div><!--end box--> 
      </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $(".menu a").click(function(e){ 
      e.preventDefault(); 
      $(".toggle").hide(); 
      var toShow = $(this).attr('href'); 
      $(toShow).fadeIn(5); 
     }); 
    </script> 
<script type="text/javascript"> 

     //add item 
     $('.item1').click(function(){ 
      $('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item'); 

      counter(); 
     }); 
     $('.item2').click(function(){ 
      $('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item'); 

      counter(); 
     }); 
    </script> 

    <script type="text/javascript"> 

    var counter = function() { 

     var total = 0; 

     $(".skill").each(function() { 

      total += + parseInt($(this).text() , 10); 
     }); 

     $('.total').text('Total: \u0E3F' + total); 
    }; 

</script> 

<script type="text/javascript"> 
    function refresh() { 

     setTimeout(function() { 
      location.reload() 
     }, 100); 
    } 
</script> 

</body>

Source

2016-05-08 Alan

Montrez le code avec lequel vous travaillez. – RST

La question est - où obtenez-vous les données à partir de laquelle vous voulez afficher à l'intérieur du * print-container *? – beeef

Si votre div est chargé à partir d'une source externe (peu importe si elle est sur le même serveur ou non), vous pouvez utiliser la fonction jQuery load() à « rafraîchir » la div.

Par exemple - si votre div charge une partie du contenu du fichier content.html, vous pouvez utiliser jQuery pour recharger le contenu du div:

$("#button-id").click(function() { 
    $("#div-id").load("content.html"); 
});

Il est aussi simple que cela!

Source

2016-05-08 10:35:51 beeef

Effacer la réponse +1. –

S'il n'est pas chargé depuis une source externe? Pas de réponse complète –

est ici un plugin simple qui met en cache le contenu div à l'intérieur de son propre attribut, et revient sur l'événement

(function($, window){ 
 
    var nodes = $('[reload]');     // all <div reload=""/> elems 
 
    var serializer = new XMLSerializer();  // serializer 
 
    nodes.each(function(){      // iterate over all elems 
 
    var domStr = serializer.serializeToString($(this)[0]); //serialize html to str 
 
    $(this).attr('cache', domStr.replace(/\n/g, '')); // remove new-line 
 
    
 
    $(this).click(function(){       // event 
 
     $(this).html($(this).attr('cache'));   // restore content of div 
 
    }); 
 
    }); 
 
    
 
    // demoPurpose: modify div, add attribute(style), change text 
 
    $('#style').click(function(){ 
 
    $(nodes[0]).children().first().css('color', randomColor()); 
 
    $(nodes[0]).children().last().css('color', randomColor()); 
 
    $(nodes[1]).children().first().css('color', randomColor()); 
 
    $(nodes[1]).children().last().css('color', randomColor()); 
 
    $(nodes[1]).children().last().text(Date.now()); 
 
    }); 
 
    
 
    // demoPurpose: simple random colorizer 
 
    function randomColor(){ 
 
    var colors = ['red', 'blue', 'green', 'yellow', 'black', 'pink']; 
 
    return colors[Math.floor(Math.random() * colors.length)]; 
 
    } 
 
})(jQuery, window);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div reload=""> 
 
    <h1>h1</h1> 
 
    <p>p</p> 
 
</div> 
 

 
<hr /> 
 
<div reload=""> 
 
    <h1>another h1</h1> 
 
    <p>with dummy p</p> 
 
</div> 
 

 
<hr /> 
 

 
<p><button id="style">style</button><small>Click on button to change div</small></p> 
 
<p><small>Click on div to reload it's content</small></p>

Bien qu'il puisse sembler assez lourd, cela devrait vous aider à comprendre l'idée derrière

Source

2016-05-08 11:34:52

Actualiser un div sans avoir actualisé une page entière?

Répondre

Questions connexes