Ich habe eine Tabelle von Studenten und in jeder Zeile sind ihre Namen, eine Auswahlliste, um ihre Anwesenheit für ihre Lektion auszuwählen und dann ein "Nachricht" -Link, wenn geklickt wird, erscheint ein Dialog, um eine Nachricht an den Schüler zu senden.Wie verbinde ich den Dialog neu, nachdem er von AJAX neu geschrieben wurde?
Die Tabelle wird dynamisch von einer Auswahlliste von Kursen gesteuert. Zum Beispiel wählt ein Lehrer einen Kurs aus und dann wird der Tisch mit allen Schülern innerhalb dieses Kurses neu besetzt. Dies geschieht über AJAX. Der Tabellenkörper wird grundsätzlich jedes Mal geschrieben, wenn ein Kurs ausgewählt wird. Mein Problem ist das, wenn ein neuer Kurs ausgewählt wird, wird das div für den Dialog in der Zelle der Nachrichtenverbindung sichtbar. Ich vermute, dass das Problem mit AJAX zu tun hat und nicht in der Lage ist, das Link- und Klick-Event erneut zu binden. Wie überwinde ich das also?
Dies ist meine Tabelle in PHP erstellt (http://pastebin.com/CTD3WfL6):
public function createTable($cid)
{
$userModel = new Users();
$attendanceModel = new Attendance();
$students = $userModel->getStudents($cid);
$table2 = '<table id="tutorTable">';
$tableHeaders =
'<thead>
<th>Student Name</th>
<th>Attendance</th>
<th>Message</th>
<th>Mobile</th>
<th>Parent Name</th>
<th>Message</th>
</thead>
<tbody>';
$table2 .= $tableHeaders;
foreach($students as $student)
{
$table2 .=
'<tr><td id="studentName">'.$student['firstname'].' '.$student['lastname'].'</td>
<td>
<select class="attendSelect" id="studentSelect"'.$student['id'].'>
<option value="Attended">Attended</option>
<option value="Absent">Did not Attend</option>
<option value="Excused Absent">Excused</option>
<option value="Late">Excused</option>
<option value="Excused Late">Did not Attend</option>
</select>
</td>
<td>
<a href="#MessageStudent" class="popUpLink">Message</a>
<div class="popUpDialog" id="'.$student['id'].'" title="Message '.$student['firstname'].' '.$student['lastname'].'">
<form id="studentForm" action="" method="POST">
<fieldset>
<input type="hidden" value="message_send" name="action"/>
<input type="hidden" value="'.$student['id'].'" name="studentId"/>
<textarea rows="3" cols=35" name="message"></textarea>
<input type="submit" value="Send Message"/>
</fieldset>
</form>
</div>
</td>
<td>'.$student['phone1'].'</td>
<td>Parent name goes here</td>
<td>
<a href="mailto:[email protected]" id="parentEmail">Message</a>
</td>
</tr>';
}
$table2 .= '</tbody></table>';
return $table2;
}
Dies ist die jQuery den Dialog und die Tabelle zu handhaben:
/** Dialog Handler **/
$('.popUpLink').each(function()
{
$divDialog = $(this).next('.popUpDialog');
$.data(this, 'dialog', $divDialog.dialog(
{
autoOpen: false,
modal: true,
title: $divDialog.attr('title')
}));
}).on('click',function()
{
$.data(this, 'dialog').dialog('open');
return false;
});
/**AJAX to handle table **/
$('#courseSelect').on('change', function()
{
var cid = $('#courseSelect').val();
$.getJSON('?ajax=true&cid=' + cid, function(data)
{
var lessonSelect = "";
var count = 1;
/** populate select list of lessons **/
for(var i in data.lessons)
{
lessonSelect += '<option id="' + count + '" value="' + data.lessons[i].id+ '">' + data.lessons[i].name + '</option>'
count++;
};
var lessonDialog = '<p>' + data.lessons[0].name + '</p>';
var launchLessonDiv = '<a href=" ' + data.launchLesson.reference + ' ">Launch Lesson</a>';
var courseDialog = '<p>' + data.course.fullname + '</p>';
$('#lessonSelect').html(lessonSelect);
$('#lessonDialog').html(lessonDialog);//insert lesson information into lesson dialog
$('#launchLessonDiv').html(launchLessonDiv);//insert link to launch lesson
$('#courseDialog').html(courseDialog);
/**Repopulate table **/
//var lessonCount = 1;
//var table = createTutorTable(data, cid, lessonCount);
//$('table#tutorTable>tbody').html(table);
$('form#tutorTableForm').html(data.table);
});//getJSON
});//Course select
Alles funktioniert gut, bis ein neuer Kurs ausgewählt und das Textfeld innerhalb der Zelle sichtbar wird. Ich habe erst letzten Monat mit jQuery angefangen, also ertrage mich!
Der Grund, warum die Dialog-divs nach dem Ajax-Aufruf sichtbar sind, liegt daran, dass Sie sie nicht explizit ausgeblendet haben. Der Dialoginitialisierungscode lief nur einmal, wenn die Seite zum ersten Mal geladen wurde, und das machte die ursprünglichen divs verborgen. dieser Code läuft nach jedem Ajax-Aufruf nicht wieder – gary