Custom Search Button

Mar 3, 2009 at 11:13 PM
Hi all

I  need to be able to change the 'Search Buttom' ideally to an asp:ImageButton so I can customize its look to be in keeping with other buttons on my website.  I dont realy understand how this button is getting geerated so was hoping someone could ponit me in the right direction as to how i can achieve this.

Mar 4, 2009 at 12:27 AM
In the SearchBox.cs file under App_Code\Controls, you'll find the line of code below which generates the button.

sb.AppendFormat("<input type=\"button\" value=\"{0}\" id=\"searchbutton\" onclick=\"'{1}');\" onkeypress=\"'{1}');\" />", BlogSettings.Instance.SearchButtonText, Utils.RelativeWebRoot);

You can replace the line above with the one below, and adjust the "src" and/or add a "class" to it, etc.

sb.AppendFormat("<input type=\"image\" src=\"\" id=\"searchbutton\" onclick=\"'{0}');\" onkeypress=\"'{0}');\" />", Utils.RelativeWebRoot);
Mar 4, 2009 at 12:50 AM
hi BenAmada...

you the man thanks one again!.. i give it a go!
Mar 4, 2009 at 8:41 AM
Edited Mar 4, 2009 at 8:53 AM
i tried this and can now get an image button to display as i want the only trouble is that when seleting my imge button after entering something to search for nothing happens?? any ideas?

my code is like this;

sb.AppendFormat("<input type=\"image\" src=\"" + myPath + "\" id=\"searchbutton\" onclick=\"Search('{0}');\" onkeypress=\"Search('{0}');\" onmouseover=\"javascript:this.src='" + myPathAlt + "';\" onmouseout=\"javascript:this.src='" + myPath + "';\" />", Utils.RelativeWebRoot);

where myPath is a varible to an image file.

and the old code was;

sb.AppendFormat("<input type=\"button\" value=\"{0}\" id=\"searchbutton\" onclick=\"Search('{1}');\" onkeypress=\"Search('{1}');\" />", BlogSettings.Instance.SearchButtonText, Utils.RelativeWebRoot);

thanks for your help on this.
Mar 4, 2009 at 4:55 PM
So a couple of things here ...

1.  If your BE version is prior to changeset 25287 released on Feb 20, then your onclick and onkeypress handlers should call the "Search" function (like your code currently shows).  If your BE version is changeset 25287 or later, then onclick and onkeypress should call instead.

2.  Most importantly, you should include "return" in front of the function calls.  So instead of "Search('{0}')" it should be "return Search('{0}')".  The Search function returns 'false' and returning a value of false prevents the browser from actually following through with the submission.  This is what we want because the Search JavaScript function takes care of redirecting you to the search page to display the search results.

3.  You don't need the javascript: part in your onmouseover and onmouseout handlers.  These event handlers (onmouseover and onmouseout) already fire within a JavaScript context.  The only time javascript: might be needed is if you put it in an HREF tag where the value in an HREF tag is not within an actual JavaScript context.
Mar 4, 2009 at 5:11 PM
Thanks BenAmada for your clear explanation all working now.  I am very grateful.
Mar 4, 2009 at 5:15 PM
Glad it's working.  Incidentally, in case you were curious (I was), the reason the original code with the regular button (not the image button) didn't have a "return" in the onclick and onkeypress handlers is because an <input> with a type of "button" doesn't submit the form to the server (there's no POST to the server).  An <input> with a type of "submit" or a type of "image" does submit the form to the server.  This is why the "return" part is needed for "submit" and "image" inputs if the action is going to be handled by JavaScript.
Mar 4, 2009 at 6:12 PM
i was indeed wondering what was going on thanks for clearing that up for me.
Mar 4, 2009 at 7:06 PM
I just wanted to chime in on this before it disappears.

I've found it best for me to just not use the stock search control in certain themes.  I wire up an image button with the search stuff out of the control code and have a nice custom version for my theme.

This way, I can do updates to new versions of BlogEngine I can just copy the project files over without worrying about special changes throughout the code. 

Of course, I likely am updating more than the average person, but this practice has worked very well for me.
Mar 4, 2009 at 7:41 PM
hi RazorAnt,

thanks for your comment i think i will bare n mind that approach in the future as my skills improve!
May 4, 2009 at 3:39 PM
Edited May 5, 2009 at 12:29 AM
Ah, 3 hours of banging my head against the wall yesterday to find this today.  Lovely!  I was wondering why the search button would just post back and nothing would happen.  Thanks for sharing!

Update, worked like a charm.  In that case, one might be able to extend Controls/SearchBox.cs to include something like:

private bool useImageGoButton;
public bool UseImageGoButton
        set { useImageGoButton = value; }

That way, one can toggle it.  But then if you're going to do that, it would be better to extend it up to the control panel I guess. 

Anyway, thanks again.  Was nice to hop on, apply the fix and see it actually work.