confirm functions to get some data from the user or to ask for a confirmation.
Is it possible to show some prettier custom dialogs instead of those default ones? The answer is yes and here we describe how to do it.
We are going to replace those default ugly popups with nice HTML dialogs made with JQuery UI dialogs library.
The approach we will use is quite simple: our
Step 1: Define the placeholders for dialogs
First of all we need to define some placeholders (read
div elements) on our page where our new dialogs will be rendered. We can place those
divs anywhere on our page - anyway, they will be hidden till the time they needed. Here is an example:
<div id="dialog-confirm" style="display:none"> <p id="dialog-confirm-content"></p> </div> <div id="dialog-form" style="display:none"> <form> <label for="name" id="dialog-form-content"></label> <input type="text" name="name" id="dialog-form-input" class="text ui-widget-content ui-corner-all" /> </form> </div>
Step 2: New AdvancedSearchView class
Now we need to define our own AdvancedSearchView class (inherited from the original one) and override some methods in it.
NB: Contact us if you need a TypeScript version of this file.
Add this file to your page. Don't forget to include JQuery UI (version 1.12 or higher) before including
adv-search-custom.js script file.
Step 3: Replace the default view with the new one
Now you just need to replace the line of code on your page (or a separate .js file if you place all your JS code there) which creates the
So, instead of something like this:
var view = new easyquery.AdvancedSearchViewJQuery(); . . . . . view.init(options);
it should be now:
var view = new advsearch.CustomAdvancedSearchView(); . . . . . view.init(options);
That's all! Now when run your project, open the Advanced Search page and try to perform some query save/loading operations - you will see the new dialogs.