jQuery load(), Bootstrap modal, and PHP

Question

I'm trying to load data in a Bootstrap modal depending on an ID passed to the modal through javascript. My modal link is:

 echo "<a href=\\"#modal-edit\\" data-toggle=\\"modal\\" data-session-id=\\"".$mySessions->id."\\" title=\\"Edit Session\\"><i class=\\"fa fa-gear fa-2x text-primary\\"></i></a>&nbsp;\\n"; 

"sessionId" is a hidden field in the #modal-edit form that gets updated when an "Edit" button is clicked on one of the sessions listed in a table. My script that sends sessionId to the hidden form field and attempts to load the php file is:

 $('#modal-edit').on('show.bs.modal', function(e) { var sessionId = $(e.relatedTarget).data('session-id'); $(e.currentTarget).find('input[name="sessionId"]').val(sessionId); $('#sessionLoadData').load('modal-edit-load.php?sessionId='.$sessionId); }); 

I have

<div id="sessionLoadData"></div>

in my modal where I'd like to use modal-edit-load.php to lookup sessionId in a table of sessions, and return some html with the php variables echo'd in it at the same time the hidden field sessionId is updated. I'm very new to java however, and feel like something just isn't quite there after following the recommended solution here:

SO Jquery load() and PHP variables

modal-edit-load.php?sessionId=1 works when I go to the page - it loads the form objects with the variables associated with sessionId 1. However, it does not work in the modal. The form objects do not appear when I click edit and the modal appears.

Am I using the javascript correctly to update the hidden field as well as loading the php file content to the modal?

Answer 1

You're using the PHP $sessionId variable instead of the JavaScript sessionId variable that was pulled from the related element.

$('#modal-edit').on('show.bs.modal', function(e) {
    var sessionId = $(e.relatedTarget).data('session-id');
    $(e.currentTarget).find('input[name="sessionId"]').val(sessionId);
    $('#sessionLoadData').load('modal-edit-load.php?sessionId=' + sessionId);
});