Pass values to bootstrap modal in jQuery success function

Pass values to bootstrap modal in jQuery success function - javascript

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);

Related

bootstrap modal can't call function

I was trying to load dynamic data on my bootstrap modal. But button can't call the javascript function so instead of loading dynamic data it only loads the on page modal. What could be possible error of the following code?
</i>
Bootstrap Modal:
<div id="cart-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Warehouse Products</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body cart p-4">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div><!-- /.modal -->
Javascript Part:
$("#cart-modal").on("show.bs.modal", function(e) {
var product_id = $(e.relatedTarget).attr('data-id');
var url = '{{ url('product-details') }}';
$.ajax({
url:url,
method:'POST',
data:{ product_id: product_id },
success:function(response){
if(response.success){
$(".modal-body cart").html(response.html);
}else{
console.log(error)
}
},
error:function(error){
console.log(error)
}
});
});

Show multiple images in bootstrapp model pop-up

I have a logic to show single image in model pop-up, but now I'm trying to show list multiple images the same model pop-up. How can I achieve that?
Here is my working code for single image.
$(document).on("click", "a[name='lnkViews']", function() {
var myImageId = $(this).attr('id');
$.ajax({
url: "#Url.Action("
ImagesView ", "
Controller ")",
type: "GET",
data: {
Id: myImageId
},
dataType: "json",
success: function(data) {
document.getElementById("ItemPreview").src = "data:image/jpg;base64," + data.data;
$('#gardenImage').modal('show');
},
error: function() {
alert("Error");
}
});
});
<!-- Modal -->
<div class="modal fade" id="gardenImage" tabindex="-1" role="dialog" aria-labelledby="gardenImageLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="border-color:transparent !important">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" style="border-color:transparent !important">
<img class="center-block" id="ItemPreview" src="" alt="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger center-block" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thanks in advance!

How to call class first without call modal if it meets certain conditions?

Demo and Full Code is like this : https://jsfiddle.net/oscar11/xzxrp7nn/2/
My HTML Code is like this :
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg check_session" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<label for="idTourDateDetails">Tour Start Date:</label>
<div class="form-group">
<div class="input-group">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
My Javascript Code is like this :
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
}
}
})
});
When response != 'exist_session', I want the system display alert message without display modal. So only display alert message.
Any solution to solve my problem?
Thank you

You remove data-toggle and data-target in button
<button class="btn btn-primary btn-lg check_session">Launch demo modal</button>
then you can call it in javascript.
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
} else {
$('#myModal').modal()
}
}
})
});
Working Demo
https://jsfiddle.net/xzxrp7nn/4/

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>

We Keep Coding

JavaScript is the programming language of the Web.

Pass values to bootstrap modal in jQuery success function - javascript

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

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

Related

bootstrap modal can't call function

Show multiple images in bootstrapp model pop-up

How to call class first without call modal if it meets certain conditions?

How to Open Modal from Function Call Jquery

Open a popup box after receiving result from ajax

Categories

Resources