I have created two modals using Bootstrap and those are opening using jQuery with Ajax requested data. The problem is these modals are working properly on Google Chrome, but not working on Firefox. How do I fix it?
My code is below:
$(document).on("click", "#file_popup", function() {
$.ajax({
url: "fileshare.php",
method: "post",
dataType: 'text',
success: function(data) {
$("#tbl_content").html(data);
jQuery.noConflict();
$("#pp_filedownload").modal('show');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="pp_filedownload" role="dialog" hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<strong class="modal-title">File Download</strong>
</div>
<div class="modal-body" id='tbl_content'>
</div>
</div>
</div>
</div>
I tried a sample, it works fine in all browsers. Try with this, may be this will help u
//You can launch the modal with the code below this.
$(document).ready(function(){
$("#submitButton").click(function(){
$("#myModal").modal();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="submit" id="submitButton"/>
<!-- Modal -->
<div class="modal fade" 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">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>
</div>
</div>
</div>
Related
<div id="editproductdiv" onclick="editproduct();"> </div>
<div id="editproductform" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:1000px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cancellation Reason </h4>
</div>
<div class="modal-body" id="editproduct" style="display:inline-block">
</div>
<div class="modal-footer" style="display:none;">
</div>
</div>
</div>
</div>
<script>
function editproduct() {
$('#editproductform').modal('show');
$.ajax({
url: 'index.php?route=order/order_details/editproduct',
dataType: 'json',
type: 'post',
data: ,
beforeSend:function(){
$("#editproduct").html('loading');
},
success:function(json){
if(json['error']){
// alert(json['error']);
} else {
$("#editproduct").html(json['editproduct']);
}
}
});
}
</script>
Problem: when i click on the button in my view page, this alert show up : https://prnt.sc/s8gn6w
The error code :
function(e){var t,n,r,i=this[0];{if(arguments.length)return
r=g(e),this.each(function(n){var
i;1===this.nodeType&&(null==(i=r?e.call(this,n,w(this).val()):e)?i="":"number"==typeof
i?i+="":Array.isArray(i)&&(i=w.map(i,function(e){return
null==e?"":e+""})),(t=w.valHooks[this.type]||w.valHooks[this.nodeName.toLowerCase()])&&"set"in
t&&void
0!==t.set(this,i,"value")||(this.value=i))});if(i)return(t=w.valHooks[i.type]||w.valHooks[i.nodeName.toLowerCase()])&&"get"in
t&&void
0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(bt,""):null==n?"":n}}
I didn't have any alert button , but this still show up
any idea why ?
Problem is in your function, you missed the opening tag (. and also empty data
instead of function editproduct)
use
function editproduct()
and you need a server to run PHP files, download WAMP or XAMPP because without a server that understands PHP it just downloads the page.
it's because missing ( or open parenthesis in you function
change to
function editproduct()
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id="editproductdiv" name="editproductdiv" > click here</button>
<div class="container">
<!-- Modal -->
<div class="modal fade" 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">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>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#editproductdiv").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
<button type="button" onclick="editproduct();" name="button">button</button>
<div id="editproductform" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:1000px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cancellation Reason </h4>
</div>
<div class="modal-body" id="editproduct" style="display:inline-block">
</div>
<div class="modal-footer" style="display:none;">
</div>
</div>
</div>
</div>
<script type="text/javascript">
function editproduct(){
//alert("ok");
$('#editproductform').modal('show');
$.ajax({
url: 'action.php',
dataType: 'json',
type: 'post',
data: {
route : 'your_route' //this you can post your every data by using comma (,)
},
beforeSend:function(){
$("#editproduct").html('loading');
},
success:function(json){
console.log(json);
if(json.error){
// alert(json['error']);
} else {
$("#editproduct").html(json.editproduct);
}
}
});
}
</script>
</body>
</html>
I have use action.php for your php script. and think it will help
I want to display modal on button click. I've followed bootstrap documentation, but for some reason the modal isn't popping up.Here is my code:
Modal:
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal"> View Details</button>
Jquery:
$(document).ready(function(){
$('button.btn-view-details').on('click', function () {
$('#commonModal').modal('show');
})
})
On your button, you can add data-target attribute and you don't need to trigger the popup via jQuery:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal" data-target="#commonModal"> View Details</button>
You need to add just bootstrap cdns
$(document).ready(function() {
$('button.btn-view-details').on('click', function() {
$('#commonModal').modal('show');
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details" data-toggle="modal"> View Details</button>
My Bootstrap modal gets displayed successfully, but the show.bs.modal event isn't getting fired for some reason.
Here is my modal markup:
<div class="modal" tabindex="-1" id="email-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>hi</p>
</div>
</div>
</div>
</div>
and here is my JavaScript:
$('#email-modal').on('show-bs-modal', function (event) {
alert('hello, world!');
});
$('#email-modal').modal();
fiddler
It's a simple typo:
FROM: show-bs-modal TO: show.bs.modal
$('#email-modal').on('show.bs.modal', function (event) {
console.log('hello, world!');
});
$('#email-modal').modal();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal" tabindex="-1" id="email-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>hi</p>
</div>
</div>
</div>
</div>
My modal ID is #modal1 for example.
Appears normally with a button function.
Check this out it might help you.
$(document).ready(function(){
$("#myBtn").click(function(){
setTimeout( function(){ $('#modal1').modal('show'); } , 1000 );
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="modal1" 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>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
I am trying to display a popup box from a div. My code is below.
Upon successful addition on record the div needs to be shown but its not working. I have tried $("#div").html.
Script:
<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
$('#users').submit(function() {
$('#response').html("<b>Adding...</b>");
$.post('controller_adduser.php', $(this).serialize(), function(data) {
$('#response').html("<b>Adding...</b>");
//// Show div Message box
}).fail(function() {
alert( "Posting failed." );
});
return false;
});
});
</script>
DIV:
<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
<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"><i class="icon-accessibility"></i> Loading remote path</h4>
</div>
<div class="modal-body with-padding">
<p>Added!!</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
POPUP MSG BOX
I see that youre using bootstrap. In order for the modal to show you need to run the .modal("show") command. I would try this:
HTML:
<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
<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">
<i class="icon-accessibility"></i>
<span id="response">Loading remote path</span>
</h4>
</div>
<div class="modal-body with-padding">
<p>Added!!</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
$('#users').submit(function() {
$.post('controller_adduser.php', $(this).serialize(), function(data) {
$('#remote_modal #response').html("<b>Adding...</b>");
$('#remote_modal').modal("show");
}).fail(function() {
alert( "Posting failed." );
});
return false;
});
});
</script>