Nice Bootstrap Trick for Clean Search Box
I've been working to build a little collaboration tool at The Shop with a clojure back-end and a simple Bootstrap front-end. I have to admit that Bootstrap and Handsontable are some amazing tools, and I could not imagine doing the project without them.
Part of this was to have a simple 'Search' feature in the top menu bar where the users could input the known ID of a document to pull up, and the system would do it. Thankfully, Bootstrap supports this capability nicely:
But the problem with this is that it's put in the page as an HTML form:
<form id="search_loan" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input id="loan_id" type="text" class="form-control" placeholder="Search">
</div>
<button id="find_loan" class="btn btn-default">Go!</button>
</form>
so that when you hit 'Enter' in the text box, or click the 'Go!' button, it performs the POST, and your code either has to be ready for the POST, or you have two refresh of the data - and that's not simple or clean. The solution is to intercept the form submission and hijack the event to do your bidding.
At the bottom of your HTML page, where you load all the javascript libraries, you can put a little script block, last of all, and it'll do some cool stuff:
// set up the form components to work as we need them $("#search_loan").submit( function(e) { e.preventDefault(); loadLoan(document.getElementById('loan_id').value); });
this little bit of code will capture the form submission event, prevent it's default behavior from occurring, and then call the loadLoan function with the contents of the text box in the search field.
Given that this function is what you want to have happen, this will make the search box work just like you want. All from one page, no redirections, no calls to refresh the page. Just load up the data on the search. Very cool.