Proper approach to rendering views in a modal dialog?

Need Help
1

Below is sample code of how I am rendering a template within a modal popup dialog. Keep in mind there is no consideration for mobile at this time. Basically an ajax call occurs and hits an ajax controller which renders the view and by an id of a div I set the div HTML to the rendered html from the ajax call. Is this the most proper current approach for this type of use case?

('#dtlTable').click(function(e) { .ajax({
type: “GET”,
url: “/ajax/renderDetailTableView”,
success: function(result) {
('#dialog-confirm').html(result); ( “#dialog-confirm” ).dialog({
resizable: false,
height: “auto”,
width: “auto”,
modal: true,
buttons: {
“OK”: function() {
SavePriceListData();
( this ).dialog( "close" ); }, Cancel: function() { ( this ).dialog( “close” );
}
}
});
},
error: function(result) {
}
});
});

2

You can use Mardown-Syntax to make your code more readable in this forum.

Use 3x backtick to open a codeblock, 3x backtick to end a codeblock.
You can also specify a Language for syntax highlighting.

Example:

```JS
let text = ‘some sample text’;
$(’#some-selector’).on(‘click’, function(e){

});
console.log(text);
```

will give you the following result:

let text = 'some sample text';

$('#some-selector').on('click', function(e){

});

console.log(text);

This way your code is more readable.

3 
$('#dtlTable').click(function(e) {
    $.ajax({
        type: "GET",
        url: "/ajax/renderDetailTableView",
        success: function(result) {
            $('#dialog-confirm').html(result);
            $( "#dialog-confirm" ).dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
                buttons: {
                    "OK": function() {
                        SavePriceListData();
                        $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        },
        error: function(result) {
        }
    });
});
4

The best solution doesn’t exist, it all depends on the context. So my answer is very opinionated and based on presumptions. Some of my thoughts:

1

Dialogs (like the one provided by Jquery UI) are often a bad design decision for web based applications. Use them only, if you really need them. tables or details (renderDetailTableView) should not be displayed in a dialog. A view is not a dialog.

2

$( "#dialog-confirm" ).dialog({

Ask yourself: Do I really need Jquery and Jquery UI. How many times you’re using jquery UI in your application?

3

/ajax/renderDetailTableView
I wouldn’t use a single controller for your ajax calls. The controller responsible for this table should handle this request.See: SRP Single responsibility principle - Wikipedia
Your URL is not a good design for an API endpoint.

4

$('#dialog-confirm').html(result);

You could serialize your data and pass it as JSON. HTML generates an overhead: you send more data than you actually need. .html() is also prone to XSS. Escape your data properly if you cannot trust the source.

The HTML for the dialog could already be present in the HTML of the view you’re currently on and you change only the visibility and data of its fields when the response comes in.

5

Keep in mind there is no consideration for mobile at this time.

It’s 2018 for me it is very difficult to think of a webpage that isn’t responsive. Even if there’s no mobile version planned, the web itself is responsive even without mobile devices there are so many different resolutions, DPI, aspect ratios, …