CODEWITHSUNDEEP
phpjqueryajax
Matt Morgan
Matt Morgan

Reputation: 1

error passing data from Ajax

I am new to ajax and am currently working on a project that requires passing some data from and ajax function to a php page in order to dynamically create and display modals. I am able to create the modal but I think my problem lies in not correctly passing the data to "test2.php". I have been struggling to get the right results (I get my error message) and was hoping someone could help. 

<body>
<?php echo $row['groupname'];
echo "<button class='btn btn-info btn-sm btn-circle' data-toggle='modal' data-target='#buttonModal' data-id='".$row['groupname']."' id='createButton'>+</button>";
echo "<div id='buttonModal' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true' style='dispaly: none;'>";
?>
<div class="modal-dialog">
  <!-- Modal content-->
  <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">Add a Top Button</h4>
     </div>
     <div class="modal-body">
       <div id"modal-loader" style="display: none; text-align: center;">
         <!-- ajax loader -->
         <img src="ajx-loader.gif">
       </div>

       <!-- msql data will be loaded here -->
       <div id="dynamic-content"></div>

     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-info" onClick="addRow('buttonTable')">Add Button</button>
       <button type="button" name="Submit" class="btn btn-info">Submit</button>
     </div>
   </div>
  </div>
 </div>
</body>

JQuery:

$(document).ready(function(){

  $(document).on('click', '#createButton', function(e){

   e.preventDefault();

   var uid = $(this).data('id'); // get id of clicked row

 $('#dynamic-content').html(''); // leave this div blank
 $('#modal-loader').show();      // load ajax loader on button click

 $.ajax({
      url: 'test2.php',
      type: 'POST',
      data: 'id=':+uid,
      dataType: 'html'
 })
 .done(function(data){
      console.log(data);
      $('#dynamic-content').html(''); // blank before load.
      $('#dynamic-content').html(data); // load here
      $('#modal-loader').hide(); // hide loader
 })
 .fail(function(){
      $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
      $('#modal-loader').hide();
  });

 });
});

Test2.php:

<?php

require_once 'connectToServer.php';
//define variables
$groupName = "";
$buttonLinks = array("");
$buttonNames = array("");
$length = 0;

if (isset($_POST['id'])) {

$gpName = $_POST['id'];
}
?>

<div class="row">
  <div class="col-sm-12">
    <div class="form-group" id="groupName">
      <label for="groupName">Group Name</label>
      <input type="text" disabled class="form-control" name="groupName" value="<?php echo $gpName;?>">
    </div>
    <hr>
  </div>
</div>

For clarification, the error message I receive is "Something went wrong, Please try again..." and specified in the .fail function of the ajax call. Also, correcting data: 'id='+uid to data: {id: uid} still results in the same error.

Upvotes: 0

Views: 56

Answers (2)

Tomasz W.
Tomasz W.

Reputation: 422

You can do it by changing data field like below.

$.ajax({
  url: 'test2.php',
  type: 'POST',
  data: {id: uid},
  dataType: 'html'
})

Upvotes: 0

Rotimi
Rotimi

Reputation: 4825

Remove the colon from the data key and properly encode the data itself 

data: {id: uid}//properly encode the data to be passed to php script

Upvotes: 2

Related Questions