Mustafa Mustafa - 1 month ago 8
PHP Question

AJAX Won't Toggle Table on Odd Occurrences

Good afternoon everyone!

So I have a basic Web Application. There are three dropdown menus and each dropdown menu appears after the previous dropdown has been selected. Once the third dropdown is chosen, we display to the user the TransferGuide (display_guide.php).

display_guide.php is outputted via an AJAX request on transfer.php

Here is what the page looks like

When a user click on the table header it expands to display courses under the category... that looks like this:

enter image description here

Everything is fine and works perfect. Only problem is, when I go to my dropdown menus to change to a different combination of dropdown menus, my table no longer toggles. It changes to display the right information, but it refuses to toggle. And the weird thing is that this ONLY happens on odd instances. The table will toggle ONLY the 1st, 3rd, 5th time I change the combinations and not the 2nd, 4th and so forth.

Does anyone have any idea what could be the reason for this odd behavior?

Here is my code and thanks in advance! This is only the portion of the entire HTML/PHP code that is responsible of displaying the display_guide.php on to the page. :)

transfer.php:

<!--
**************************
AJAX FOR DROP DOWN MENUS
**************************
-->

<script>
// 1. Create an XMLHTTPRequest Object (XHR)
// 2. onreadystatechange is a property of the XHR Object, where we can store
// our function to execute once we send our XHR object, this is an
// event handler.
// 3. Check if readyState (values 0 thru 4) and status (values 200 or 404)
// in which case response is ready, in responseText, so we can assign to
// inner part of HTML element with ID of uni or major or transfer_guide
// 4. Open request with specified properties, with ?cc= as GET
// 5. Send the request using the open() property

function loadUniDropDown(str) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("uni").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "uni.php?cc="+str, true);
xhttp.send();
}

function loadMajorDropDown(str2) {
var xhttp2 = new XMLHttpRequest();
xhttp2.onreadystatechange = function() {
if (xhttp2.readyState == 4 && xhttp2.status == 200) {
document.getElementById("major").innerHTML = xhttp2.responseText;

}
};
xhttp2.open("GET", "major.php?uni="+str2, true);
xhttp2.send();
}

function loadTransferGuide(str3) {
var xhttp3 = new XMLHttpRequest();
xhttp3.onreadystatechange = function() {
if (xhttp3.readyState == 4 && xhttp3.status == 200) {
document.getElementById("transfer_guide").innerHTML = xhttp3.responseText;

// HIDES THE ALL THE GENED COURSES AND NOT THE GENED CATEGORIES BY DEFAULT ON PAGE LOAD
$(document).ready(function(){
//$("thead").next().hide();
$(".genEdCategoryHeaders").nextUntil(".genEdCategoryHeaders").hide(); //hides everything so only the categories show
$(".CourseName").hide(); //hides all the course names

}
);

// ON HOVER OVER GENED COURSES DISPLAY COURSE NAME INSTEAD OF NUMBER
$(".hoverOnCourses").mouseover(
function(){
$(this).children(".CourseNumber").hide();
$(this).children(".CourseName").show();
$(this).children(".CourseName").css("background-color","gray"); //gives hover effect by changing the background color
$(this).children(".CourseName").children().css("color", "white");
}
);
$(".hoverOnCourses").mouseout(
function(){
$(this).children(".CourseName").hide();
$(this).children(".CourseNumber").show();
}
);


// $("body").on("mouseover", ".CourseNumber", function(){
// $(this).hide();
// $(this).next().show();
// $(this).next().css("background-color","gray");
// $(this).next().children().css("color", "white");
// }).on("mouseout", ".CourseName", function(){
// $(this).hide();
// $(this).prev().show();
// })
//--------------TOGGLE THE GENED COURSES----------------
$(document).on("click", "thead", function(){
//$(this).next(".genedcat").toggle();
$(this).nextUntil("thead").toggle();
}
);

}
}
xhttp3.open("GET", "display_guide.php?major="+str3, true);
xhttp3.send();
}


</script>

Answer

If you have posted some basic html regarding the structure it would hae been easier but still from what you have posted i could figure out one reson

In your loadTransferGuide() function see all the stuff after document.getElementById("transfer_guide").innerHTML = xhttp3.responseText;

you are assigning all the event handers fro mouseover and click events inside it which may look okay since you would want to assign events to the content loaded dynamically but i think this is what is causing the trouble you see when the transfer guide html gets inserted and you assign events it will work the first time but if they get replaced/removed again the event handler too get destroyed so it will work alternate times but not always to fix that just remove the code to fix that use event delegation on them

  $("body").on("mouseover",".hoverOnCourses",
           function(){
            $(this).children(".CourseNumber").hide();
            $(this).children(".CourseName").show();
            $(this).children(".CourseName").css("background-color","gray");   //gives hover effect by changing the background color
            $(this).children(".CourseName").children().css("color", "white");
   });

  $("body").on("mouseout",".hoverOnCourses",
           function(){
             $(this).children(".CourseName").hide();
             $(this).children(".CourseNumber").show();
           }
  ); 

and cut below code code aand paste it outside of that function in global scope

        //--------------TOGGLE THE GENED COURSES----------------
        $(document).on("click", "thead", function(){
            //$(this).next(".genedcat").toggle();
            $(this).nextUntil("thead").toggle();
            }
        );
Comments