?
Solved

jQuery ajax get causing page to reload

Posted on 2012-08-15
4
Medium Priority
?
1,967 Views
Last Modified: 2012-08-15
Hello,

I'm trying to integrate the google custom search API into my code with the following javascript / jQuery function.  With the redacted items filled in this sort of works, with one major problem - the whole page appears to refresh and I lose my search results (unless I'm working through the code stepwise via firebug).

Can anyone suggest a way to keep this refresh from happening and / or maintain my results?  Its kind of useless if I can't *show* the results generated.

I am 100% certain that the myQuery variable does get formed correctly, so that is not the problem (other testing verified it)


Thanks in advance!

Some other notes:

this code is part of a mono C# .net web application that employs the use of ajax control toolkit update panels

		function handleGoogleSearch(searchQuery)
		{
			var cx = 'cx=redacted_search_engine_id';
			var exactTerms = "q=" + searchQuery;
			var googlehost = "googlehost=google.com";
			var lr = "lr=lang_en";
			var safety = "safe=high";
			var access_token="redacted_google_api_key";
			var format = "alt=json";
			var myQuery = "https://www.googleapis.com/customsearch/v1?key="+access_token+"&"+cx+"&"+exactTerms+"&"+lr+"&"+safety+"&"+format;//+"&callback=parseTheSearch";
			
			$.ajax({
				type: "GET",
				contentType: "application/json; charset=utf-8",
				url: myQuery,
				dataType: "json",
				success: function(response)
						{
							var theData = "";
							for (var i = 0; i<response.items.length; i++)
							{
								var theItem = response.items[i];
								theData += "<a href='"+theItem.link+"'>"+ theItem.title + "</a><br/>"+theItem.displayLink+"<br/>"+theItem.snippet+"<br/><br/>";
							}
							document.getElementById("searchContentPanel").innerHTML = theData;
							openDialog("searchDialogue");	
						},
				error: function()
						{
							alert("I'm sorry but I am unable to contact google at this time");
						}
				});	
		}

Open in new window

0
Comment
Question by:libby9284
  • 2
4 Comments
 
LVL 2

Expert Comment

by:SamuelShaw
ID: 38298502
How are you calling the JavaScript function? When I've seen this sort of behavior before (where it works when you're debugging but not when you aren't), it's because a JavaScript error is occurring and the event is propagating to the default handler when error-free code would otherwise stop that propagation.
0
 
LVL 3

Author Comment

by:libby9284
ID: 38298527
I'm calling it directly from an asp.net button for now, see definition below.  I eventually want to trigger it from server side code via ClientScript.RegisterStartupScript

i should mention that the code only kind of works in debug mode.  If i step through I get to see the data briefly, as soon as I step past the end of the function the reload occurs and I lose the data

Firebug's not catching any errors so is there a better javascript debugging solution?

the other javascript code on the page is known to function correctly, in case that is relevant

Button Definition:
<asp:Button ID="forceSearch" runat="server" Text="test google search" OnClientClick="handleGoogleSearch('search phrase')"/>
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38299010
try this button :
<asp:Button ID="forceSearch" runat="server" Text="test google search" OnClientClick="handleGoogleSearch('search phrase');return false;" />

Open in new window

or :
<asp:Button ID="forceSearch" runat="server" Text="test google search" OnClientClick="return handleGoogleSearch('search phrase')"/>

Open in new window

and replace your line 33 by :
return false;	
	}

Open in new window

0
 
LVL 3

Author Closing Comment

by:libby9284
ID: 38299048
that fixed it, thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses
Course of the Month16 days, 7 hours left to enroll

862 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