jQuery ajax get causing page to reload


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";
				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;
				error: function()
							alert("I'm sorry but I am unable to contact google at this time");

Open in new window

Who is Participating?
leakim971Connect With a Mentor PluritechnicianCommented:
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

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.
libby9284Author Commented:
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')"/>
libby9284Author Commented:
that fixed it, thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.