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">×</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.
