Skip to main content ↑ ↓
Topic: Non-Unique Element IDs (Read 1546 times) previous topic - next topic

Non-Unique Element IDs

I have a table with auto generated List, Add, and Edit Pages.
When I set the List page "Modal Edit" to True, the resulting List page ends up with non-unique element Ids.
The page includes both Add and Edit elements for each field, but they end up with the exact same element Id (i.e. ctrl-FieldName), this causes adding an onChange event by element Id not to work. The onChange event gets assigned to the add page, but not the Edit page in my case.

I saw another thread with a work around, but from my understanding, element Ids should be unique, and this seems like a bug.

I am wondering how many other javascript problems this causes as well. I have been trying to figure out why my select boxes don't work right, and this seems to be a possible reason.

Sure I could set modal edit to false, but modal gives the behavior I am looking for.

Re: Non-Unique Element IDs

Reply #2 –
On the List page I set AjaxPage to True.

Re: Non-Unique Element IDs

Reply #3 –
@n8‍ please set it to false and rather configure the modal edit and modal view individually, it should be the last configuration in the List Page Properties.

Re: Non-Unique Element IDs

Reply #4 –
I set AjaxPage to false and reloaded, but the Ids are still duplicated.
They are unique until I click Edit on an existing record and the Edit modal appears. I looked at the click event for the edit button and it still loads the page via Ajax. I also see a new XHR in the Developer pane loading the page.

Re: Non-Unique Element IDs

Reply #5 –
I did edit the design of the list page and for the "Add" button I set it to "Preloaded Modal", this causes the "Add" "ctrl-FieldName" Id to exist when the page loads, and the duplicate is created when the "Edit" button is clicked.
If I set the "Add" button to "Ajax Modal", then the Id is not duplicated until I click both "Add" and "Edit" buttons. Which is of course something a user may want to do.

Re: Non-Unique Element IDs

Reply #6 –
I came up with a solution. It just deletes the innerHTML, once the modal is hidden. Seems to work fine.
In Custom JS I added:
Code: [Select]
$(document).ready(function() {
    var open_page_modal = $(this).find('.open-page-modal');
    var modal = open_page_modal.next('.modal');
    modal.on('hidden.bs.modal',function(){
        var modal_body = $(this).find('.modal-body').get(0);
        modal_body.innerHTML="";
    });
    var main_page_modal = $(this).find('#main-page-modal');
    main_page_modal.on('hidden.bs.modal',function(){
        var modal_body = $(this).find('.modal-body').get(0);
        modal_body.innerHTML="";
    });

});