フルページなしでdivをリフレッシュしましたか？

ボタンのクリックでdivをリフレッシュすることはできますか？自動リフレッシュはできませんか？＃print-containerを印刷したら、＃ページ全体を更新せずにprint-containerを元の状態に更新したいと思います。あなたのdivは、外部ソースからロードされている場合はフルページなしでdivをリフレッシュしましたか？

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

出典

2016-05-08 Alan

作業中のコードを表示します。 – RST

質問は - あなたは* print-container *の中に表示したいデータをどこから得るのですか？ – beeef

あなたはjQueryの機能負荷を使用することができます（それは、同じサーバー上にあるかどう関係ありません）（）はdiv要素を「リフレッシュ」します。例えば

- あなたのdivは、ファイルcontent.htmlから一部のコンテンツをロードする場合は、DIVのコンテンツをリロードするjQueryのを使用することができます。

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

それはそれと同じくらい簡単です！

出典

2016-05-08 10:35:51 beeef

クリア答え+1。 –

外部ソースからロードされていない場合は、完全な答えではない –

は、ここでそれはかなり重いように見えるかもしれないが、これはあなたのアイデアを理解するのに役立つはずで、それ自身の属性内のdivコンテンツをキャッシュする単純なプラグインだし、イベント

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

に戻ります後ろに

出典

2016-05-08 11:34:52

フルページなしでdivをリフレッシュしましたか？

答えて

関連する問題