jQuery Klick-Funktion nur Aktivierung des ersten Elements

Question

Ich baue ein System zur Verwaltung von Tickets. Jedes Ticket verfügt über eine Schaltfläche "Start", "Pause", "Abschließen" und "Bearbeiten". Die Schaltflächen werden mithilfe von PHP generiert, das die Tickets aus einer Datenbank zieht und den Code für jedes Ticket durchläuft. Hier ist die 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>'; 
     } 

Für jedes Ticket sie eine eindeutige ID, die aus der Datenbank generiert wird. Jede Schaltfläche hat den Wert der eindeutigen ID für dieses Ticket. Wenn Sie auf eine der Schaltflächen (Start, Pause usw.) klicken, übernimmt jQuery die Aktualisierung der Datenbank. Es nimmt den Wert der Schaltfläche und übergibt es an das Übermittlungsformular, das dann die Abfrage ausführt, um die Datenbank zu aktualisieren.

Das Problem, das ich habe, ist, wenn mehrere Tickets in einer Liste mit dem gleichen Status (Open oder Paused) sind und Sie auf einen Start/Pause-Button für eines der Tickets unter dem ersten, es entlang der ID des ersten Tickets und nicht des angeklickten Tickets

Hier ist meine jQuery für Start- und 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; 

Außerdem werden Sie einige Code in dort für einen slideToggle sehen. Das ist zum Ausblenden und Anzeigen der Schaltflächen, wenn Sie auf ein Ticket klicken.

Answer 1

Sie haben mehrere Code-Instanzen, die anstelle der angeklickten Schaltfläche den Wert der ersten Schaltfläche auswählen.

ändern

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

Um

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

Answer 2

Erstens können Sie Ihre Bedingungen möglicherweise nicht richtig einrichten:

$print->status == 'Open' or 'Begin' wird immer true zurück - Sie sind richtig, wenn $print->status == 'Open' Auswertung, aber Wenn das fehlschlägt, führt das Schlüsselwort or keine Verknüpfung zum Testen derselben Variablen aus. Sie können für

if ($print->status == 'Open' or $print->status == 'Begin')

Was die jQuery suchen, es sieht aus wie Sie die ticket_id von

var ticket_id = $(".StartButton").val();

und

Grabbing sind

var ticket_id = $(".PauseButton").val();

Try Einstellung beides zu

var ticket_id = $(this).val();

und sehen, ob das das Problem behebt.

Answer 3

Ich weiß, don `t, wenn dies kann aber von

$(".myTickets").click(function() { 
    var ticket_id = $(this).attr('id'); 
}); 

um so etwas wie dies ändern helfen:

$("*.myTickets").click(function() { 
    var ticket_id = $(this).attr('id'); 
}); 

VERGISST das Sternchen