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:

bootstrap modals data-id issue

I saving notes for a datatables row with a modal. It works fine until I filter the table with YADCF plugin for datatables. The id is empty or from the last openend modal. What is going wrong? My code:
//PHP to echo the button to open modal for saving notes
echo '<td><button class="btn btn-primary" id="note-'.$project->case_id.'" data-id="'.$project->case_id.'" data-toggle="modal" data-target="#noteModal">Notities</button></td>';
//The Modal
<!-- /.modal -->
<div class="modal fade bs-modal-lg" id="noteModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Notities</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="caseId">Case ID</label>
<input type="text" class="form-control" name="caseId" id="caseId" value="" />
</div>
<div class="form-group">
<label for="caseId">Notities</label>
<textarea id="note" class="form-control" name="note"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" type="submit" id="submit-note">Opslaan</button>
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Sluiten</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
//The script to open and save modals with id. Sometimes this id is empty or the last open which is opened
<script>
$(document).ready(function() {
$('button[id^="note"]').click(function() {
var id = $(this).data("id");
$(".modal-body #note").val('');
$(".modal-body #caseId").val(id);
$.ajax({
url: "notitie?id="+id,
dataType: 'json',
async: false,
success: function(data) {
$(".modal-body #note").val(data);
}
});
});
$("#submit-note").click(function() {
var id = $('.modal-body #caseId').val();
var note = $('.modal-body #note').val();
$.ajax({
type: 'POST',
url: 'notitie/opslaan',
data: '{"id":"'+id+'","note":"'+note+'"}', // or JSON.stringify ({name: 'jonas'}),
success: function(data) {
location.reload();
},
contentType: "application/json",
dataType: 'json'
});
});
});
</script>

This did the trick
$('#table-projects').on('click', 'button[id^="note"]', function(){

Pass values to bootstrap modal in jQuery success function

I have a Bootstrap modal inside a jQuery success function. I want to show
some value in the model.
My model:
<div class="modal fade" id="REQModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header btn-danger">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error Message</h4>
</div>
<div class="modal-body">
<div id="num"></div>
<p>Error has occured!.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My function:
$.ajax({
url: $('#addRequest').val(),
type: "POST",
data: { Request: Request },
dataType: "json",
success: function (refNo) { // refNo comes here.
$("#num").val(refNo);
$("#REQModal").modal('show'); // modal popup's but refNo doesn't show.
}
});

try:
$("#num").html(refNo);
instead of
$("#num").val(refNo);

Try this
$("#num").html(refNo);

How to Open Modal from Function Call Jquery

I have this Modal from Bootstrap
When I add
button To call it it open successfully,
but what I really need is to open this modal from function calling automatically
my Experiment is:
<button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline;
padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button>
MY JavaScript is
function RenewCollectorDatePeriod() {
// AreYOuSureRenew();
var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val();
if (EmpID == -1) {
alert("please select one ")
}
else {
alert(EmpID);
GetCollectorInfo(EmpID);
}
}
then:
function GetCollectorInfo(EmpID) {
// AreYOuSureRenew();
$.ajax({
type: "POST",
url: "UnloadingCalendar.aspx/GetCollectorInfo",
data: JSON.stringify({ EmpID: EmpID }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result.d);
AreYOuSureRenew();
},
error: function (msg) {
alert(msg.d);
},
complete: function () {
}
})
}
function AreYOuSureRenew() {
alert("opened");
$('#EnsureModal').modal('show');
}
and here my modal
<div class=" modal fade" id="EnSureModal" role="dialog">
<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">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
Notice: when I add $("#EnSureModal").modal('show'); in Document.Ready it appeasrs on page load and appears again on function call , how can I make it appears only in function call

I read your code and I found out that you didn't use bootstrap correctly and the also the script you wrote is not correct. Check this out. This might help you.
Script:
$(document).ready(function(){
$("#fireme").click(function(){
$("#EnSureModal").modal();
});
});
HTML:
<button id="fireme" class="btn btn-default">Fire me up!</button>
<div class="modal fade" id="EnSureModal" role="dialog">
<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">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
The fiddle

Open a popup box after receiving result from ajax

i have a ajax code that works properly and gives the desired result. I want to modify this code and want that when a reply is received from ajax a popup/modal box should get opened.
I am able to open popup/modal box on a click of a button
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#bsModal3">
Small Modal
</button>
<!-- Modal -->
<div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Your content goes here...
</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>
</div>
</div>
but don't know how to open it automatically within ajax.
here is my ajax code
$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function (returndata) {
if (returndata[4] === 1) {
// want to load a popup box here
} else {
// other code
}
},
error: function () {
console.error('Failed to process ajax !');
}
});
can anyone please tell me how it can be done

You can use $("#bsModal3").modal('show'); inside your result.
See more about modal methods
$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function(returndata) {
if (returndata[4] === 1) {
$("#bsModal3").modal('show');
} else {
// other code
}
},
error: function() {
console.error('Failed to process ajax !');
}
});
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Your content goes here...
</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>
</div>
</div>

Try put this inside success callback :
success: function (returndata) {
if (returndata[4] === 1) {
$('#bsModal3').modal(); // this
} else {
// other code
}
},

Please do with the Ajax Call,modal is call in ajax response
$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function (returndata) {
if (returndata[4] === 1) {
$('#bsModal3').modal(); // Please right this in your Code
} else {
// other code
}
},
error: function () {
console.error('Failed to process ajax !');
}
});

$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function(returndata) {
if (returndata[4] === 1) {
$("#bsModal3").modal('show');
} else {
// other code
}
},
error: function() {
console.error('Failed to process ajax !');
}
});
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Your content goes here...
</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>
</div>
</div>