Question

我正在建立一个管理门票的系统。每张故障单都有一个“开始”，“暂停”，“完成”和“编辑”。按钮。这些按钮是使用PHP生成的，它从数据库中提取票证并循环遍历每张票证的代码。这是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>';
        }

对于每张故障单，他们都拥有从数据库生成的唯一ID。每个按钮都具有该票证的唯一ID值。当您单击任何按钮（开始，暂停等）时，jQuery将接管更新数据库。它接受按钮的值并将其传递给提交表单，然后运行查询以更新数据库。

我遇到的问题是当列表中有多个票证具有相同的状态（打开或暂停）并且您点击第一个票据下面的任何票证的“开始/暂停”按钮时，它会传递第一张票证的ID，而不是您点击的票证。

这是我的jQuery for Start和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;

此外，您将在其中看到一些用于slideToggle的代码。这是用于在单击故障单时隐藏和显示按钮。

Answer 1

您有多个代码实例正在选择第一个按钮的值而不是单击的按钮。

更改

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

要

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

Answer 2

首先，您可能错误地设置了条件：

$print->status == 'Open' or 'Begin'将始终返回true - 您正在评估$print->status == 'Open'是否正确，但如果失败，则or关键字不会快速测试相同的变量。您可能正在寻找

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

至于jQuery，看起来你正在抓住ticket_id

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

和

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

尝试将这两个设置为

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

并查看是否可以解决问题。

Answer 3

我不知道这是否有所帮助，但改变了

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

这样的事情：

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

不要忘记输入ASTERISK

jQuery点击功能只激活第一个元素

3 个答案: