Kevin Kevin - 4 months ago 12
Javascript Question

How can I tell if a specific button in a Bootstrap Modal has been clicked in my JQuery function?

Here's the situation: My function displays a modal that contains a table of all classes for a student. That modal has two buttons, a Cancel and Dismiss Student. If the user clicks the Dismiss Student button, I want my function to know and take the

attendeeClasses
data and act on it (basically, I'm just going to loop through each class and mark that student as dismissed).

I was thinking that I'd have to create an event handler for the click event on the button, but wouldn't I have to put that handler within this function? I mean, if the handler was outside of this function (the one that displays the modal), then the handler can't access the data (like the list of classes). I'm a little new to JQuery, so I don't know if there's a way to set a global variable so that both the event handler and the function that displays the modal can access it.

Here's my JQuery:

function GetAllClassessForAttendee(classAttendeeId, attendanceStatus, topicAttendanceId) {
var classesTable = $("#attendeeClasses tbody");

$.ajax({
url: "/Class/GetAllClassAttendanceForEmployee/",
type: "GET",
data: { classAttendeeId: classAttendeeId, topicAttendanceId: topicAttendanceId, attendanceStatus: attendanceStatus, __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() },
beforeSend: function (jqXHR, textStatus) {
$("#loadingImage").show();
},
complete: function (jqXHR, textStatus) {
$("#loadingImage").hide();
},
success: function (attendeeClasses) {
$.each(attendeeClasses, function(i, attendeeClass) {
classesTable.append(
'<tr><td>'
+ attendeeClass.Date
+ '</td><td>'
+ attendeeClass.EmployeeName
+ '</td><td>'
+ attendeeClass.Topic
+ '</td></tr>'
);
});

// Display a list of attended classes in Bootstrap modal
$("#classes").dataTable({
"bRetrieve": true,
"bPaginate": false,
"bFilter": false,
"aoColumnDefs":[
{"aTargets": [ "_all" ], "bSortable": false}
]
});

$("#dismissalModal").modal('show');

// If dismiss button is clicked
// handle the dismissal of student
// from each class
// TODO: Insert code here

},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.responseText !== "") {
alertify.alert(xhr.responseText);
alertify.error(xhr.responseText);
}
}
});
}


Here is the HTML for the modal that gets displayed:

<!-- Modal HTML -->
<div id="dismissalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to dismiss the student from these classes?</p>
<p class="text-warning"><small>Press Cancel to leave this dialog.</small></p>
<table id="attendeeClasses">
<thead><tr><th>Date</th><th>Attendee</th><th>Topic</th></tr></thead>
<tbody></tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="dismissBtn">Dismiss Student</button>
</div>
</div>
</div>
</div>


For reference: Here's a pic of the bootstrap modal that's displayed:
enter image description here

Answer

You don't need to put the event handler within the function. In fact you almost certainly shouldn't - it will re-create the handler every time you call the function, which is unnecessary. Your statement if the handler was outside of this function (the one that displays the modal), then the handler can't access the data (like the list of classes) is true, assuming you mean the JSON data in the attendeeClasses variable. You can remedy that by storing it in a global variable when it arrives.

Put the handler outside your function, but within the document.ready handler:

var attendeeClassesGlobal = []; //global to store attendees

$(document.ready(function() {
  $("#dismissBtn").click(function(event) {
    //do whatever you want with attendeeClassesGlobal here
  });
});

In your ajax "success" function, add one extra line to store the attendee list in the global variable:

success: function (attendeeClasses) {
  attendeeClassesGlobal = attendeeClasses;
  //...etc
}

One other thing:

$("#classes").dataTable({...

I can't see any element with id="classes" in your sample. Did you mean "#attendeeClasses"?

Comments