How can I refresh a div with a button click?

Question

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>

Solution 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();

});

Solution 2

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;
    });
});

Comments

[Hunnenkoenig]

Thanks, but it doesn't seem to do anything. l even changed the php name to see, if it goes there, but nothing happens. :-(

[Hunnenkoenig]

Now it loads the same data twice at first open of the page :-)

[Artur Filipiak]

@Hunnenkoenig , wrap your $.getJSON ... request into a refresh method (don't call Ajax anywhere outside the method). Also make sure you empty the div before append any HTML - see updated answer

[Hunnenkoenig]

I am not sure what you mean. I am happy that I was able to gather this code together from the internet :-P I don't have any ajax anywhere. Listapps.php just connects to the database and makes the query and givs the json data. I tried to add your code in different ways, because I don't know where to cut those "});" things, but either it doesn't load or it loads the data twice. I don't know if it's a problem on my side, but it doesn't work.

[Hunnenkoenig]

Ah! I think, I know what I did wrong. I added your code after my code. Not replaced it. However I still don't know, if it works, because if I click the refresh button, I don't see the "Loading..." text, like I see it when I refresh just the browser.

[Patrick Moore]

@Hunnenkoenig This code should be pasted INSIDE of your existing code, right after the opening $(document).ready( function() { ... please see the updated code block above, and let me know if this works any better for you. If you pasted the JavaScript code BEFORE the HTML code, without wrapping in $(document).ready( function() { });, it wouldn't work.

[Patrick Moore]

There is nothing in @phillip100's code that changes the #loading element to contain "Loading..." text. That's why you don't see it...

[Artur Filipiak]

@SetSailMedia , yes, it does make it visible :-) Demo

[Patrick Moore]

Oh, right you are! I thought OP meant the content was missing but the div was visible. To the OP: maybe it's just running too fast, so you aren't catching it ;)

[Artur Filipiak]

Yes, it's most likely the reason.

[Hunnenkoenig]

Thank you too! I accepted the other code as a right answer, because I needed the content loading right at opening and then being able to reload. Your code needed a click to load the content at all. Just a little difference, but it helped me to understand! Thank you!