DNN Blog - Add Google AJAX Search to your DNN skin (Part 1 of 3)

Add Google AJAX Search to your DNN skin (Part 1 of 3)

Location: Blogs

All Blogs

DNN Development

Posted by: mamlin

6/7/2008 10:02 PM

Welcome non-DNN developers!

This blog is aimed at the DNN community but anyone can add Google AJAX Search to most any website following the steps below
(non-DNN users can skip step "2a").

We added a special welcome since we've had so many visitors for this particular topic. Enjoy the info and feel free to post questions and comments even if you don't use DNN.

This page can now be linked as: http://GoogleAJAXSearch.com

The internal DNN search engine, while convienient, still leaves much to be desired in the realm of content search. It is restricted to its own portal, returns only what is specifically made "searchable" by module developers and has no inherent feature for generating reports of what users have been searching for. With a (free) Google site search, however, you not only get the power of Google's vastly superior search algorithms but you also get to define WHAT gets serached on WHICH portals/domains and also influence HOW the results get ranked and displayed. Plus you can get free reports on what your users searched for and when they searched for it. All it takes is a small bit of text editing...

Parts 1, 2 and 3
In this, Part 1, we'll see how to get the DNN Search out of your skin and get the (free) Google AJAX search in to your skin. You can see a working example right now: try typing "DNN" in the text entry field inside the "Custom Site Search" box on this page. Google AJAX goodness inserts search results right above this blog entry without ever leaving (or refreshing) the page. You can even click through multiple pages of search results without a page postback/refresh. Sweet!

In Part 2 we will examine a few of the many options for customizing Google searches as well as ways to influence the ranking of results. Finally, in Part 3, we'll see how to tie it all in with a Google web account (totally free) so you can define and manage custom engine criteria online and get user search info reported to you via Google Analytics (also totally free).

Part 2 is now available:
http://eguanasolutions.com/Blog/tabid/54/EntryID/9/Default.aspx

A special topic, "Preventing ENTER key from Clearing Search Results" is now available:
http://eguanasolutions.com/Blog/tabid/54/EntryID/14/Default.aspx

Google Site Search
In a nutshell, a "site search" is a search that only returns results for the websites you specify. DNN Search does this for it's host portal by default. DNN Search cannot, however, return results for multiple portals and/or other specific websites -- it can only show your site, all of the web or both. This can be a problem if you operate multiple related sites and would like your users to get results from all of your sites but no other sites.

Google search, on the other hand, offers many search options as well as some fine-tuning of results. All of this can be defined as part of the underlying search code so your users don't have to do anything special -- it just happens. We'll cover a few of the more useful options in Part 2.

Example search configurations:
Suppose you have three websites: "Mine.com", "Yours.com" and "Ours.com"

Your Google site search (GSS) on "Mine.com" could return search results from "Mine.com" and "Ours.com" with higher rankings for "Mine.com" results.
Your GSS on "Mine.com" could return results from all three websites with highest results being the best content matches regardless of the source domain.
Your GSS on "Mine.com" could return results from all three sites and present special "refine results" links that allow users to re-run the search and give greater weight to either "Mine", "Yours" or "Ours".

Doing More with AJAX
Besides the usual post-and-update method (submitting a form and then refreshing the page with the results), Google provides search via AJAX. This allows you to perform searches and display results without refreshing the current webpage. By contrast, DNN Search forces users to leave the current webpage and navigate to a special "Search Results" page.

