I have this ajax call. It populates my page when opened. How can I reload it again for a new query by clicking a button?

I tried to figure it out myself, but I can't.

Script:

$(document).ready(function() {
    $("#loading").show();
    $.getJSON("listapps.php",function(data) {
        $.each(data, function(i,data) {
            data.title = data.title.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-');
            if (data.title =='' | data.title =='-') {
                data.title = 'App';
            }
            var div_data = "<div ><a href='"+data.title+"-"+data.appID+"'><img src='"+data.icon+"'></img></a></div>";
            $(div_data).appendTo("#iconsfree");
        });
        $("#loading").hide();
    });
    return false;
});

HTML:

<div id='loading'>Loading...</div>
<div id='iconsfree'></div>

I have this ajax call. It populates my page when opened. How can I reload it again for a new query by clicking a button?

I tried to figure it out myself, but I can't.

Script:

$(document).ready(function() {
    $("#loading").show();
    $.getJSON("listapps.php",function(data) {
        $.each(data, function(i,data) {
            data.title = data.title.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-');
            if (data.title =='' | data.title =='-') {
                data.title = 'App';
            }
            var div_data = "<div ><a href='"+data.title+"-"+data.appID+"'><img src='"+data.icon+"'></img></a></div>";
            $(div_data).appendTo("#iconsfree");
        });
        $("#loading").hide();
    });
    return false;
});

HTML:

<div id='loading'>Loading...</div>
<div id='iconsfree'></div>

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Feb 4, 2015 at 18:12 Artur Filipiak 9,15744 gold badges3232 silver badges5656 bronze badges asked Feb 4, 2015 at 17:44 HunnenkoenigHunnenkoenig 19911 gold badge33 silver badges1414 bronze badges 1

• Does this answer your question? Onclick reload the div only – Jack Commented Jul 8, 2020 at 11:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Make a method, call it when page is opened and on button click.

Script:

$(document).ready(function() { 

    function refresh(){
        $("#loading").show();
        $.getJSON("listapps.php",function(data) {
            var div_data = '';
            $.each(data, function(i,data) {
                data.title = data.title.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-');
                if (data.title =='' | data.title =='-') {
                    data.title = 'App';
                }
                div_data += "<div ><a href='"+data.title+"-"+data.appID+"'><img src='"+data.icon+"'></img></a></div>";
            });
            $("#iconsfree").html(div_data);
            $("#loading").hide();
        });
    }

    // call the method on button click:
    $(document).on('click', '#button', function(e){
        e.preventDefault();
        refresh();
    });

    // call the method when page is opened:
    refresh();

});

Attach it to the click() event of some element.

Your HTML:

<a id="button" href="#">Reload</a>

Your JavaScript:

$(document).ready( function(){
    $("#button").click( function(){
        $("#loading").show();
        $.getJSON("listapps.php",function(data) {
             $.each(data, function(i,data) {
                 data.title = data.title.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-');
                  if (data.title =='' | data.title =='-') {
                      data.title = 'App';
                  }

                  var div_data =
                    "<div ><a href='"+data.title+"-"+data.appID+"'><img src='"+data.icon+"'></img></a></div>";
                   $(div_data).appendTo("#iconsfree");
              });
              $("#loading").hide();
        });
        return false;
    });
});