Solved

Progressive search in Jquery

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 33
Auto refresh part of an MVC5 View 7 53
window.setInterval not firing 7 29
Randomize in Owl Carousel v1.3.2 6 16
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
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…

948 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

20 Experts available now in Live!

Get 1:1 Help Now