Custom client-side dialogs for saving/loading operations

Problem

The Advanced Search page in our demo project uses standard JavaScript prompt and 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.

Solution

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 AdvancedSearchViewJQuery JavaScript class has several methods which can be "overriden" to replace the default behavior (with prompts) with your own implemenation of those dialogs.

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.

Here is an example of such class for the "pure" JavaScript 5 (where we don't actually have "classes" yet).

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 view object.

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.