We Keep Coding

jQuery modal not showing after submitting form

I am trying to show a message after a user clicks on a button to submit a form but my modal is not getting displayed. don't know why this is happening.
My html code:
<form method="POST" class="course-save-form">
{% csrf_token %}
<button class="small btn no-border dropdown-item save-course" type="button" data-url="{% url 'home:course-save' course.id %}"><i class="mr-1 m fas fa-bookmark"></i>Save</button>
</form>
my modal:
<div class="modal fade" id="modal-save-course">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="moda-body">
<div class="modal-header text-center">
<h5 class="modal-title col-12 text-center">Save Course
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h5>
</div>
<h6 class="text-message"></h6>
</div>
<div class="modal-footer col-12">
<button type="button" class="btn btn-seconday" style="border-radius: 20px; width: 100%;">Close</button>
</div>
</div>
</div>
</div>
and my jQuery:
$(document).ready(function (e) {
$('.course-save-form').on("click", ".save-course", function (e) {
var btn = $(this)
e.preventDefault();
e.stopImmediatePropagation();
$.ajax({
type: "POST",
url: $(this).attr("data-url"),
dataType: 'json',
data: $(this).closest("form").serialize(),
success: function (data){
$('#modal-save-course').show();
$('#modal-save-course.modal-content.modal-body.text-message').html(data.message);
},
error: function(rs, e){
console.log(rs.responeText);
},
});
});
})
My button works but my modal is not getting displayed with the message.

Use $('#modal-save-course').modal('show');
Also, text wasn't displaying with .html , so use .text :
$('#modal-save-course .text-message').text(data.message);
$('#modal-save-course').modal('show');
See screenshot:

jQuery - Modal Does not display

