Question

I have a HTML table and I get data for each cell from database.Some cells have an edit icon, so when the user clicks on it, he will see a pop up dialog. In this dialog there is a drop down menu with 3 options.And after the user selects one of them and clicks on save button, the database should get updated.

The following is part of my code in the tracking.php file.

"com.domain.differentappname.watchkitapp"

}

so I want to add a save button to this diaolg, and call a function like

                    <td>
                       <?php
                      $var=$arrayD['Structural Data Loaded']; 
                      echo
                      '<a data-id="$id" class="StructuralDataLoaded">' . $var . ' <img class="img" onclick="javascript:SelectStatus();" src="images/edit.png"></a>';
                      ?>
                   </td>




        /* Selecting new status DIV */
           <div id="SelectingStatus" title="Select Status" style="display:none;">
       <h>
            Select the status
       </h>

       <select>
             <option value="Not Started">Not Started</option>
             <option value="In Progress">In Progress</option>
             <option value="Completed">Completed</option>
       </select>

    </div>


    <script>

function SelectStatus(id) {


    var SelectingStatus = $('#SelectingStatus');
    SelectingStatus.dialog({
        close: function(event, ui) {

        },
        modal: true,
        title: 'Select Status',
        width: 600,
        height: 'auto',
        overlay: {
            backgroundColor: '#000000',
            opacity: 0.5
        },

    });

and then update the database. So you can see in above function,I need 2 values. The $id to know which row of the table should get updated and the value, which is the status that user has selected. ( Before using jQuery Dialog I was using prompt(), and the above function works fine).So first before adding the Save button, I want to send the $id to SelecStatus function when the user clicks on the edit icon . So I changed my code as below.(The parts that are in ** **, are the new parts).

    function PostStructuralDataLoadedData(id,data){
    var request = $.ajax({
    url: "InsertData.php",
    type: "POST",
    data: { 
    id : id,
    data : data,
    type : "StructuralDataLoladed"
    },
    dataType: "html"
    });
    request.done(function( ) {
    location.reload();
    });
    request.fail(function( jqXHR, textStatus ) {
    alert( "Request failed: " + textStatus );
    });
}

and

                <td>
                       <?php
                      $var=$arrayD['Structural Data Loaded']; 
                      echo
                      '<a data-id="$id" class="StructuralDataLoaded">' . $var . ' <img **id="$id"** class="img" onclick="javascript:SelectStatus(**$id**);" src="images/edit.png"></a>';
                      ?>
                   </td>

}

So when calling SelectStatus function, should I write :

<script>

function SelectStatus(**id**) {


    var SelectingStatus = $('#SelectingStatus');
    SelectingStatus.dialog({
        close: function(event, ui) {

        },
        modal: true,
        title: 'Select Status',
        width: 600,
        height: 'auto',
        overlay: {
            backgroundColor: '#000000',
            opacity: 0.5
        },

    });

or

   onclick="javascript:SelectStatus($id);"

and how can I test to make sure that the SelectStatus function has revived the right value?

Answer 1

所以这就是答案：

                  <td>
                       <?php
                      $var=$arrayD['Structural Data Loaded']; 
                      echo
                      "<a data-id='$id' class='StructuralDataLoaded'>" . $var . "<img  id='$id' class='img' onclick='javascript:SelectStatus(id);' src='images/edit.png'></a>";
                      ?>
                   </td>

Send a value of id attribute of an image to a function when clicking on the image

1 个答案: