[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Loading graphic while getting form results

Posted on 2010-08-30
4
Medium Priority
?
507 Views
Last Modified: 2012-06-27
What would be the simplest/easiest way to show a loading graphic after hitting submit and waiting for the form results to be gathered? The results show on the same page after getting them. The amount of time to get the results varies greatly so I don't want to have to use a timer.  

Currently we're using a jquery call to do this, but mostly since it's not my strong point of a programming language - with the latest wordpress 3.0.1 and so many different plugins being required on some one site, there's apparently conflict somewhere.  

Showing a loading graphic is important for this because of the lengthy wait at times. We want the viewer to know that the results are still being gathered.

I've showed the jquery code here at EE before asking for advice, but it does seem that the code is correct. So I'm looking for an alternative to jquery so we aren't constantly running into conflicts.

Thanks for any additional options.
0
Comment
Question by:Dzynit
[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
  • 2
4 Comments
 
LVL 1

Expert Comment

by:bakercad
ID: 33559029
First.....your conflicts with jQuery can be avoided.  See here for details: http://api.jquery.com/jQuery.noConflict/

For the loading graphic, simply replace the container (<div>) of the search results with the graphic before the results are returned, then when the results are loaded, have them replace the graphic.

function search(){
  $('#SearchResults').html('<img src="images/loading.gif'); //replaces the content of a div with the id "SearchResults" with the loading image.
$.ajax({
   type: "POST",
   url: "search.php",
   data: "keyword=searchterm",
   success: function(data){
     $('#SearchResults').html(data); // replaces the loading image with the results
   }
 });
}
0
 
LVL 14

Author Comment

by:Dzynit
ID: 33560694
Hopefully this doesn't make me sound really dumb, but to call your function would you use an onclick in the button? I see the word ajax, so I want to be sure I'm not confusing the languages.

Also another question - the data line:
Will that accept php and/or smarty terms ok?
0
 
LVL 1

Accepted Solution

by:
bakercad earned 2000 total points
ID: 33562184
Yes, you can use "onclick" for that OR you could use a jQuery selector with an id or class of your submit button.

$.('.dosearch').click(function() { // submit button with class="dosearch"
 $('#SearchResults').html('?php echo $searchterm;?>",

An option to get the form values to send with the ajax request is to use the serialize "helper" function it will grap your form field values & you send that in the data string. http://api.jquery.com/serialize/

$.('.dosearch').click(function() { // submit button with class="dosearch"

var formValues= $('#formID').serialize(); // use id of form to get the form values.

 $('#SearchResults').html('
0
 
LVL 14

Author Comment

by:Dzynit
ID: 33569011
I'm still unable to get your example working for me. The attached code shows the loading graphic correctly, but the results being returned when using an alert to view just say [object Object].

I've already confirmed that all variables are set correctly that you see in that code. Is there something different that needs to be done to display the real results? If it's seeing it as an object instead of html, is there an additional call that needs added to tell the jquery what is in the results?

url_form.submit(function(){
		results.hide();
		throbber.fadeIn("slow");
		results.load(seourl, {"url": url.val(), "output": "html", "ref": ref.val() }, function(){
			throbber.hide();
			results.show();
			htmltooltip.render();

Open in new window

0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
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…
Suggested Courses

649 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