I'm trying to use a bootstrap 3.0 modal to load external html file into a modal using jQuery Ajax loader, however it's not shown on first call but works on subsequent calls.
<a data-toggle="modal" data-target="#myModal" href="#myModal" id="myModal" aria-hidden="true">Department</a>
<div class="contianer">
<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">
<img src="img/logo.png" width="150" alt="SmartAdmin">
</h4>
</div>
<div class="modal-body no-padding">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#myModal').click(function(e){
e.preventDefault();
$.ajax({
type: "GET",
url: "?AId=DEPT_ADDUPDATE",
data: { },
success: function(data){
$('.modal-body').html(data);
}
});
});
</script>
Just add:
success: function(data){
$('.modal-body').html(data);
$('#myModal').modal("show");
}
Related
I am targeting "model-body" section to load the dynamically created table in update.php, but when i click on the edit button,nothing is happens and then page becomes hanged.Can someone please advise what is missing ?
<div class="modal fade" id="Modal1" aria-labelledby="Modal-Edit
Form" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table cellpadding="10px" width="100%" id="modal1">
</table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
$(document).on("click", ".edit-btn", function(e) {
$("#Modal1").toggle("show");
var peid = $(this).data("eid");
$.ajax({
url: "update.php",
type: "POST",
data: {
id: peid
},
success: function(data) {
$("#Modal1 table").html(data);
}
});
});
$(document).on("click", ".edit-btn", function(e) {
$("#Modal1").toggle("show");
});
try this.
<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 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>
Is it possible to show results from jQuery function into bootstrap modal? I have a table and when user clicks one specific column, the modal should be shown with appropriate data.
<script type="text/javascript">
function getBreak(breakid,pos,countrycode){
$.ajax({
url: "{{ url('getBreak') }}",
type: "GET",
data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
success: function (result) {$('#myModal').modal('show');},
error: function(data){
alert("Error")
}
});
}
</script>
And this is a very basic modal where I want to change insert the data.
<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>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Is it possible to somehow append the modal with html content which I would get from getBreak() function?
yes possible use this.
<script type="text/javascript">
function getBreak(breakid,pos,countrycode){
$.ajax({
url: "{{ url('getBreak') }}",
type: "GET",
data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
success: function (result) {
$('#divhtml').html(result);
$('#myModal').modal('show');},
error: function(data){
alert("Error")
}
});
}
</script>
and in the desiging you have to do this
<div id="myModal" class="modal fade" role="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">
<div id="divhtml"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You could add this into you Success function, you could loop through the results data and add to the modal before you show it.
$.each(result , function(i, v) {
$('.text1').text(v.id);
}
My bootstrap (3.0.2) modal won't show up. I've tried different buttons, links and all that but it simply won't show up. I appreciate any help!
<a onclick="open_popup('login');">lo</a>
<script>
function open_popup(popup) {
var data_str = 'popup=' + popup;
$.ajax({
type: "GET",
cache: false,
url: "exam.php",
data: data_str,
success: function() {}
});
};
</script>
<button data-toggle="modal" data-target="#login_pop" style="display:none"></button>
<div class="login_pop" id="login_pop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="login_modal-dialog">
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
</div>
You can use $("#login_pop").modal("show"); to show the modal through code. Try below code.
<script>
function open_popup(popup) {
$("#login_pop").modal("show");
var data_str='popup='+popup;
$.ajax({ type:"GET", cache:false,
url:"exam.php",
data:data_str,
success:function(){ }
});
};
</script>
<a onclick="open_popup('login');">lo</a>
<div class="modal fade" id="login_pop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="login_modal-dialog">
<div class="modal-content">
<div class="modal-body"> Hello world!! </div>
</div>
</div>
</div>
</div>
JSFIDDLE