This discussion has been locked. The information referenced herein may be inaccurate due to age, software updates, or external references.
You can no longer post new replies to this discussion. If you have a similar question you can start a new discussion in this forum.

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

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



PageHeader.ascx
Parents
  • I would suggest little refactor your code to this one:

        <style type="text/css">

            #MySearchDiv {

                font-family:arial;

                color:#FFFFFF;

                font-size:10pt;

                font-weight:bold;

                padding-top:3px;

            }

            #MySearchText {

                font-size:10pt;

            }

            #MySearchProperty {

                width:100px;

                font-size:10pt;

            }

        </style>

        <div id="MySearchDiv">Find  <input id="MySearchText" name="MySearchText" type="text" size="10" /> By

            <select id="MySearchProperty" name="MySearchProperty" size="1">

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

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

            </select>

            <input type="button" value="Search" id="mySearchButton" />

        </div>

        <script type="text/javascript">

            $("#MySearchProperty").on("keypress", function (event) {

                var searchStr = $(this).val();

                var propertyStr = $("#MySearchProperty").val();

                if (event.keyCode == 13 && searchStr != '')

                {

                    window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?' + 'Property=' + propertyStr + '&SearchText=' + searchStr);

                    event.preventDefault();

                    event.stopPropagation();

                }

            });

            $("#mySearchButton").on("click", function (event) {

                event.preventDefault();

                event.stopPropagation();

                var propertyStr = $("#MySearchProperty").val();

                if (searchStr == '') {

                    alert('Node name or IP must be filled out!');

                }

                else {

                    window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?' + 'Property=' + propertyStr + '&SearchText=' + searchStr);

                }

            });

        </script>

    But not, that every run of Configuration Wizard give your changes away. And this change is not supported.

Reply
  • I would suggest little refactor your code to this one:

        <style type="text/css">

            #MySearchDiv {

                font-family:arial;

                color:#FFFFFF;

                font-size:10pt;

                font-weight:bold;

                padding-top:3px;

            }

            #MySearchText {

                font-size:10pt;

            }

            #MySearchProperty {

                width:100px;

                font-size:10pt;

            }

        </style>

        <div id="MySearchDiv">Find  <input id="MySearchText" name="MySearchText" type="text" size="10" /> By

            <select id="MySearchProperty" name="MySearchProperty" size="1">

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

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

            </select>

            <input type="button" value="Search" id="mySearchButton" />

        </div>

        <script type="text/javascript">

            $("#MySearchProperty").on("keypress", function (event) {

                var searchStr = $(this).val();

                var propertyStr = $("#MySearchProperty").val();

                if (event.keyCode == 13 && searchStr != '')

                {

                    window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?' + 'Property=' + propertyStr + '&SearchText=' + searchStr);

                    event.preventDefault();

                    event.stopPropagation();

                }

            });

            $("#mySearchButton").on("click", function (event) {

                event.preventDefault();

                event.stopPropagation();

                var propertyStr = $("#MySearchProperty").val();

                if (searchStr == '') {

                    alert('Node name or IP must be filled out!');

                }

                else {

                    window.open('/Orion/NetPerfMon/Resources/NodeSearchResults.aspx?' + 'Property=' + propertyStr + '&SearchText=' + searchStr);

                }

            });

        </script>

    But not, that every run of Configuration Wizard give your changes away. And this change is not supported.

Children
No Data