Single Search Boxes and the Submit Button

by Jonathan Jacobsen Thursday, September 10, 2009 8:32 AM

 

On a search form with only one search term box and one submit button, such as the Quick Search form in the Andornot Starter Kit, the usual user behaviour is to type search terms and press the Enter key. However, there is a longstanding issue with ASP .NET that results in seemingly nothing happening in this case, in some browsers. The form does a weird empty postback because it submits the form, but does not call your ASP.NET submit button's click event: i.e., it does a postback, but does not do anything. The user must instead use the mouse to click the Submit button.

A simple workaround for this is to add a second search box to the form, but make it invisible. For example, add:

<input type="text" style="display:none;" />

Now when the user presses the enter key, the subsequent postback operates as expected (i.e. in the case of the Andornot Starter Kit Quick Search form, it submits the search instead of just doing an "empty" postback that doesn't do anything).

More information on this ASP.NET behaviour is available here. Information on similar behaviour in AJAX Update Panels is in an earlier Andornot developer blog post.

WebPublisher PRO Errors

by Denise Bonin Tuesday, September 08, 2009 3:23 PM

Recently we have had several clients contact us about various WebPublisher PRO error messages. The two main ones are as follows (please note the bolded words):

DB/Text or CS/WebPublisher: Operation failed for unknown reason while processing 'begin finding RootURL ProcessInput', after line ####. Please inform Inmagic, Inc.

DB/Text or CS/WebPublisher PRO: Operation failed for unknown reason while processing 'open textbase [doOpenTextbase]', after line ####. Please inform Inmagic, Inc.

We believe that the cause is a recent Microsoft server update interfering with some WebPublisher PRO functions. There are some easy fixes to both the errors:

  • RootURL
  • We have determined that the problem is with the BU line in the search code where the BU line is set to a short form, for example in a search page:

    <input type="hidden" id="BU" name="BU" value="default.aspx" />

    Luckily the fix is easy. Just replace the short form of the BU line with the full URL, for example:

    <input type="hidden" id="BU" name="BU" value="http://WebsiteName/default.aspx" />

    This is also true in canned queries, for example: BU=/default.aspx should be BU=http://WebsiteName/default.aspx

    What is the BU line for? From Inmagic Knowledgebase article # 2104:

    "BU" is the location of the link that submitted the search. It is required for a canned query if you would like to use expand record jump or change the report after the results of the canned query are returned.

  • Open textbase
  • This error can be resolved by restarting IIS.

Please contact Andornot or Inmagic Support if you have been experiencing either of these error messages.

Highlight search terms with jQuery

by Peter Tyrrell Thursday, September 03, 2009 12:04 PM

Overview

Highlight words and phrases within specified elements on the page. Search syntax is trimmed or eradicated, stopwords and words less than 3 characters  are ignored.

Ingredients

You will need:

   1:  
   2: /*
   3:     methods to help highlight search words and terms 
   4:     depends on jquery
   5:     Peter Tyrrell, August 2009
   6: */
   7:  
   8: // 
   9: var highlightTermsIn = function(jQueryElements, terms) {
  10:     var wrapper = ">$1<b style='font-weight:normal;color:#000;background-color:rgb(255,255,102)'>$2</b>$3<";
  11:     for (var i = 0; i < terms.length; i++) {
  12:         var regex = new RegExp(">([^<]*)?("+terms[i]+")([^>]*)?<","ig");
  13:         jQueryElements.each(function(i) {
  14:             $(this).html($(this).html().replace(regex, wrapper));
  15:         }); 
  16:     };
  17: }
  18:  
  19: // returns array of unique search terms (words, phrases) found in value        
  20: var parseSearchTerms = function(value) {
  21:     
  22:     // split string on spaces and respect double quoted phrases
  23:     var splitRegex = /(\u0022[^\u0022]*\u0022)|([^\u0022\s]+(\s|$))/g;
  24:     var rawTerms = value.match(splitRegex);
  25:     
  26:     var terms = [];            
  27:     for (var i = 0; i < rawTerms.length; i++) {
  28:         
  29:         // trim whitespace, quotes, apostrophes and query syntax special chars
  30:         var term = rawTerms[i].replace(/^[\s\u0022\u0027+-][\s\u0022\u0027+-]*/, '').replace(/[\s*~\u0022\u0027][\s*~\u0022\u0027]*$/, '').toLowerCase();
  31:         
  32:         // ignore if <= 2 chars
  33:         if (term.length <= 2) {
  34:             continue;
  35:         }
  36:         
  37:         // ignore stopwords
  38:         var stopwords = ["about","are","from","how","that","the","this","was","what","when","where","who","will","with","the"];
  39:         var isStopword = false;
  40:         for (var j = 0; j < stopwords.length; j++) {
  41:             if (term == stopwords[j]) {
  42:                 isStopword = true;
  43:                 break;
  44:             }
  45:         }
  46:         if (isStopword === true) {
  47:             continue;
  48:         }
  49:         
  50:         // add term to term list
  51:         terms[terms.length] = term;
  52:     }
  53:     return terms;
  54: }

Example 1

Pass an array of terms to be highlighted in jquery-selected elements:

   1: <script type="text/javascript">
   2:     $(document).ready(function() {
   3:         var searchTerms = ["banana", "monkey"];
   4:         // highlight valid terms in search results          
   5:         highlightTermsIn($("#HighlightWrapper"), searchTerms);        
   6:     });
   7: </script>

Example 2

Parse raw search input to strip out stopwords, query syntax characters, and wee short words less than 3 characters that do nobody any good. Quoted phrases are treated as a single term.

   1: <script type="text/javascript">
   2:     var rawSearch = "give the banana* to a monkey";
   3:     var termsToHighlight = parseSearchTerms(rawSearch);
   4:     // termsToHighlight now = ["give", "banana", "monkey"]
   5: </script>

Example 3

Put it all together to retrieve raw search input from the query string, parse out terms to highlight, and highlight within specified containers.

   1: <script type="text/javascript">
   2:     $(document).ready(function() {
   3:         // get quick search value from query string
   4:         var quickSearch = $.query.get("q");
   5:         // highlight valid terms in divs marked class="HighlightWrapper"        
   6:         highlightTermsIn($("div.HighlightWrapper"), parseSearchTerms(quickSearch));
   7:     });     
   8: </script>

Acknowledgements

 

Tags: javascript

Month List