jquery click event and selector in action
by Matt Rummler
HTML
<!--
Purpose:
To provide the UI for the search capabilities.
IMPORTANT FOR LOADING SEARCH RESULTS:
can modify the button to show Loading... while the search is performed using bootstrap:
http://getbootstrap.com/javascript/#buttons-stateful
-->
<section id="searchSection" class="center-block search">
<form id="searchForm" class='show' autofocus>
<button id="searchClose" type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<fieldset id="searchfieldset">
<legend>
Search<br/>
</legend>
<input id="formName" type="hidden" name="formName" value="Search">
<!-- <label for="search" data-inline="true">
Search Field
</label>-->
<br/>
<input id="search" type="search" name="search" class="form-control" value="" autocomplete="off" autofocus/>
</fieldset>
<input id="performSearch" type="button" class="btn btn-info" value="Search">
<input id="clearSearch" type="reset" class="btn btn-info" value="Clear Search">
<input id="newFile" type="button" class="btn btn-info" value="Create New File">
<br/><br/>
<fieldset id="searchresultsFieldset" class="hidden">
<legend>
Search Results
</legend>
<div id="searchresults" name="searchresults">
<!-- will need to create some javascript to support the results showing up here
ALSO the showing & hiding mentioned below sounds like a good idea
Oh, & the js can just look for when there are certain values in the data that comes back from the server
(see how I am doing that with the fields)-->
</div>
</fieldset>
</form>
</section>
JavaScript
//alert('something to alert');
$('#searchClose').on("click", function()
{
var currentElement=$(document.activeElement);
//alert('something else to alert!'+currentElement);
alert('this should show the ID of the current element: '+currentElement.attr('id'));
});