Solved

Progressive search in Jquery

Posted on 2012-04-10
2
753 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JavaScript Loan Calculator Error 3 34
Echo'd values in dropdowns 6 27
web page freezes after ajax post 7 41
JQuery DataTable Functionality 8 11
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

735 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