0

Having an issue with my app that happens randomly the first time it is run (sometimes it works still). After a browser refresh, it solves the issue so I believe its a race condition. However, I am binding the event to document and it is also within document ready so I am out of ideas how to remedy it.

I have a series of tab buttons in the class .inactivetab that get generated during page load. On click, it should call methods.setTab which changes the class to .activetab and changes the page that is viewed. Usually all the buttons get the event properly and this works. Sometimes though, a few buttons (not all) do not work. This is the code snippet below:

$(document).ready(function(){
    $(document).on('click', '.inactivetab', function () {
        methods.setTab($(this).attr('id').replace('-ButtonId', ''));
    });     
})

And this snippet is what creates the buttons within the program (where module[] is an array of pages/tabs returned from the db forming the buttons) :

var.modules.forEach(module => {
                tab_HTML += "<button id=\"" + module[1] + "-ButtonId\" type=\"button\" class=\"inactivetab\" style=\"display:block\">" + module[2] + "</button>";
            })

I thought putting document ready and delegating the event to the document would be the fix needed here but still facing the issue when the app is first opened that not all the buttons work. Any other ideas would be a huge help.

Matthew Rodman
  • 1
  • did you try this $(document).ready(function(){ $('.inactivetab').on('click', function () { methods.setTab($(this).attr('id').replace('-ButtonId', '')); }); }) – Muhammad Usman Jan 29 '21 at 06:46
  • @MuhammadUsman unfortunately that did not work resulting in none of the buttons getting the click action as a result. – Matthew Rodman Jan 29 '21 at 06:56
  • I tried to delegate off of an element lower than document as well... "#header_tab" being the table where the buttons are created... however, this resulted in the same issue as with document... $(document).ready(function(){ $("#header_tab").on('click', ".inactivetab", function () { methods.setTab($(this).attr('id').replace('-ButtonId', '')); }); }) – Matthew Rodman Jan 29 '21 at 07:15
  • alright, can you send any code snipped ? which explain more – Muhammad Usman Jan 29 '21 at 07:20
  • @MuhammadUsman here is the jsfiddle. a lot going on but basically setexam is calling the database through an api to figure out what tabs/modules exist and adds it to the gvar object in the modules property. This is what the loop on 156 loops through to create the buttons and the respective pages. I also tried putting the event handled at the end of setExam as a last ditch effort but it behaved the same as in document ready. https://jsfiddle.net/mvrodman/b3t57fwL/9/ – Matthew Rodman Jan 29 '21 at 07:48
  • yes, actually the problem is which your are facing html take time to load and your script load first, so you just need to load view first and then script, so that script map on your tags.so you just have to load script after that check this useful link :https://stackoverflow.com/questions/19737031/loading-scripts-after-page-load – Muhammad Usman Jan 29 '21 at 08:04
  • like this , $.getScript("http://jact.atdmt.com/jaction/JavaScriptTest") – Muhammad Usman Jan 29 '21 at 08:05
  • I put it in like this (changing link to https due to mixed content error) and unfortunately still facing the same thing. I also tried added async to the script tags in the html and no luck either. $(document).ready(function(){ //check that html has finished loading $.getScript("https://jact.atdmt.com/jaction/JavaScriptTest"); $(document).on('click', '.inactivetab', function () { methods.setExam($(this).attr('id').replace('-ButtonId', '')); }); }) – Matthew Rodman Jan 29 '21 at 08:47
  • Have you tried putting simple console.log into both code snippets? I do believe that sometimes binding is done faster that buttons are added, and that is the case – Damian Dziaduch Feb 03 '21 at 11:09
  • @DamianDziaduch, does seem to be something along those lines. Adding a "wait 15" in the requirejs config helped a bit but not always. The console logs show that not all modules are getting defined but I thought requirejs was supposed to wait? My temp fix is a check "if (modules[module.id].loader == undefined)" and forcing a reload if it occurs – Matthew Rodman Feb 03 '21 at 17:41

0 Answers0