CODEWITHSUNDEEP
javascriptjquery
Alan
Alan

Reputation: 57

Refresh a div without a full page been refreshed?

Is it possible to refresh a div on a click of a button and not auto refresh? Once I've printed #print-container I would like to refresh #print-container to its original state without refreshing the whole page.

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

Upvotes: 0

Views: 183

Answers (2)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Here's a simple plugin that caches div content inside it's own attribute, and reverts back on event

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

Although it might seem quite heavy, this should help you to understand the idea behind

Upvotes: 0

beeef
beeef

Reputation: 2702

If your div is loaded from an external source (doesn't matter if it's on the same server or not) you can use the jQuery function load() to "refresh" the div.

For example - if your div loads some content from the file content.html, then you can use jQuery to reload the div's content:

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

It's as simple as that!

Upvotes: 2

Related Questions