How to Display ViewPage in Modal Dialog on Row Click (v2022)

Tips submitted by PHPMaker users
Post Reply
mobhar
User
Posts: 11660

How to Display ViewPage in Modal Dialog on Row Click (v2022)

Post by mobhar »

For those of you who have been implementing this code for v2019, then here is the code for v2022:

<?php if (Security()->canView()) { // don't forget this for security ?>
$('#tbl_modelslist tr').click(function() { // click event for table id and row selector; adjust it to your table id!
    var view_modal = $(this).find("a.ew-row-link.ew-view").attr("data-url"); // get the url
    ew.modalDialogShow({lnk:this, url: view_modal}); // display the View Page in modal dialog
});
<?php } ?>

This code is much simpler than for v2019, since we can get the URL from data-url attribute that belongs to the a href link.


SilentNight
User
Posts: 171

Post by SilentNight »

I edited it a bit to only affect the table body since clicking on elements in the table header would cause the page to hang. I also added exclusions for specific classes for things such as buttons and checkboxes, don't want the view page coming up when trying to use multi select functionality. Probably excluded more classes than necessary but I was tired of messing with it.

<?php if (Security()->canView()) { // don't forget this for security ?>
$('#tbl_Assetslist tbody tr').click(function(e) { // click event for table id and row selector; adjust it to your table id!
//exclude troubled classes in the if statement below
if (!$(e.target).hasClass('btn') && !$(e.target).hasClass('ew-preview-row-btn') && !$(e.target).hasClass('custom-control-label') && !$(e.target).hasClass('btn-group') && !$(e.target).hasClass('btn') && !$(e.target).hasClass('btn-group') && !$(e.target).hasClass('ew-icon') && !$(e.target).hasClass('icon-edit') && !$(e.target).hasClass('icon-view') && !$(e.target).hasClass('ew-row-link') && !$(e.target).hasClass('btn-default') && !$(e.target).hasClass('ew-list-option-body') && !$(e.target).hasClass('form-check') && !$(e.target).hasClass('ew-multi-select') && !$(e.target).hasClass('ew-table-header')) {
    var view_modal = $(this).find("a.ew-row-link.ew-view").attr("data-url"); // get the url
    ew.modalDialogShow({lnk:this, url: view_modal}); // display the View Page in modal dialog
}
});
<?php } ?>

mobhar
User
Posts: 11660

Post by mobhar »

Thanks. It was a very helpful customization.


SilentNight
User
Posts: 171

Post by SilentNight »

Anyone know how to do this for just opening a page regularly (not in modal)? From my understanding Master/Detail View doesn't support Modal.

Tried the following but it doesn't work:

var view_page = $(this).find("a.ew-row-link.ew-detail-view").attr("href"); // get the url for detail page
window.location.href = view_page; // open page

mobhar
User
Posts: 11660

Post by mobhar »

Your code should be enclosed by the table selector id to trigger the click event, for example:

$('#tbl_orderslist tbody tr').click(function(e) { // click event for table id and row selector; adjust it to your table id!
    var view_page = $(this).find("a.ew-row-link.ew-detail-view").attr("href"); // get the url for detail page
    window.location.href = view_page; // open page
}); 

SilentNight
User
Posts: 171

Post by SilentNight »

It is, still doesn't work.


mobhar
User
Posts: 11660

Post by mobhar »

You may press F12 from your browser and check whether any Javascript error message returned.


SilentNight
User
Posts: 171

Post by SilentNight »

All my pages have Uncaught SyntaxError: Unexpected token '<' at {tablename]:587 but that's all.

Even with this error all pages seem to be working fine. My Inventory page has this error but the click to view in modal dialog works fine.


Post Reply