• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 768
  • Last Modified:

Progressive search in Jquery

I have a script which is very close to working, however I think I just need a bit of help from ee community to get it polished.

Currently I have a form that submits via ajaxform.
There is a lot of data to load each time, so i have split it up into a few sections, and also am in the process of setting up progress updates to the user. eg getting 12 results form ***

I need it to do the following:
Change the status text - it does this for the first instance
Do the 1st search and render to browser
Change the status text
Do the 2nd search and render
Change the status text
Do the 3rd search and render
Stop the ajax call, and end the ajax animation etc.

Here is what we have so far.
This is where the form is submitted. This part works well, and fires the message, and also Starts the search.

   $("#searchAccommForm").submit(function(){
        // check date and call back if not filled in
        if($("#commencing").val().length < 10) {
            $("#commencing").focus();
            return false;
        }
        $("#main").html('');
       $(".loadermessage").empty()
    .html('Finding Available Properties');
        // search params
        var params = $(this).serialize();
        
       // Get number of properties from v3
     $.wait( function(){ $(".loadermessage").empty()
    .html('Getting Results From V3'); }, 1);

       // get 1st progress report then 1st set of results and render. then continue search
        getProgress('/search/getv3details/', params);
        getResults($(this).attr("action")+'/p/v3', params);
        return false;
  
    });
    
    var getProgress = function(url, params, last) {
        $.post(url, {
            params:params
        },
        
        function(data){
            $(".loadermessage").empty().html(data);
        }, 'html'
        );
    }

Open in new window

   




This function seems to be giving an infinite loop though and causing a lot of issues.



var getResults = function(url, params, last) {
        $.post(url, {
            params:params
        },
        
        function(data){
            $("#main").append(data);
            // hide if all results loaded
            if (url = '/search/accommp/v3')
                {
                     $(".loadermessage").empty()
    .html('Getting More Results'); 
        getResults('/search/accomm/p/rf', params);
                }
             if (url = '/search/accomm/p/rf')
                {
                    $(".loadermessage").empty()
    .html('Getting More For Price Comparison'); 
        getResults('/search/accomm/p/hc', params);
        
                }
        }, 'html'
        );
    }

Open in new window


These are the ajax start and stop

$(document).ajaxStart(function() {
    //  $(".divLoader").empty();
     $("#footer").append('<div class="divLoader"><div class="loadercaption">Loading... Please Wait<br/><span class="loadermessage">Finding Information for you</span></div><div class="spinnerholder"></div></div><div id="loaderwrapper"></div>');
    $(".divLoader").show();
    $(".divLoader .spinnerholder").spin("medium", "#000");
    $("#loaderwrapper").fadeTo(0, 0.8);
});
$(document).ajaxStop(function() {
    $('.divLoader').fadeOut('fast');
    $(".divLoader  .spinnerholder").spin(false);
    $("#loaderwrapper").remove();
});

Open in new window

0
paulp75
Asked:
paulp75
1 Solution
 
Michel PlungjanIT ExpertCommented:
Did you mean

if (url = '/search/accommp/v3') - always true

or did you mean

if (url == '/search/accommp/v3') - not always true

My guess is

var getResults = function(url, params, last) {
  $.post(url, { params:params },
    function(data){
      $("#main").append(data);
      // hide if all results loaded
      if (url == '/search/accommp/v3') {
        $(".loadermessage").empty().html('Getting More Results'); 
        getResults('/search/accomm/p/rf', params);
      }
      if (url == '/search/accomm/p/rf') { 
        $(".loadermessage").empty().html('Getting More For Price Comparison'); 
        getResults('/search/accomm/p/hc', params);
      }
    }, 'html'
  );
}

Open in new window

However I would also remove the empty() since .html() replaces content
0
 
paulp75Author Commented:
thank you working great now
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now