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>
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 try to display a pop up alert using modal but the pop up doesn't appear
Here is the code that I have written
function CallService() {
$.ajax({
url: '/url,
type: "POST",
dataType: "xml",
success: function(xml, status) {
$(xml).find('occurrences').each(function() {
alert("Demande soumise avec succès");
});
$(xml).find('errors').each(function() {
$(this).find("error").each(function() {
var label = $(this).find('label').text();
$(document).ready(function() {
$(".erreur").append("<div class='alert alert-danger' role='alert' style='width=50%'> <strong>" + label + "<strong></div>").modal('show');
});
});
});
},
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="erreur"></div>
close quotes in url parameter.
Change
url: '/url,
to
url: '/url',
Try this
$(document).ready(function(){
$("#openme").click(function(){
$("#myModal").modal();
});
});
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button id="openme" class="btn btn-default">open!</button>
<div class="modal fade" id="myModal" 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">modal title </h4>
</div>
<div class="modal-body">
<p>confirm </p>
</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>
Updated
I change your function to open alert popup try this,
function CallService(){
var label ='your success response';
var modalContent ='<div class="modal fade" id="myModal" 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">Alert</h4></div><div class="modal-body">'+
'<p>'+label+'</p></div></div></div></div>';
$(".erreur").html(modalContent);
$("#myModal").modal();
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="erreur"></div>
<button onclick="CallService()">click me</button>
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);
}
From a link in a table:
<a href="#myModal" data-toggle="modal" data-id="'.$row['ID'].'">
and JS on that page:
<script>
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'forms/php/fetchrecord.php', //fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
$('#myModal').on('hidden.bs.modal', function () {
location.reload();
})
});
</script>
I'm sending the mysql record ID to a PHP file that populates the "fetch-data" class of an "Edit" form in a BS modal. My issue is that on Submit, the modal is not sending any data to updaterecord.php. The updaterecord.php works when you open the "Edit" form in a new window rather than a modal. What am I not doing or doing wrong?
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Order</h4>
</div>
<div class="modal-body">
<form role="form" action="forms/php/updateorder.php" method="post">
<div class="fetch-data"></div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" id="updateorder">Submit</button>
</div>
</form>
</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>