jQuery ajax get causing page to reload

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

LVL 3
libby9284Asked:
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

0
 
SamuelShawCommented:
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
 
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')"/>
0
 
libby9284Author Commented:
that fixed it, thanks!
0
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.