0

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 -->
Richard Kurth
  • 77
  • 4
  • 11

2 Answers2

0

$(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.

Community
  • 1
  • 1
tomturton
  • 1,278
  • 2
  • 13
  • 17
0

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.

tomturton
  • 1,278
  • 2
  • 13
  • 17
  • where you "assume the 'modal' is expenses.php and also that you're using a jQuery plugin" The modal is html on the expenses.php and I am using Bootstrap 3 for my modal plugin. When I add the code to the jquery script and click on the link it adds what is on the screen every time I click so three clicks and I have the same info on the screen three times but it does not open the modal. Is it better to put the modal on its on PHP page. And will that make my jquery work. On the last thing you said I am using $_POST['id'] to receive the id in the modal. – Richard Kurth Mar 25 '14 at 18:32
  • Yes, you're more likely to want to replace the contents of an element with your modal, than append it to an element. Or at least check it doesn't already exist before appending. As to why the modal does not open; I expect this is a Bootstrap issue, not an AJAX one. – tomturton Mar 25 '14 at 21:34