Solved

Progressive search in Jquery

Posted on 2012-04-10
2
758 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

717 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