使用jquery ajax将php变量传递给模式

Question

I am having a problem with my jquery ajax script. I can not get it to pass the variable to the modal. I have been messing with this all weekend and can not figure out way it does not pass the variable.

This is the link to call the modal and the id I am trying to pass

echo '<img src="./images/see.png" class="open-editexpenses" data-target="#editexpenses" data-id="' . $value['expid'] . '" >';

This is the jquery ajax script

$(document).on('click', '.open-editexpenses', function() {
                var id = $(this).data('id');
                $.ajax({
                    type: "POST",
                    url: "expenses.php",
                    data: {id: id},
                    success: function() {
                        $('#editexpenses').modal('show');
                    }
                });
            });

This is the modal I am opening

<div class="modal fade" id="editexpenses" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

      <?php

        echo $id;
         var_dump($_POST);
         //var_dump($_GET); 
                 ?>  



      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

$(x).data('id') is not the same as $(x).attr('data-id') , which is probably what you're after to read the data-id attribute of your img element.

See jQuery Data vs Attr? for more info.

Answer 2

I'm going to assume the 'modal' is expenses.php and also that you're using a jQuery plugin for $('#editexpenses').modal('show'); to mean anything.

From what I can see you haven't actually added the response from expenses.php into the DOM. You can do this by altering the success function in your AJAX call:

success: function(html) {
    $('body').append(html);
    $('#editexpenses').modal('show');
}

Here I've just added the HTML returned to the end of the page, but jQuery has plenty of other ways you can insert into the DOM: https://api.jquery.com/category/manipulation/

---

As an aside, be careful about assuming that the $id variable in expenses.php exists. This works when PHP's register_globals setting is on, but this is considered extremely bad practice and was deprecated in PHP 5.3.0 and actually removed in 5.4.0. Just use $_POST['id'] instead.