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);
}
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>
I have table with names, when I am clicking names I need to open modal and put the name I clicked there. How I can do it? Thanks in advance
report.php
button:
<a href='#ReportModal' data-id='1' data-toggle='modal'>Open</a></td>
modal:
<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
<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">asd</h4>
</div>
<div class="modal-body">
//HOW TO PRINT HERE?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
script
<script>
$(document).ready(function() {
$(document).on("click",".get-data"function(){
var val = $(this).attr("data-id");
$.ajax({
url: "../dist/scripts/report.userinfo.php",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
$('.modal-body').html(data);
}
});
});
});
</script>
report.userinfo.php
<?php
include($_SERVER['DOCUMENT_ROOT']."/dist/config.php");
$id = $_POST['id'];
$query = $db->query ("select Name from _reports where ID = '$id' ") or die($db->error());
$rows= $query->fetch_array();
echo $rows['Name'];
?>
You're almost there, now all you need is to execute the code assigned to elements with class get-data - to do achieve this, you can add the class to your anchor.
$(document).ready(function() {
$("#ReportModal").dialog();
$(document).on("click", ".get-data", function() {
var val = $(this).attr("data-id");
// for the sake of testing we assume your AJAX call works
// and then you can remove the following line and handle it
// in the success handler as shown in the comment below
$('.modal-body').html("You clicked: " + val);
/*
$.ajax({
url: "../dist/scripts/report.userinfo.php",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
$('.modal-body').html(data);
}
});*/
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Open
<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
<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">asd</h4>
</div>
<div class="modal-body">
//HOW TO PRINT HERE?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
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>