jQuery ajax get causing page to reload

Posted on 2012-08-15
Last Modified: 2012-08-15

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 = "";
			var lr = "lr=lang_en";
			var safety = "safe=high";
			var access_token="redacted_google_api_key";
			var format = "alt=json";
			var myQuery = ""+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.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

Question by:libby9284
    LVL 2

    Expert Comment

    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.
    LVL 3

    Author Comment

    I'm calling it directly from an 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')"/>
    LVL 81

    Accepted Solution

    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

    LVL 3

    Author Closing Comment

    that fixed it, thanks!

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
    Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
    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…

    733 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

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now