将PHP函数中的值分配给jquery

Question

I have 3 pages as follow: Tasks.php (shows the data) getting data from tasks-functions.php (runs the code) and (tasks.js) that runs scripts. In tasks.js - I have a click function as follows:

  $(document).on("click", "#mybtn", function () {
    var val1 = $('#taskid').val();
    alert($(val1).val());
    $('#EditTaskModal').modal('show');
  $(".table table-striped table-advance table-hover #test").html(val1);
    });

(#taskid) is in the tasks-functions.php which is an echo that shows data into a table by id on tasks.php/

The tasks.js cannot get the values to assign to val1.

Tasks-Functions:

function loadUserTasks(){
    $myTasksUser = $_SESSION['username'];
    $myTasks = mysql_query("SELECT * FROM tasks WHERE taskowner = '$myTasksUser' && taskstatus = 'Active'");
        while ($rows = mysql_fetch_array($myTasks)){
            $this->taskID = $rows['taskid'];
            $this->taskTitle = $rows['tasktitle'];
                $this->taskDetail = $rows['taskdetail'];
                $this->taskType = $rows['tasktype'];
                $this->taskResource = $rows['taskresource'];
                $this->taskStatus = $rows['taskstatus'];

                //Change icon color and value for task status
                if ($this->taskStatus == 'completed') {
                    $this->taskStatus = '<span class="label label-info label-mini">Completed</span>';
                }
                else{
                    $this->taskStatus = '<span class="label label-warning label-mini">Open</span>';
                }

                echo "  
                                      <tr>                          
                                  <td><a href=\"#\" id=\"taskid\" data-toggle=\"modal\">$this->taskTitle </a></td>
                                  <td>$this->taskDetail</td>
                                  <td>$this->taskResource</td>
                                  <td>$this->taskStatus</td>
                                  <td><button id=\"mybtn\">Edit</button></td>
                                  <td>
                                      <div>
                                        <form id=\"completetaskform\"  method=\"post\" >
                                            <input type=\"hidden\" name=\"taskid\" value=\"$this->taskID\" />
                                             <input type=\"hidden\" name=\"acct\" value=\"$this->taskResource\" />
                                             <div class=\"pull-right chat-features\">
                                          <button class=\"btn btn-success btn-xs\" id=\"completeTask\"><i class=\"icon-ok\"></i></button>
                                         </form> 
                                        </div>           
                                      <button class=\"btn btn-primary btn-xs\"><i class=\"icon-pencil\"></i></button>
                                      <button class=\"btn btn-danger btn-xs\"><i class=\"icon-trash \"></i></button>
                                  </td>
                              </tr>";

                          } 
   }

tasks.php:

                  <table class="table table-striped table-advance table-hover" id="tasksTable">
                      <thead>
                      <tr>
                          <th><i class="icon-bullhorn"></i> Title</th>
                          <th class="hidden-phone"><i class="icon-question-sign"></i> Descrition</th>
                          <th><i class="icon-bookmark"></i> Related To</th>
                          <th><i class=" icon-edit"></i> Status</th>
                          <th><i class=" icon-edit"></i> Action</th>
                      </tr>
                      </thead>
                      <?php $var = new task; $var->loadUserTasks(); ?>
                      <tbody>
                      <!-- get data from tasks_functions.php -->
                      </tbody>
                  </table>

I hope i am explaning enough, i am not sure if this is possible since there are 3 pages involved.

Answer 1

If you want to pass that variable along to your Javascript, you can do the following:

<table class="table table-striped table-advance table-hover" id="tasksTable">
    <thead>
    <tr>
        <th><i class="icon-bullhorn"></i> Title</th>
        <th class="hidden-phone"><i class="icon-question-sign"></i> Descrition</th>
        <th><i class="icon-bookmark"></i> Related To</th>
        <th><i class=" icon-edit"></i> Status</th>
        <th><i class=" icon-edit"></i> Action</th>
    </tr>
    </thead>
    <?php $var = new task; $var->loadUserTasks(); ?>
    <tbody>
    <!-- get data from tasks_functions.php -->
    </tbody>
</table>
<script>
  // Declare a global variable to be used by your JavaScript
  var taskId = <?php echo $var->taskID; ?>;
 </script>

Then, in your JavaScript, you can just do this:

$(document).on("click", "#mybtn", function () {
    // Use your global taskId variable as an #id query
    var val1 = $('#' + taskId).val();
    alert($(val1).val());
    $('#EditTaskModal').modal('show');
    $(".table table-striped table-advance table-hover #test").html(val1);
});

Rather than passing variables from your PHP into your javascript, you can just query you table using jQuery and getting the appropriate value:

$(document).on("click", "#mybtn", function () { 
    // Query the DOM for our table
    var $table = $(".table.table-striped.table-advance.table-hover");
    // Find the first input:hidden in the DOM (it would be better to add a class
    // or an ID that input and query it using that
    var val1 = $table.find('form input:hidden').first().val();
    alert($(val1).val());
    $('#EditTaskModal').modal('show');
    // Find something with the test id in our table
    $table.find("#test").html(val1); // This #test doesn't seem to exist
});

Answer 2

As you have a while loop and is printing more than one anchor, you have to add a class to your anchors and bind the click event on this class. The event handler can access the element by 'this'.

I'm gonna add a class called '.taskAnchor'. Your code could be like this:

$(document).on("click", ".taskAnchor", function () {
    var val1 = $(this).text();
    //... your handler code here
});

Your php echo have to print the anchor with the class:

<td><a href=\"#\" class=\"taskAnchor\" data-toggle=\"modal\">$this->taskTitle </a></td>