Solved

Progressive search in Jquery

Posted on 2012-04-10
2
745 Views
Last Modified: 2012-08-14
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
Comment
Question by:paulp75
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37832005
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
 
LVL 6

Author Closing Comment

by:paulp75
ID: 37832032
thank you working great now
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now