Mason Mason - 7 months ago 19
Javascript Question

jQuery click function only activating first element

I am building a system to manage tickets. Each ticket has a 'Start', 'Pause', 'Complete', and 'Edit' button. The buttons are generated by using PHP which pulls the tickets from a database and loops through the code for each ticket. Here is the PHP/HTML:

foreach ($ticket as $print) {
echo '<div id="ticketDiv">';
echo '<tr class="myTickets" id="' . $print->id . '" >';
echo '<td id="myTickets_business_name_column">' . $print->business_name . '</td>';
echo '<td id="myTickets_subject_column">' . $print->subject . '</td>';
echo '<td id="myTickets_status_column">';
if ($print->status == 'Begin'){
echo 'Open';
}
else {
echo $print->status;
}
echo '</td>';
echo '</tr>';
echo '<tr id="ticketButtons' . $print->id . '" class="ticketButtonsRow" style="display:none;">';
echo '<td></td>';
echo '<td>';
echo '<div class="ticketButtons">';
if ($print->status == 'Paused')
{
echo '<button value="' . $print->id . '" class="StartButton">Start</button>';
}
elseif ($print->status == 'Open' or 'Begin')
{
echo '<button value="' . $print->id . '" class="PauseButton">Pause</button>';
}
echo '<button value="' . $print->id . '" class="CompleteButton">Complete</button>';
echo '<a href="' . site_url( 'edit-ticket' ) . '?id=' . $print->id . '"><button id="editButton" value="' . $print->id . '" class="EditButton">Edit</button></a>';
echo '</div>';
echo '</td>';
echo '<td></td>';
echo '</tr>';
}


For each ticket they have a unique ID that is generated from the database. Each button has the value of the unique ID for that ticket. When you click any of the buttons (Start, Pause, etc) the jQuery then takes over to update the database. It takes the value of the button and passes it along to the submit form that then runs the query to update the database.

The problem I'm having is when there are multiple tickets in a list with the same status (Open or Paused) and you click a Start/Pause button for any of the tickets below the first one, it passed along the ID of the first ticket and not the one you clicked.

Here is my jQuery for Start and Pause:

/*
** Ticket updating buttons
*/
$(document).ready(function($){
/* Toggles ticket buttons for each ticket */
$(".myTickets").click(function() {
var ticket_id = $(this).attr('id');
$('.ticketButtonsRow').hide();
$(this).next('#ticketButtons' + ticket_id).slideToggle(100);
});

/* When the start button is clicked - the following below is executed */
$(".StartButton").click(function(e) {

/* Pulls ticket ID from button clicked */
var ticket_id = $(".StartButton").val();

/* Hides the ticket buttons on click */
$('#ticketButtons' + ticket_id).hide(100);

/* Places data into an array */
var dataString = 'start=' + ticket_id;

/* Enables data logging in the console */
console.log(dataString);

/* Where the magic happens */
$.ajax({
type: "POST",
url: 'submit-data',
data: dataString,
cache: false,
success: function(data)
{
/* Reloads the page after success */
location.reload();

}
});
});

/* When the pause button is clicked - the following below is executed */
$(".PauseButton").on('click', function(e) {
console.log($(this).text());
var ticket_id = $(".PauseButton").val();

/* Hides the ticket buttons on click */
$('#ticketButtons' + ticket_id).hide(100);

/* Shows the note form */
$("#addNoteFormDiv").show(200);

/* When cancel button is clicked close notes and cancel pause action */
$("#notesCancelButton").click(function() {
$("#addNoteFormDiv").hide(200);
});

/* After notes has been added and submit button clicked */
$("#notesDoneButton").click(function(e) {

$("#addNoteFormDiv").hide(200);

var notes = $("#addNotes").val();
var employee_id = $("#notes_employee_id").val();

/* Places data into an array */
var dataString = 'pause=' + ticket_id + '&notes=' + notes + '&employee_id=' + employee_id;

/* Enables data logging in the console */
console.log(dataString);

/* Where the magic happens */
$.ajax({
type: "POST",
url: 'submit-data',
data: dataString,
cache: false,
success: function(data)
{
/* Reloads the page after success */
document.getElementById("addNoteForm").reset();
//location.reload();
}
});

/* Prents the execuation of the actual submit of the form */
e.preventDefault();
});
});
return false;


Also, you will see some code in there for a slideToggle. That is for hiding and showing the buttons when you click on a ticket.

Answer

You have several instances of code that is selecting the value of the first button instead of the clicked button.

Change

/* Pulls ticket ID from button clicked */
var ticket_id = $(".StartButton").val();

To

/* Pulls ticket ID from button clicked */
var ticket_id = $(this).val();
Comments