Add “Search for Nodes" element  in every Solarwinds Webpages header with ‘hit’ Enter enabled

Version 9

    I have added some codes in “C:\inetpub\SolarWinds\Orion\Controls\PageHeader.ascx” which adds the 'Search for Nodes' element on every SolarWinds webpages in the page header.

     

    sw-search.jpg

    In order to prevent form resubmission message popup when page is refreshed I try to use “onClick” function instead of using the Submit button. The IE and other browsers (Chrome, FF, ..) seem have different way to handle the onClick event, so in IE the “search” will be a button but not submit button,    in other browsers it will be text.

     

    Also, you can just type in the search criteria and hit ‘enter’ then the search will execute (search by node name by default)

     

    The codes are:

     

    <div style="font-family:arial;color:#FFFFFF;font-size:10pt;font-weight:bold;padding-top:3px;">

    <form id="MySearchForm" name="MySearchForm" onSubmit="return false;">

    Find  <input id="MySearchText" name="MySearchText" type="text" size="10" style="font-size:10pt;"  onkeypress="var searchStr = MySearchText.value; var propertyStr = MySearchProperty.value; if(event.keyCode==13  && searchStr!=''){window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?'+'Property='+propertyStr+'&SearchText='+searchStr);}"/> By

    <select id="MySearchProperty" name="MySearchProperty" size="1" style="width:100px;font-size:10pt;">

    <option value="Caption">Node Name</option>

    <option value="IP_Address">IP Address</option>

    </select>

    <![if !IE]>

    <a id="mySearchLink" onClick="var searchStr = MySearchText.value; var propertyStr = MySearchProperty.value; if(searchStr==''){alert('Node name or IP must be filled out!');} else {window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?'+'Property='+propertyStr+'&SearchText='+searchStr);}">

    Search</a>

    <![endif]>

    <!--[if IE]>

    <button id="mySearchButton" onClick="var searchStr = MySearchText.value; var propertyStr = MySearchProperty.value; if(searchStr==''){alert('Node name or IP must be filled out!');} else {window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?'+'Property='+propertyStr+'&SearchText='+searchStr);}">

    Search</button>

    <![endif]-->

    </form>

    </div>

     

    SW-Search-code.jpg

    I have tested the code in IE, FF & Chrome, same results from FF & Chrome, but not IE:

     

    Firefox V17 and Chrome V27

    when press enter with empty search string, page refreshed only

    when press enter with non-empty search string, page refreshed and results opened in a new page

    when click “Search” text with empty search string, alert message displayed, not refresh page

    when click “Search” text  with non-empty search string, results opened in a new page and not refresh page

     

    IE 9,

    when press enter with empty search string, alert message and page refreshed

    when press enter with non-empty search string, page refreshed and results opened in a new page

    when click “Search” button with empty search string, alert message displayed AND  refresh page

    when click “Search” button  with non-empty search string, results opened in a new page and refresh page

     

    I notice it will take a bit longer to load the webpages when you first to load pages after making the changes, but it will be back to “normal” after a few loads. (Not sure why, may be refresh the caches?)

     

    Hope this is useful.

     

    PLEASE MAKE BACKUPS BEFORE YOU CHANGE THE FILE.

    PLEASE TEST THE CODES BEFORE APPLY TO LIVE SYSTEM.

    USE THE CODES AT YOUR OWN RISK AND FEEL FREE TO MODIFY THEM.

     

    Thanks

     

    update:

    ================================

    add onSubmit="return false;" in <form Tag>, now when press "Enter", page NOT refresh any more in IE and others, also NOT refresh when click Search Button in IE. BUT in IE when press Enter, search result page open twice, not in other browsers. Why? any help? Thanks


    update: 23/07/2013

    ================================

    fixed issue above.

    seems IE handles "Enter" key press as submit button clicked, to stop this:

    added return false; in <input> tag:

    <input id="MySearchText" name="MySearchText" type="text" size="10" style="font-size:10pt;"  onkeypress="var searchStr = MySearchText.value; var propertyStr = MySearchProperty.value; if(event.keyCode==13  && searchStr!=''){window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?'+'Property='+propertyStr+'&SearchText='+searchStr);return false;}"/>


    update: 24/07/2013

    ================================

    Found a bug in my code:


    when you go to page "Admin -> Settings -> SAM Settings -> Browse for Component Monitor", the radio buttons selection not working, see screenshot below

    sw-search-error1.jpg

    Cause: my codes conflict with code in that page. To see the source code:


    sw-search-error2.jpg


    The page uses Java scripts to select radio button. In the script, document.form(0) refer to my search form rather than the original one.


    Fix: REMOVE <form></form> Tags from my code.

    <form id="MySearchForm" name="MySearchForm" onSubmit="return false;">

    </form>


    update: 02/08/2013

    ================================

    I uploaded modified  PageHeader.ascx (NPM version 10.4). Please test. Thanks