AJAX also enables another great feature: mutliple searches at once. Why multiple searches at once? Imagine: your user can enter a search term and you can return blocks of results featuring matching web pages, matching files, matching blogs, etc. In short, you can return search results pre-sorted by content type. Returning two sets of results is no harder than returning one (as we'll see in Part 2 of "Add a Google Site Search").

The Nitty-Gritty: Adding Google Search to your Skin
Ok, if you're not at all familiar with DNN skins then you might want to stop here and go get familiar with the very basics of skin files. You don't need to know how to create a skin or even how to upload a skin -- you just need to figure out how to tell what skin you're using (hint: look under ADMIN->SKINS) and where that skin's files sit on your DNN server. To add Google search to the skin itself you're going to need to open and edit (via Notepad) one of your skin's files.

(1) Find Your Skin Files
For our walkthrough, let's use one of the default DNN skins as our example skin: "DNN-Blue".

The "DNN-Blue" skin physically resides on our DNN server in the following location:

(DNN root folder)\Portals\_default\Skins\DNN-Blue

There are several variations of this skin: fixed with, variable width, left-hand menu, top-menu, etc. We're going to use the file called "Vertical Menu - Fixed Width.ascx". Remember: in practice, you would actually navigate to whatever skin directory and file YOU are using for your portal. Also be sure to save a backup copy of any file you edit BEFORE you edit it!

(2) Edit Your Skin in Four Easy Steps
Use Notepad (or your favorite text editor) to open the file "Vertical Menu - Fixed Width.ascx". TIP: If you are using Notepad, select VIEW -> STATUS BAR so you'll be able to tell what line and column your cursor is on. If the "STATUS BAR" option is greyed-out and not selectable, make sure "Word Wrap" is not selected under FORMAT -> WORD WRAP.

NOTE: For formatting purposes, all HTML tags are shown with an extra space just after the "<" symbol and just before the closing ">" symbol. You may need to remove the extra spaces if you copy-and-paste code directly from this page.

(2a) On line 4, remove the following tag:

< %@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" % >

(2b) Now for two replacements: On line 33, column 67, replace the following tag:

< dnn:SEARCH runat="server" id="dnnSEARCH" showWeb="True" showSite="True" / ><%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>

with this tag:

< input id="gss_input" size="10" type="text" / >

Then on line 55, replace the following:

< TD class="contentpane" id="ContentPane" runat="server" valign="top" align="center" >< /TD >

   with this:

< TD valign="top" align="center" >
     < div id="gcsResults" >< /div >
     < div class="contentpane" id="ContentPane" runat="server" >< /div >
   < /TD >

(2c) Now add a reference to the Google AJAX library. Place the following line at the top of your file (before all other lines):

< script src="http://www.google.com/jsapi" type="text/javascript" >< /script >

(2d) Finally, the nitty-gritty. In Part 2 we'll go over this piece in more detail but for now, just add the following code starting with the line immediately after the line we just added in step 2c:

   < script language="Javascript" type="text/javascript" >
   < !--
   google.load('search', '1.0');

   function OnLoad()
   {
      var searchControl = new google.search.SearchControl();
      var drawOptions = new google.search.DrawOptions();
      drawOptions.setInput(document.getElementById("gss_input"));
      var options = new google.search.SearcherOptions();
      options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
      options.setRoot(document.getElementById("gcsResults"));
      // options.setNoResultsString("No results found."); <-- This option is broken as of 11/10/2008
      searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
      searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
      var siteSearch = new google.search.WebSearch();
      siteSearch.setSiteRestriction("YOUR WEBSITE URL GOES HERE");
      searchControl.addSearcher(siteSearch, options);
      searchControl.draw(null, drawOptions);
   }

   google.setOnLoadCallback(OnLoad, true);
   -- >
   < /script >

Your Website's URL:
Be sure to put your website's URL in place of "YOUR WEBSITE URL GOES HERE". If you would prefer to allow the search to return results from any website (i.e., a regular Google search) simply leave out the entire line of code beginning with "siteSearch.setSiteRestriction".

Where Search Results Appear:
This code will place search results in the "gcsResults" DIV we inserted just above the DNN skin's "Content" pane. Nothing will appear in the "gcsResults" DIV until an actual search is performed. If you prefer the results to appear elsewhere, move the DIV with the ID value "gcsResults" to a position just before the desired target area. For instance, to have the results appear above any content in the skin's TOP pane, make the second replacement in step 2B to line 48 ("TopPane") instead of line 55 ("ContentPane") and substitute "TopPane" for "ContentPane" in the CLASS and ID values.

That's it! Save your updated "Vertical Menu - Fixed Width.ascx" file back to the server (you DID make a copy of it first, right?) and your Google Site Search should be all set -- it's now part of the site skin.

Coming in Part 2 and Part 3
In "Part 2" we'll pick through the "nitty-gritty" code from step 2D.  I'll cover how to customize Google search options to span multiple sites and how to influence the order of results. We'll also learn how to perform multiple searches at once, retuning the results in categories based on content type. Click here to continue to Part 2.

Finally, in "Part 3", we'll tie it all in with a (free) Google web account so we can employ online management of our custom search engines as well as access reports on what our users are searching for.

Permalink | Trackback

Comments (42) Add Comment

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mulyono on 10/8/2008 9:42 AM
I tried to follow your instructions, but every time the page refreshes the results are not written to the page. Any suggestion on how to correct my problem? My site is: its-saga.com

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 10/8/2008 9:52 AM

Hi, Mulyono. I hope all is well with you in Jakarta. I looked at your website and everything appears to be ok except that you do not have a text input with an ID value of "gcsResults" -- this is the INPUT tag that I included in step (2b) of my example. To fix your problem, add the following tag to your skin (remember to remove the extra space after the '<' and before the '>'): < input id="gss_input" type="text" / >

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mulyono on 10/9/2008 9:24 AM
Thanks for your reply. When i tried your page, it did not refresh the whole page, because it using google ajax api. But when i tried the same at my page, it refreshed the whole page. Why?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 10/9/2008 9:32 AM

Mulyono- You cannot use the same INPUT tag for the "form post" version of Google search and the AJAX version. You have placed the form post version on your web page and then attempted to re-use the same INPUT tag for the AJAX version from my example. When you search on your page, the form is posting back and refreshing your entire page (the AJAX never runs). You need to remove all of the Google form search from your page (remove the FORM tag and everything inside) and replace it with just the INPUT tag from my example. As you see from the working example on EguanaSoltuions.com, you do not need a button to start the search -- the AJAX will begin searching as soon as you type something in the INPUT box.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Mulyono on 10/10/2008 3:22 PM
mamlin- It's working, now - I can see the search result but if after I enter a search phrase into my input box, I then press the "enter" key my page refreshes again. Is there something I can do to prevent my page from refreshing itself?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 10/10/2008 3:35 PM

Mulyono- Your search results are looking good, now. Yes, you can prevent the ENTER key from clearing your results. I have done this in another implementation of the same Google AJAX search on another site. You must add an "onKeyPress" event to your INPUT box and call a routine to capture the ENTER key, not allowing ENTER to be sent to the INPUT box. The ENTER key has a "keycode" value of "13" -- when you see a keycode of 13 you should return "false" to the "onKeyPress" call which will prevent Google AJAX from getting the "ENTER" and clearing the results. If the keycode is not "13" then you simply return the keycode value and Google will process the keypress as normal. In my own solution (on another website) I'm also capturing the ESCAPE key and using that as part of my method for removing the search results and resetting the page to its original form (without posting back or refreshing the page). Unfortunately it's a bit too much to cover in-depth here in a comment response so I'll consider posting a new blog entry with a solution to the "ENTER key clears my Google AJAX search results" problem.

Solution: Prevent ENTER from clearing Google search results	By mamlin on 11/17/2008 5:36 PM
UPDATE: I have added a blog post with the solution to prevent ENTER key from clearing the Google AJAX search results: http://eguanasolutions.com/Blog/tabid/54/EntryID/14/Default.aspx

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By Rodney Joyce on 12/17/2008 9:56 AM

Great article - thanks. I am looking at implementing this but I have this requirement: Currently on www.pokerdiy.com the core DNN search box in the top right corner redirects to the search results page. I want this to keep happening - ie. they enter a value and it redirects to the core results page and then they can refine their search and have the results update via AJAX. I am not sure the search results would look good on any and every page (I think that is what your code above does?). Is this possible? Thanks

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 12/17/2008 10:13 AM

Rodney- Rather than start with AJAX, I'd place the AJAX search code only on your "search results" page and use it by passing search term(s) to the page via URL querystring values. Here's how: Add JavaScript code (to execute via the results page's ONLOAD event) to parse the querystring and execute an AJAX search if querystring search parameters are found. For your search boxes on all pages besides the "results" page, grab the user-entered search term(s) and, when the user clicks your "SEARCH" button (you'll need one for what you've described) perform (via ONCLICK) a "window.location" redirect to the search results page URL with the search querystring value(s) added. -------------- NOTE: On your search results page, you may also want to hide the real Google search input box and instead provide an input box with a "SEARCH" button in order to match the rest of your site. When the user clicks "SEARCH", perform an AJAX search with the entered terms.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By Rodney on 4/17/2009 11:47 AM

Thanks Mamlin, I will try this sometime. I think if you wrapped this in a module and charged $20 it would be a bestseller (I would rather pay then spend 1 hour implementing this). Also the core search skin object seems to already handle the redirect to the Search page with the search term, eg. http://www.pokerdiy.com/poker-search.aspx?Search=manly So I could just put the Jscript on the results page I think. The current Google Search module is just something I am testing at the moment. BTW - can you please answer this question about the difference between the Google AJAX API and GCS: http://www.dotnetnuke.com/tabid/795/forumid/118/postid/275079/scope/posts/Default.aspx

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Rodney Joyce on 12/17/2008 9:51 PM
Ok, I have the script working on the search results page - the next step is to read the URL and populate the textbox, but I'll leave this for later! Thanks for the advice.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 12/17/2008 9:55 PM

Rodney- This PokerDIY site is looking good - I hadn't popped over to see it in a while. I'll be interested to see what solution you eventually settle on for your site search, especially considering the amount of content you're supporting. I've answered (well, added a few notes) one of your thread questions here: http://www.dotnetnuke.com/tabid/795/forumid/-1/threadid/274897/scope/posts/Default.aspx

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Alejandro Quiroga Alsina on 12/19/2008 6:27 PM
Hey mamlin, I just wanted to stop by and thank you for your excellent contributions. Your blog is really useful and well written. Looking forward to the 2009' Eguana Solution's main site ;-)

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mini on 1/23/2009 11:13 AM
Information is very useful.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By jason on 2/4/2009 3:28 PM

Great article. I was able to get the search results coming from google to show up in my results section. What I am really interested in is part 3 of this article (using Google Custom Searches). I was not able to find it on your site. Am I missing it, or are you still working on it? If you are still working on it, are there any hints you could give on what needs to happen to use the custom search. Thanks again.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 2/4/2009 3:44 PM

jason- Thanks for the comments. Part 3 is not yet available (it's several months overdue at this point). The description of Part 3 already hints at what you need: a Google account. This can be a GMail account, Google Docs account, Webmaster Tools account, etc. More specifically, you'll use a Google account to access Google's custom search engine management interface (see link at end of this comment). Part 3 of this series will briefly step through creation of an online-defined custom serach engine and how to integrate that with the examples presented in Part 1 and Part 2. Hopefully I can get Part 3 wrapped up and published in the next few weeks. On a related note, I also have a post coming on using the AJAX library to integrate custom News banners (rotating banners of Google News based on admin-specified news topics). Here's the link to the custom search engine area: http://www.google.com/coop/cse

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Mike on 2/17/2009 3:37 PM
Great article mamlin. One question: is this capable of supporting the Google search with Adsense results?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 2/17/2009 3:50 PM

Mike- Integrating Adsense with ANY kind of AJAX-driven content has been a hot topic for over three years, now (well before the Google AJAX Search library was released). The short answer is that, yes, you CAN integrate Adsense and the AJAX search even though Google does not yet provide the means to do so. You have to employ an iFrame and dynamically-generated hidden content (off-frame content, actually) in order to get everything to work. The AJAX search library already provides both pre- and post-processing hooks you can leverage to initiate updates to Adsense content. The solution is worth a series of blog posts all by itself -- perhaps I'll tackle that once I get Part 3 posted.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By khankins on 4/17/2009 11:32 AM
Great stuff, thanks! This works great for me. . .until I log out! Has anyone ran across this?? In both Firefox and IE7, the script works until I log out. Then no response at all. Any ideas?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 4/17/2009 11:42 AM

khankins- Thanks for the comments. Sorry to hear you have a hangup. It sounds like you've got one of two problems: (1) A script conflict that occurs when not logged in (such as a custom login module or advertisement module), or... (2) You've placed one or more elements in a page or module with VIEW permission disabled for "All users". _____ How did you integrate with your site? For instance, on this site the Google AJAX search box and support code is integrated using a Text/HTML module (so it shows only on the blog pages) rather than added to the skin (where it would appear on all pages). Can you provide a link to the problem page/site? I'll remove your site link from comments if you prefer not to display it here.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mamlin on 4/19/2009 7:02 AM
khankins- Recevied your reply and have omitted it per your request. I'll give it a look and post what I find.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By khankins on 4/24/2009 2:23 PM

OK I think I have figured it out!! Can you tell me if this makes any sense to you? I had put the div for the results in the "Top Pane" on the page. We are not using the top pane on very many pages, so when the page renders that pane is not visible. When logged in, I can do the search because it allows that pane to expand. Logged out it doesn't have the ability to do that maybe??? Anyway, when I put the gcsResults div in the "Content Pane" which DOES have content it works logged in and logged out. I verified this by removing the modules from the Content Pane on that page -- then it was broken again as expected. _________ OK but it's not all good news. . .now I have added the part about capturing the keystrokes. It successfully captures and ignores the Enter key. It also captures the Escape key in IE, but not Firefox. In Firefox as soon as I press Escape I get an error: event is not defined ____ checkKeypress(keypress charCode=0, keyCode=27)<br>onkeypress(keypress charCode=0, keyCode=27) _____ in the line: _____ if (kC == Esc) { event.keyCode = 27; return; } _____ I have copied/pasted the code straight from the page on your site. . . Can you think of anything I may be missing here?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 4/24/2009 2:33 PM

khankins- Good job! I spent some time looking at your site and scratching my head earlier this week and did not spot the issue. That does make sense. I recommend that you insert the gcsResults div as an empty div inside your skin file immediately above the "Content Pane" div (see step 2b in the post above). Taking it out of a div controlled by DNN (any div in the skin with runat="server") will insure that it always renders in your skin and, therefore, your search always has a target to insert results into. _________ Regarding ESCAPE key and FireFox: Well, I just tested ESC in the AJAX search on my own site under FF and it's not working. It's not generating an error -- it just doesn't do anything. (Looks like I'm going to need to revise that post....) I recommend that you simply comment-out the section dealing with the ESCAPE key for now.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Tony Rodriguez on 6/4/2009 7:30 AM
How about DNN security? Are the articles returned limited to those the logged-in person has rights to see?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 6/4/2009 7:41 AM

Tony- That's a good question. Being that the search is provided by the online Google engine, only publicly-available pages and linked documents will be returned. If you need search that covers "protected" content then the public Google search will not work for you. The standard DNN Search will be your best -free- option for protected-content searches. If your site is 50 pages or less, another free search option (or $99 for more than 50 pages) is detailed here: http://www.wrensoft.com/zoom/support/tutorial_dnn.html

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Kim on 6/9/2009 2:02 PM
Hi, I've tried to implement this on a site of ours but whenever I remove the "<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>" string it causes the page layout to break and the default DNN search shows back up. Is there something I'm missing here?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 6/9/2009 2:34 PM

Kim- The "regsiter" directive should not affect page layout at all as long as you've removed the "dnn:Search" skin object tag (step 2b). Removing the "dnn:Search" tag CAN affect page layout in some cases - even if you replaced it with a similar "GCS" input tag. This is because some skins (especially pure-CSS skins) heavily depend on applied positioning style definitions (padding, margin, float, etc). Your replacement "GCS" input tag is not likely to get the same treatment since it will have a different ID value or it may lack the same CLASS attribute. Try using a CSS sniffer tool (like the free DebugBar tool I covered under the "Blog: Reviews" section). A sniffer will show you all the CSS that has been applied to a certain page element. Check your original DNN Search input box with a sniffer and look for CSS positioning attributes. If the skin is breaking even with the new search box in place of the old one, your new box may need to have the same CSS applied to it as the old one did. I must confess, though, that I don't know how your default DNN search box is managing to reappear if you've removed the "dnn:Search" skin object tag from your skin. If you like, post a comment with a link to a page showing your original, unaltered skin (with DNN Search in place) and I'll see if I can spot any potential "gotchas" in the original rendered skin.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By Mark Whitfield on 6/24/2009 3:46 PM

Took the code off the folling link after a response on www.dotnetnuke.com forums: http://weaselfire.wordpress.com/2009/06/17/google-custom-search-for-dotnetnuke/#comment-7 ____ I got my Google API, added a TEXT/HTML module and then cut and pasted with the appropriate website URL edits only to get the folllowing error: Line: 552 Char: 1 Error: ‘google.search.SearchControl’ is null or not an object ___ Code:0 ___ URL: ___ I am using IE7 and added the new TEXT/HTML module to the existing DNN search results page. The search box is rendered but I get the yellow error box in the bottom left corner of IE. When I type a search string, the kyboard does not respond to the RETURN key to start the search. Any ideas...I like the idea of the code and the ability to search documents in the portal...

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 6/24/2009 4:00 PM

Mark- The Goolge AJAX Search does not require pressing RETURN to initiate search -- search result begin appearing automatically as soon as you type in a few characters. The results are automatically refined as you type more characters into the search box (try it on this page!). From your error it sounds like the script tag reference to the Google AJAX library is not loading the needed JS library file from Google (see "Step 2c" on this page). I can't really guess much more without seeing some code -- if you have a test page online somewhere I'll be happy to take a peek and see if I can spot any issue based on the rendered page code. You might also take a step back from your DNN implementation and try dropping the code into a barebones HTM file until you know you have everything right (hhmmm.....a sample HTM file would be a nice little download I could offer on this site, wouldn't it?).

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Parag on 7/28/2009 11:02 AM
Hi, I have implemented the Google AJAX Search code on my website. My site has a Search input box with a Search button. I need to omit the checkkeypress function called on onkeypress event of input box and have it called on button submit and publish the results on a results page. Can anyone help me out with this?<br>Thanks,<br>Parag

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 7/28/2009 11:37 AM

Hi, Parag- Here's one potential solution: Put the Google AJAX search ONLY on whatever page you wish to use as a "search results" page (make a custom skin just for that one page). On all other pages (in your default skin) place a regular input box with a "Search" button. For the button, tie javascript to it that changes the window location to the "Results" page but also appends to the URL a querystring value of "q=<search term>". Note that you'll need to HTMLencode the search term before appending as a querystring value. On the "Results" page, add javascript that, if the Google AJAX search box is blank, retrieves the querystring value (if present), HTMLun-encodes it and inserts the value into the AJAX search box.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Parag Shah on 7/29/2009 1:58 PM
Thanks mamlin. I tried the above method and it worked.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Parag Shah on 7/30/2009 9:41 AM
Hi mamlin, how can i modify the default css styles in Google Search Results? Can I apply the styles according to my site css? Thanks, Parag

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mamlin on 7/30/2009 9:43 AM
Parag- Several of the results elements have specific classes defined. You can modify/override these class settings at the local level. See the following link for some Google documentation on search results styling: http://code.google.com/apis/ajaxsearch/documentation/reference.html#_intro_GResultCss

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Parag Shah on 8/4/2009 9:38 AM
Hi Mamlin, I am havign a problem with search results paging on the site I implemented. It shows 1 to 8 page numbers but on clicking on 2nd or 3rd page it shows the actual paging. i.e. 3 pages or 4 pages depending on the results.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 8/4/2009 9:58 AM

Parag- The issue is not with the AJAX search code or with your implementation but rather with Google's "estimation" of search results. This happens all the time with Google but people rarely notice it since most Google searches return thousands of results. Google admits to the issue (but only just barely): http://tinyurl.com/googerr _____ You can verify that this is not just an AJAX search problem by using the standard Google.com search page. For example, use the search box on this site for 'javascript' to get 8 pages of results but click on page 7 to see the 8th page link go away. This is the same problem you've described. Now try the same site-based search using the standard Google.com search page to get 4 pages of results but click through the pages and the link for page 4 goes away. Example here: http://tinyurl.com/esjavascript _____ If you discover more information on the issue I'd love to know. At present the only solution I'm aware of is to use Google Custom Search to return raw XML results and then use your own rendering engine to count and display the paged results.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By Joe Craig on 11/6/2009 1:12 PM
I would like to replace the contents of the Content Pane with the search results. Is there a way of doing this?

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)

By mamlin on 11/6/2009 1:21 PM

Yes! In step (2d) above, replace the identifier "gcsResults" with "ContentPane" (or the ID of whatever pane you wish to replace with search results). Google tosses out whatever is already inside of the target search results container before filling the container with new results. This was actually my initial solution (replacing the primary content with search results) but I decided that -keeping- page content and adding results to the page had advantages over tossing out page content and made this solution a bit more unique compared to most search solutions. Note that replacing content of an existing pane -may- have unintended visual results depending on how your skin is defined. Always try things out on a test copy first!

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mark on 1/25/2010 12:26 PM
Great search idea thanks. I tried your search box and it works great - on a test page. However, when I incorporate the same code in my DNN site it doesn't work for me; nothing is displayed.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mark on 1/25/2010 12:28 PM
Do you have to add AJAX as a control in HOST -> Module Definitions in order for this AJAX script to work? as shown here: http://www.datasprings.com/Resources/ArticlesInformation/AJAXwDotNetNuke.aspx

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mark on 1/25/2010 12:29 PM
you can ignore my posts above, 've just got it working - there seemed to be trouble with uploading the skin (it was not updating), but it worked ok when I copied the code direct into the file on the web server.

Re: Add Google AJAX Search to your DNN skin (Part 1 of 3)	By mark on 1/26/2010 12:09 PM
further to the above, I actually had 2 issues. The second problem I had was leaving in the < ! - - comments tags (around the google load code). The AJAX code only works when leaving out these comment tags las shown here: http://www.patrickrenner.com/LinkClick.aspx?fileticket=RT4fQUTFOlc%3D&tabid=36 (and I have JavaScript and applets enabled on my browser too.)

Your name:
Title:
Comment:

Security Code Enter the code shown above in the box below
Add Comment Cancel