Refresh ein div ohne eine ganze Seite wurde aktualisiert?

Ist es möglich, ein div auf einen Klick auf eine Schaltfläche zu aktualisieren und nicht automatisch aktualisieren? Sobald ich # print-container gedruckt habe, möchte ich # print-container in seinen ursprünglichen Zustand aktualisieren, ohne die ganze Seite zu aktualisieren.Refresh ein div ohne eine ganze Seite wurde aktualisiert?

<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>

Quelle

2016-05-08 Alan

Zeigen Sie den Code, mit dem Sie arbeiten. – RST

Die Frage ist - woher bekommen Sie die Daten, die Sie im * print-container * anzeigen möchten? – beeef

Wenn Ihr div von einer externen Quelle geladen wird (spielt keine Rolle, wenn es auf demselben Server ist oder nicht) können Sie die jQuery-Funktion Last verwenden können() „aufzufrischen“, um die div.

Zum Beispiel - wenn Ihr div einige Inhalte aus dem content.html Datei lädt, dann können Sie jQuery verwenden Sie die div Inhalt neu zu laden:

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

Es ist so einfach wie das!

Quelle

2016-05-08 10:35:51 beeef

Klare Antwort +1. –

Wenn nicht von externer Quelle geladen? Nicht vollständige Antwort tho –

Hier ist ein einfaches Plugin, das div Inhalt innerhalb seiner eigenen Attribut-Caches, und kehrt auf Ereignis zurück

(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>

Auch wenn es ziemlich schwer scheint, dies sollte Ihnen helfen, die Idee zu verstehen, hinter

Quelle

2016-05-08 11:34:52

Refresh ein div ohne eine ganze Seite wurde aktualisiert?

Antwort

Verwandte Themen