I am newbie to web programming. I would like to insert data into MySQL DB, for that I am using PHP and this data is coming from a form in a Bootstrap Modal. When I click the Savebutton, nothing is happening. I been following a this tutorial and I have done exactly that tutor is doing. What went wrong with my code?
HTML Code and JavaScript:
<body>
<p><br/></p>
<div class="container">
<p></p>
<button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert data</button>
<!-- Modal -->
<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="addlLabel">Insert Data</h4>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="nm">Name</label>
<input type="text" class="form-control" id="nm" placeholder="Name here">
</div>
<div class="form-group">
<label for="em">Email</label>
<input type="email" class="form-control" id="em" placeholder="Email">
</div>
<div class="form-group">
<label for="hp">Hone Number</label>
<input type="number" class="form-control" id="hp" placeholder="Your Phone">
</div>
<div class="form-group">
<label for="al">Address</label>
<textarea class="form-control" id="al" placeholder="Your address"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="saveData()"class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
function saveData(){
var name=$('#nm').val();
var email=$('#em').val();
var phone=$('#hp').val();
var address=$('#al').val();
$.aja({
type:"post",
url:"server.php?p=add",
data:"nm="+name+"&em="+email+"&hp="+phone+"&al="+address,
success: function(msg){
alert('Success Insert data');
}
});
}
</script>
PHP Code:
<?php
$db=new PDO('mysql:host=localhost;dbname=ajax','root','');
$page=isset($_GET['p'])?$_GET['p']:'';
if($page=='add'){
$name=$_POST['nm'];
$email=$_POST['em'];
$phone=$_POST['hp'];
$address=$_POST['al'];
$stmt=$db->prepare("insert into users values('',?,?,?,?)");
$stmt->bindParam(1,$name);
$stmt->bindParam(2,$email);
$stmt->bindParam(3,$phone);
$stmt->bindParam(4,$address);
if ($stmt->execute()) {
echo "Success";
}else{
echo "Fail".mysqli_error();
}
}else if($page=='edit'){
}if($page=='del'){
}else{
}
?>
I have used the development in Chrome, no error is being shown.
Typo error.You have $.ajx({}).It must be $.ajax({}).Also send your data in object format.like this..
$.ajax({
type:"post",
url:"server.php?p=add",
data:{nm:name,em:email,hp:phone,al:address},
success: function(msg){
alert('Success Insert data');
}
});
Related
Im working in a laravel project and I can use a button in order to show a modal and I have a delete button inside this modal and is working using botstrap 3 but is not working using bootrsap 4. ¨
This is my html code,
these CDN are working:
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
and when I use these cdn my delete button inside my modal doesnt work anymore:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
My modal:
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-cliente">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-orden_de_compra"></h4>
</div>
<div class="modal-body">
<h3 class="text-center">¿Estas seguro de que quieres eliminar este pedido?</h3>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">id:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="orden_de_compra">Orden de compra:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="orden_de_compra_delete" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger delete" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-trash'></span> Delete
</button>this delete button doesnt work with Bootstrap 4 but is working with bootstrap 3
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
My js:
<script type="text/javascript">
// delete a post
$(document).on('click', '.delete-modal', function() { //this function works with bootstrap 4
$('.modal-orden_de_compra').text('Delete');
$('#id_delete').val($(this).data('id'));
$('#orden_de_compra_delete').val($(this).data('orden_de_compra'));
$('#deleteModal').modal('show');
id = $('#id_delete').val();
orden_de_compra = $('#orden_de_compra_delete').val();
alert(id);
});
$('.modal-footer').on('click', '.delete', function() { //this function doesnt work with bootstrap 4
$.ajax({
type: 'DELETE',
url: 'posts/' + id,
data: {
'_token': $('input[name=_token]').val(),
},
success: function(data) {
toastr.success('Pedido eliminado exitosamente!', 'Notificación', {timeOut: 5000});
$('.item' + data['pedido_id']).remove();
alert('.item' + data['pedido_id']);
}
});
});
</script
Okay... I will do both snippets for you to see the difference.
BS3:
$('.modal-footer').on('click', '.delete', function() {
console.log("I'm here.");
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<button type="button" data-toggle="modal" data-target="#deleteModal">Open Modal</button>
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-cliente">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-orden_de_compra"></h4>
</div>
<div class="modal-body">
<h3 class="text-center">¿Estas seguro de que quieres eliminar este pedido?</h3>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">id:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="orden_de_compra">Orden de compra:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="orden_de_compra_delete" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger delete" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-trash'></span> Delete
</button>this delete button doesnt work with Bootstrap 4 but is working with bootstrap 3
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
After a look at the Migrating to v4 documention and finding an absolute nothing about this...
I finally found it by comparing the v4 markup in search of what the %&* can be different.
It's pretty subtile... I don't know what class="modal-cliente" was for... Potentially something wrong that wasn't affecting v3. But it seems it is the issue with v4. The role="document" may be important too... Sorry, I can't explain in more details. ;)
Look for the 2 slightly changed lines in the markup below.
BS4:
$('.modal-footer').on('click', '.delete', function() {
console.log("I'm here.");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" data-toggle="modal" data-target="#deleteModal">Open Modal</button>
<div id="deleteModal" class="modal fade" role="dialog">
<!-- Those 2 lines are slightly changed -->
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- ============================ -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-orden_de_compra"></h4>
</div>
<div class="modal-body">
<h3 class="text-center">¿Estas seguro de que quieres eliminar este pedido?</h3>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">id:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="orden_de_compra">Orden de compra:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="orden_de_compra_delete" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger delete" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-trash'></span> Delete
</button>this delete button doesnt work with Bootstrap 4 but is working with bootstrap 3
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
I need help. Because i'm using 1 modal for addRoom, editRoom, editImageRoom. I just want to ask if there is a way that if I close/x the modal. The data and the error message will be refresh/reset. Then when I click the other button that opens the modal. The data will be reset. so the errors and validation will not show anymore in other modal interface. Note* im using 1 modal only. I just hide the other field when I click for specific button.
I have 3 different buttons but the modal it open is only one, i just hide some field.
Add button
<i class="fa fa-plus"></i> Add a room
Edit Info Button
<img src="../images/rooms/'.$image.'" class="img-thumbnail" width="90px" height="105px">
Edit Image Button
<i class="fa fa-edit"></i>
Here's the modal
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="modal_form" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<form id="form" name="form" method="post" >
<div class="row">
<div class="summary-errors alert alert-danger alert-dismissible">
<button type="button" class="close" aria-label="Close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<p>Errors list below: </p>
<ul></ul>
</div>
<div id="for_field">
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="room_num" name="room_num" placeholder="Room Number" />
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<select type="text" class="form-control" id="room_type" name="room_type" placeholder="Room Type">
<option value="">--Choose Room Type--</option>
<?php
$select = "SELECT * FROM room_type";
$qry = mysql_query($select)or die(mysql_query());
while($rows = mysql_fetch_array($qry)){
echo '<option value="'.$rows['room_type_id'].'" alt="'.$rows['room_type_description'].'">'.$rows['room_type_name'].'</option>';
}
?>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="rate" name="rate" placeholder="Rate" />
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="caps" name="caps" placeholder="Capacity" />
</div>
</div>
</div>
<div id="for_image">
<div class="col-md-12">
<div id="show_image" class="form-group input-group">
</div>
</div>
</div>
<div id="for_upload">
<div class="col-md-12" >
<div class="form-group input-group input-group-file" >
<label class="input-group-addon control-label"><i class="fa fa-image"></i></label>
<input type="text" class="form-control" readonly>
<span class="input-group-btn">
<span class="btn btn-success btn-file">
<i class="icon wb-upload" aria-hidden="true"></i>
<input type="file" id="file" name="file" >
</span>
</span>
</div>
</div>
</div>
<div class="control-group form-group">
<div class="modal-footer">
<input type="hidden" id="submitted" name="submitted" value="1" />
<input type="hidden" id="id" name="id" value="" />
<button type="submit" id="submit" name="submit" onclick="submit()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<span align="left" id="loader"></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here's the Jquery
function addRoom()
{
save_method = 'add';
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('#for_field').show();
$('#for_image').hide();
$('#for_upload').show();
$('#modal_form').modal('show');
$('.modal-title').text('Add new room');
}
// edit modal
function editRoom(u)
{
save_method = 'update';
$.ajax({
url: "serverside/get/roomGet.php",
data: "rId="+u,
type: "POST",
dataType: "JSON",
cache: false,
success: function(data)
{
if(data.status == 1)
{
$('#id').val(data.room_id);
$('#room_num').val(data.room_num);
$('#room_type').val(data.room_type_id);
$('#rate').val(data.room_rate);
$('#caps').val(data.room_capacity);
$('#for_field').show();
$('#for_upload').hide();
$('#modal_form').modal('show');
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('.modal-title').text('Edit Room No: '+data.room_num);
}else{
$('body').html(data.msg);
}
}
});
}
function editImage(u)
{
save_method = 'update-image';
$.ajax({
url: "serverside/get/roomImageGet.php",
data: "rId="+u,
type: "POST",
dataType: "JSON",
cache: false,
success: function(data)
{
if(data.status == 2)
{
$('#hide-field').hide();
$('#id').val(data.room_id);
$('#room_num').val(data.room_num);
$('#for_field').hide();
$('#for_image').show();
$('#for_upload').show();
$('#modal_form').modal('show');
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('.modal-title').text('Edit Image');
$('#show_image').html(data.source);
}else{
$('body').html(data.msg);
}
}
});
}
I have no problems in code. i just want to ask how to reset the modal so the data from 1 button(modal) will not conflict the button(modal). thats all! thanks! just give me more good suggestion thanks :)
If you try to call the modal with jquery ajax then you really don't need the lengthy jquery show/hide code. Here is an example code:
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav" id="menu">
<li>Edit/Delete
</li>
</ul>
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
</html>
modal-content.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
You can use three different files for model or call the same modal by Ajax for all actions. Also, you can follow this link: Getting Bootstrap's modal content from another page
I have a popup model where user add the course name. I have added a form validation in my codeigniter controller and then if the validation is false, I am loading my view again with a form error showing above form input in the model, but due to page reload the model closes. What I want is if the form validation is false I want to reload the page with the modal open. I am not familiar with ajax. Any help will be really appreciated.
Codeigniter Controller
$this->form_validation->set_rules('course_name', 'Course Name', 'required|max_length[30]');
$this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>');
if ($this->form_validation->run() ) {
echo "inserted";
}else {
$this->load->view('admin/coursename');
}
Codeigniter View (Modal Code)
<center><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Add Course</button><center>
<!-- Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Course</h4>
</div>
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="name">Course Name:</label>
<?php echo form_error('course_name'); ?>
<input type="text" class="form-control" id="name" name="course_name" placeholder="Enter course name...">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-warning">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can use jquery ".ajax()" method to call the validation controller without refreshing, then the controller echoes its result which your j-query code will now have to interprete. An example code below.
You can modify your view code like this:
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Course</h4>
</div>
<div class="modal-body">
<div class="err">
</div>
<form action="" method="post" id ="yourform">
<div class="form-group">
<label for="name">Course Name:</label>
<?php echo form_error('course_name'); ?>
<input type="text" class="form-control" id="name" name="course_name" placeholder="Enter course name...">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-warning">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<script>
$("#yourform").submit(function (event) {
var form = $(this).closest('form');
field1 = $(form).find('.field1').val();
field2 = $(form).find('.field2').val();
$.ajax({
url: '<?php echo site_url('your/controller/url') ?>',
type: 'POST',
data: {field2: field2, field2: field2},
success: function (result) {
//alert(result);return false;
if (result == 1)
{
location.reload();
} else
{
$('#err').html(result);
}
}
});
event.preventDefault();
});
Then you can configure your controller like such :
<?php
$this->form_validation->set_rules('course_name', 'Course Name', 'required|max_length[30]');
$this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>');
if ($this->form_validation->run()) {
echo "1";
} else {
echo "<b>" . validation_errors() . "</b>";
}
?>
Hope i helped
you can use location.reload("Your Page Name") function in ajax success function.
I have modal bootstrap window that insert data in database using AJAX and JQUERY but I couldn't close window after insert and I want also to show message like Successfully inserted see below code
---- modal window ----
<!-- Modal employer-->
<div class="modal fade" id="employer" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form role="form" action='insert.php' method='post' id='myform'>
<div class="form-group">
<label for="exampleInputEmail1">Nom</label>
<input type="text" name="nom"class="form-control"
id="exampleInputEmail1" placeholder="Nom"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Prenom</label>
<input type="text" name="prenom" class="form-control"
id="exampleInputPassword1" placeholder="Prenom"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">telephone</label>
<input type="text" name="telephone"class="form-control"
id="exampleInputPassword1" placeholder="telephone"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Fonction</label>
<input type="text" name="fonction" class="form-control"
id="exampleInputPassword1" placeholder="Fonction"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Salire</label>
<input type="text" name="salaire" class="form-control"
id="exampleInputPassword1" placeholder="Salire"/>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" id='insert' class="btn btn-primary">
Save changes
</button>
</form>
</div>
</div>
</div>
</div>
---- insert.php ----
<?php
require('config.php');
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$telephone = $_POST['telephone'];
$fonction = $_POST['fonction'];
$salaire = $_POST['salaire'];
$sql = "insert into employer (nom, prenom,telephone,fonction,salaire) values ('$nom','$prenom','$telephone','$fonction','$salaire')";
if(mysqli_query($con, $sql)){
echo 'success';
?>
<script type="text/javascript">
$(document).ready(function(){
$('#employer').modal('hide');
});
</script>
<?php
}
?>
---- insert.js----
$('#myform').submit(function(){
return false;
});
$('#insert').click(function(){
$.post(
$('#myform').attr('action'),
$('#myform :input').serializeArray(),
function(result){
$('#result').html(result);
}
);
});
When you get your response from ajax request then close modal window.
$('#employer').modal('hide');
As according to your example:
$('#insert').click(function(){
$.post(
$('#myform').attr('action'),
$('#myform :input').serializeArray(),
function(result){
$('#employer').modal('hide'); // ADD CODE FOR CLOSE MODAL
$('#result').html(result);
}
);
});
Try this:
$('#modal').modal('close');
It will close the modal.
Why is this not working, because of a problem in Bootstrap or ajax?
This is my modal update:
<div class="container">
<!-- Modal update -->
<div class="modal fade" id="myModals<?php echo $row->id ;?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="user">Username:</label>
<input type="user" class="form-control" id="users<?php echo $row->id ;?>" value="<?php echo $row->username ;?>">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="passwords<?php echo $row->id ;?>" value="<?php echo $row->password ;?>">
</div>
<button onclick='update("<?= $row->id ?>")' type="submit" class="btn btn-default">Update</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And this is my ajax:
function update(id){
var users = $("#users"+id).val();
var passwords = $("#passwords"+id).val();
$.ajax({
dataType:'html',
url:"update.php",
type:"POST",
data:"users="+users+"&passwords="+passwords+"&id="+id,
}).done(function(data){
load();
$('back-drop').remove();
});
}
Why is this not working when I submit the change, the modal form is not closed completely like this:
Please recheck your selector in the hide() syntax. You've forgotten the # in front.
Change this:
$('myModals'+id).modal('hide');
To this:
$('#myModals'+id).modal('hide');
For checking such issues, you should use Google Chrome and press CTRL + Shift + J. The possible syntax errors will be shown in the console.