Question

Is there anyway to reload just the AJAX request, so that it updates the content pulled from the external site in the code below?

$(document).ready(function () {
        var mySearch = $('input#id_search').quicksearch('#content table', { clearSearch: '#clearsearch', });
        var container = $('#content');
        function doAjax(url) {
            if (url.match('^http')) {
                $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                    "q=select%20*%20from%20html%20where%20url%3D%22"+
                    encodeURIComponent(url)+
                    "%22&format=xml'&callback=?", 
                function (data) {
                if (data.results[0]) {
                    var fullResponse = $(filterData(data.results[0])),
                       justTable = fullResponse.find("table");
                    container.append(justTable);
                    mySearch.cache();
                    $('.loading').fadeOut();
                } else {
                    var errormsg = '<p>Error: could not load the page.</p>';
                    container.html(errormsg);
                }
                });
            } else {
                $('#content').load(url);
            }
        }
        function filterData(data) {
            data = data.replace(/<?\/body[^>]*>/g, '');
            data = data.replace(/[\r|\n]+/g, '');
            data = data.replace(/<--[\S\s]*?-->/g, '');
            data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g, '');
            data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g, '');
            data = data.replace(/<script.*\/>/, '');
            data = data.replace(/<img[^>]*>/g, '');
            return data;
        }
        doAjax('link');
    });

Right now I have a button which reloads the entire page, but I just want to reload the AJAX request. Is this even possible?

Edit: I need to specify more. While it can easily call the AJAX again, can it also replace the info that is already there?

Answer 1

You just need to call the doAjax function again on button click…

$("#buttonID").on("click", function() {
    doAjax("link");
});

Add that into the above document.ready code and set the button ID correspondingly.

Then change

container.append(justTable);

to

container.html(justTable);