Hi all, hope we are doing well! I am currently helping debug some strange behavior with some javascript that is being used in an HTML snippet. Another developer and myself are working on this, we have the same css files, same javascript code being used in the snippet, and same changes in the mendix ide but are getting different results. We have two dashboards that show open and closed records respectively, both have search their own search bars named openedSeach and closedSearch, and a checkbox that toggles the visibility of either dashboard. The purpose of the javascript is to listen for a change event on the checkbox and assign the value of a search string that are typed into a search bar from the open search bar to the closed and then back again. On one machine, the expected behavior is happening on the another it is not displaying the value that is assigned on screen. But we can console.log the value and see it in the console. We have a timeout funciton that has a value of 500 so we do wait for the page to load. It’s been a head scratcher so I was wondering if anyone has any idea on how this could happen. The following is the code being used… setTimeout(function() { var openDashboard = document.getElementsByClassName("openDashboardVisibility")[0]; var closedDashboard = document.getElementsByClassName("closedDashboardVisibility")[0]; var openSearchbar = document.getElementsByClassName("form-control filter-input")[0]; var closedSearchbar = document.getElementsByClassName("form-control filter-input")[1]; var ClosedCheckbox = document.getElementsByClassName("chk_Closed")[0].querySelector("[type=checkbox]"); var userInput = ""; openDashboard.style.display = "visible"; closedDashboard.style.visibility = "hidden"; closedDashboard.style.position = "absolute"; function updateCloseSearchValue() { closedSearchbar.value = userInput; openSearchbar.value = ""; } function updateOpenSearchValue() { openSearchbar.value = userInput; closedSearchbar.value = ""; } ClosedCheckbox.addEventListener("change", function() { if (ClosedCheckbox.checked) { openDashboard.style.visibility = "hidden"; openDashboard.style.position = "absolute"; closedDashboard.style.position = "relative"; closedDashboard.style.visibility = "visible"; updateCloseSearchValue(); } else { updateOpenSearchValue(); closedDashboard.style.visibility = "hidden"; openDashboard.style.position = "relative"; closedDashboard.style.position = "absolute"; openDashboard.style.visibility = "visible"; } }); openSearchbar.addEventListener("input", function(event) { userInput = event.target.value; //document.getElementsByName("closedSearch_Temp").value = userInput; }); closedSearchbar.addEventListener("input", function(event) { userInput = event.target.value; }); }, 500);
asked
Colton Beck
1 answers
0
Would it be easier to assign event handlers on the checkboxes in Mendix itself, avoiding the need for JavaScript? You could even have visibility conditions on the dashboards themselves to handle the showing and hiding of that content. It feels like you are trying to recreate existing functionality.