使用jQuery访问更新的php $ _SESSION变量

Question

I have a drop-down menu that uses an onChange event to trigger a mysqli query. The query populates an array with the returned results, which in turn is assigned to a $_SESSION variable.

I am trying to use the array stored in the $_SESSION variable to populate a select box whenever the value in the drop-down menu changes.

This is the relevant JavaScript code:

xmlhttp.open("POST", "getStudentList.php?q="+yearGroup, true); 
xmlhttp.send();


var newStudentList =<?php echo json_encode($_SESSION['studentList']) ?>; 

    // clear select box 
    $('#studentList').empty();          

    // populate select box with JS array items
    $.each(newStudentList, function(key, value) {   
         $('#studentList')
              .append($('<option>', { value : key })
              .text(value));
    });                     

    $('#studentList').selectmenu("refresh",true);

$_SESSION['studentList'] is being updated correctly in 'getStudentList.php', but the updates are not being reflected in the call within the Javascript until the page is reloaded... how can I make the updates happen automatically?

I have checked past posts but haven't found anything that really helps or that I understand! I would be grateful for any assistance - I am a complete novice in using Javascript / Jquery and have cobbled bits of php together from here and there, so please go easy on me. (yes, I am using session_start()!)

Thank you in advance!

Answer 1

You can do something like this,

$("#studentList").on('change',function() {
    $.ajax({
        url: "getStudentList.php",
        dataType: "json",
        success: function(newStudentList) {

           // clear select box 
           $('#studentList').empty();          

           // populate select box with JS array items
           $.each(newStudentList, function(key, value) {   
               $('#studentList').append($('<option>', { value : key }).text(value));
           });

           $('#studentList').selectmenu("refresh",true);

        }
    });
});