Question

I’m working with jqueries address change event and am hitting a roadblock when a user copies and pastes a URL in the browser. I need to fist load a portion of the page that contains a form. I could do this after every pagination call but it seems really ineffecient.

Here is my current code block:

$.address.change(function(e) {

    var urlAux = e.value.split('=');
    var page   = urlAux[0];
    var start  = urlAux[1];

    if (page == "/visits") {

        $.address.title("Profile Views");

        if (start) {

            $('#start').val(start);

            // ***** If a user has copied and pasted this URL with a start value then I first need to load visits.php in the main div tag.  Is it possible to see if this is loaded or not?

            $.post("visits_results.php", $("#profile_form_id").serialize(),
                function(data) {
                    $('#search_results').html(data);
                    location.href = "#visits=" + start; 
                });

        }
        else {
            var args = localStorage.getItem("visits");

            $('#main').load("visits.php?" + args, function () { }); 
        }
    }

My attempted work around was this:

var args = localStorage.getItem("visits");

$('#main').load("visits.php?" + args, function () { 

    $('#start').val(start);

    $.post("visits_results.php", $("#profile_form_id").serialize(),
        function(data) {
            $('#search_results').html(data);
            location.href = "#visits=" + start; 
         });
    }); 

There must be a better way…this is realoading the same portion of the page (visits.php) with every pagination event. Is there a better way to load URLs and not have them trigger an address change?

Answer 1

Using paul’s work around from his comments, but instead of Regex’ing html content in the visits.php form this solution will look for data() attached to #mainID.

Paul’s work around notes:

After a bit more hacking I came up with this solution that seems to do
the trick. I’m not sure how good it is but it seems to do the trick. I
now get the main div id and do a regex match on a unique string in the
form. If I don’t see it I load the form and then load the results. Not
sure if this is good practice or not but it seems to solve my issue.

Methodology to use .data() instead of a regex search of visits.php’s html:

    /*check if we're missing visits.php by looking for data() flag*/
             if( !($("#main").data()["hasVisitsPhp"]) ){
              var args = localStorage.getItem("visits");
              $('#main').load("visits.php?" + args, function () { 
                $('#start').val(start);
                $.post("visits_results.php", $("#profile_form_id").serialize(),
                    function(data) {
/* we've loaded visits.php, set the data flag on #main*/
                $('#main').data("hasVisitsPhp","loaded");
                        $('#search_results').html(data);
                        location.href = "#visits=" + start; 
                     });
                });
             }