I want to append some data to a table in a boostrap modal, which is returned from PHP and displayed using jQuery. But it is not working properly.
When I put an alert, it shows the data returned from PHP, but the data is not appending or displaying modal.
$(document).on('click', '.btn-info', function() {
var row = $(this).closest("tr"); // Find the row
var text = row.find(".book_id").text();
$.ajax({
async: false,
url: "../../svr/lib/view-book-details.php",
method: "POST",
data: {
text1: text
},
dataType: "text",
success: function(data) {
//alert(data);
$('#view-table').append(data);
$('#viewModal').modal("show");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Publisher</h4>
</div>
<div class="modal-body modal-heigt">
<table class="table table-bordered" id="view-table">
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You can add an hidden button in the html:
<button type="button" data-toggle="modal" data-target="#viewModal" style="display:none;" id="modalHiddenCallBtn"></button>
Then you can call the click event on this button:
success: function (data) {
$('#view-table').append(data);
$('#modalHiddenCallBtn').click();
}

load content to modal after form submit

I want to load content to a result div that is located inside a modal-body after form is submitted and after modal is shown but i can't figure out the problem. when i want to load content to a result div outside modal it works, but when i use the result div inside a modal it doesn't.
this is my code so far:
html:
<div class="col-lg-12">
<div class="row">
<div id="form-content">
<form method="post" id="reg-form" autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div id="monetarylayout" class="form-group">
<input class="form-control number" type="text" value="0" name="subjectvalue" id="txt_subjectvalue">
</div>
<div class="form-group">
<button class="btn btn-primary">submit</button>
</div>
<input class="form-control number" type="text" value="0" name="coinquantity" id="txt_coinquantity" style="display:none"> <!--just to make the form post work-->
</form>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<div id="result"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
jquery:
<script type="text/javascript">
$(document).ready(function() {
// submit form using $.ajax() method
$('#reg-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'testcontroller.php',
type: 'POST',
data: $(this).serialize() // it will serialize the form data
})
.done(function(data){
$('#myModal').modal(), function() {
// do something when the modal is shown
$('#result').fadeIn('slow').html(data);
}
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>

i figured out myself. i should have added these attributes to my form button:
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">submit</button>
and edited this function as follows:
.done(function (data) {
$('#result').fadeIn('slow').html(data);
})

Bootstrap modal wont close on submit

I added a Bootstrap modal to my page. Here is the code of modal div:
<div class="modal fade" id="myModal<?php echo $kategori['C_ID'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $kategori['C_ID'];?>">
<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="myModalLabel<?php echo $kategori['C_ID'];?>">Perditeso</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="id">ID</label>
<input type="text" class="form-control" id="id<?php echo $kategori['C_ID'];?>" value="<?php echo $kategori['C_ID'];?>">
</div>
<div class="form-group">
<label for="newname">Kategoria</label>
<input type="text" class="form-control" id="newname<?php echo $kategori['C_ID'];?>" value="<?php echo $kategori['C_Name'];?>">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Mbyll</button>
<button type="button" onclick="catupdate('<?php echo $kategori['C_ID'];?>')" class="btn btn-primary">Ruaj ndryshimet</button>
</div>
</div>
</div>
</div>
and the catupdate function:
function catupdate(id){
var dataString="fshij=" + id;
$.ajax({
type:"post",
url:"../functions/query.php",
data:dataString,
cache:false,
success: function(html){
$('#del').html(html);
}
});
return false;
}
The function runs correctly and completes the action but it doesn't close Modal automatically. In this case i'm tryint to edit datas there. PHP codes are okay.

You should close the modal programmatically after the click using :
$('[id^="myModal"]').modal('hide');
//OR
$('.modal').modal('hide');
Inside success function or in the beginning of your function catupdate to, e.g :
success: function(html){
$('.modal').modal('hide');
$('#del').html(html);
}
Hope this helps.

Use the following syntax to hide a modal:
$('#modalID').modal('hide');
So, in your code:
function catupdate(id){
var dataString="fshij=" + id;
$.ajax({
type:"post",
url:"../functions/query.php",
data:dataString,
cache:false,
success: function(html){
$('#del').html(html);
$('.modal:visible').modal('hide');
}
});
return false;
}

Ajax-Request: Passing Dynamic Content to modal

I never used jquery before and tried hard to find a solution for my case.
On the cockpit.php page I use a form to get some content from a mysql database. Meanwhile I am able to show this content in a div on the cockpit.php page.
The plan is to show the content in a modal. There the user has 10 seconds to confirm it (in this case it should be stored to the database).
The problem: I tried it for hours and days to get the content into the modal. No chance... Any idea on how to solve this? Btw: At the moment I reload the window after the countdown reaches zero. Here it would also be an idea to just close to modal via jquery.
So I would really appreciate some hints. Thx.
Final Solution:
modal.js
$(function(){
$("#pricing").submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data)
{
$('#myModal').find('#a').text(data.a);
$('#myModal').find('#b').text(data.b);
$('#myModal').find('#c').text(data.c);
$('#myModal').find('#d').text(data.d);
$('#myModal').find('#e').text(data.e);
$('#myModal').find('#f').text(data.f);
$('#a2').val($(this).data('a'));
$('#myModal').modal('show');
}
});
return false;
});
});
$("#confirm").click(function(){
var data = {
a: $('#a').text(),
b: $('#b').text(),
c: $('#c').text()
};
$.ajax({
url: 'confirm.php',
type: "POST",
data: data,
dataType: 'json',
success: function(confirm) {
window.location.reload();
}
});
});
relevant HTML-part of the Modal for click-function:
<div class="alert hidden" role="alert" id="modalAlert"></div>
<input type="hidden" id="confirmmodal" name="confirmmodal" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ar btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-ar btn-primary" id="confirm">Confirm</button>
</div>
confirm.php
<?php
$a = $_POST['a'];
// do what you want
$confirm = array('message' => $a);
echo json_encode($confirm);
So the functionality works fine...

I made a full example for you, I use it on my website. This is a html file with a link and a modal, the required JQuery and a simple php code to simulate the server response. It shows you, how you can pass data to the modal, how to show the modal and display the server response.
Just copy the files into the same directory and test it, it works for me.
index.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" 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>
<h4 class="modal-title" id="myModalTitle"></h4>
</div>
<div class="modal-body">
<div class="alert hidden" role="alert" id="modalAlert"></div>
<input type="hidden" id="myModalID" name="myModalID" value="" />
<p>Modal example.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="myModalButton">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<a class="openModalLink" href="/" data-id="1234" data-name="Stackoverflow answer">
<span> Click me to open modal</span>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
script.js
$(function(){
$(".openModalLink").click(function(e) {
e.preventDefault();
$("#myModalTitle").html('Hello, my name is '+$(this).data('name')+'!');
$("#myModalID").val($(this).data('id'));
$('#myModal').modal('show');
});
$("#myModalButton").click(function(){
$.ajax({
url: '/function.php',
data: {
id: $("#myModalID").val()
},
dataType: 'json',
success: function(data)
{
$('#myModal').find('#modalAlert').addClass('alert-success');
$('#myModal').find('#modalAlert').html(data.message).show;
$('#myModal').find('#modalAlert').removeClass('hidden');
}
});
});
});
function.php
<?php
echo json_encode(array('message' => 'You submitted this id: ' . $_GET['id']));
hope this helps, feel free to ask me
UPDATE BASED ON YOUR COMMENT
I created another version that will take data from the form on the html page, pass it to php and then display the results from php on the modal window. It uses a different javascript, because now we are "post"-ing the form data to php. Here are the files:
index.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" 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>
<h4 class="modal-title" id="myModalTitle"></h4>
</div>
<div class="modal-body">
<div class="alert hidden" role="alert" id="modalAlert"></div>
<input type="hidden" id="myModalID" name="myModalID" value="" />
<p>Modal example.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="myModalButton">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="row">
<div class="col-md-8 col-md-offset-0">
<form class="form-inline" id="myForm" action="/function.php" method="post">
<div class="form-group">
<label for="myInput">Input data</label>
<input type="text" class="form-control" id="myInput" name="myInput" placeholder="Enter data here">
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
script.js
$(function(){
$("#myForm").submit(function(event) {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data)
{
//display data...
$('#myModal').find('#modalAlert').addClass('alert-success');
$('#myModal').find('#modalAlert').html(data.message).show;
$('#myModal').find('#modalAlert').removeClass('hidden');
$('#myModal').modal('show');
}
});
return false;
});
});
function.php
<?php
echo json_encode(array('message' => 'You submitted this data: ' . $_POST['myInput']));