i have a page(products.php) that has a table which is dynamically populated. Each row has a button that opens up a modal, but in order to pass params to the modal: firstly, i declared the modal on the current page(products.php). Secondly, i call up the rest of the modal using ajax from another page(modal.php). i've popuplated all options in a select drop down before using ajax, but i can't seem to do the same this time by displaying the modal. i can use php href but that causes my jquery script that i use in submitting to the database on my modal not to work anymore and that's why i thought up doing this through ajax. I would like to know why this isn't working with well ajax.
Heres a sample code:
products.php
<html>
<header>
<script>
function modalValues(val1,val2){
if(window.XMLHttpRequest){
xhttp = new XMLHttpRequest();
}else{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function(){
if(xhttp.readyState == 4 && xhttp.status == 200){
document.getElementById("load_here").innerHTML = xhttp.responseText;
}
};
xhhtp.open("POST","modal.php?id3="+val1+"&id="+val2,true);
xhttp.send();
}
</script>
</header>
<body>
<div class="modal fade" data-keyboard="false" id="product_customerModal" tabindex="-1" role="dialog" aria-labelledby="product_customerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div id="load_here" class="modal-content">
</div>
</div>
</div>
<table>
<?php
global $link;
$query = "blah,blah";
$result_set = mysqli_query($link,$query);
$number = mysqli_num_rows($result_set);
for($count=0;$count<$number;$count++){
$result = mysqli_fetch_array($result_set);
echo "<tr>";
echo "<td>{$result['field1']}</td>";
echo "<td>{$result['field2']}</td>";
echo "<td><button onclick='modalValues(<?php echo $result['field1'];?>,<?php echo $result['field2'];?>) data-toggle="modal" data-target='#product_customerModal'></button></td>";
}
?>
</table>
</body>
</html>
And
modal.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" > Date: (<?php echo $date;?>)</h4></div
<div class="modal-body">
<?php
//some php code
?>
<div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
You need to correct two lines they are as follows and then your model html will be there:
xhttp.open("POST","test2.php?id3="+val1+"&id="+val2,true); not xhttp
echo "<td><button onclick='modalValues('".$result['field1']."','".$result['field2']."') data-toggle='modal' data-target='#product_customerModal'></button></td>";
Related
I have a modal script that I created in php and the script works fine but the php closing tag ?> is not closing at the end, tried putting the script in the header using echo but then the script dose not work at all also tried using just php removing the Script tags that did not work been working on for a while any help would be greatly appreciated.
<?php
include("db_config.php");
include('includes/session.inc');
$Title = _('Check Inquiry');
$ViewTopic = 'AccountsPayable';
$BookMark = 'AccountsPayable';
include('includes/header.inc');
include('includes/SQL_CommonFunctions.inc');
echo '<link href="' . $RootPath . '/css/bootstrap.min.css" rel="stylesheet" type="text/css" />';
echo '<script src = "'.$RootPath.'/javascripts/jquery.min.js"></script>';
echo '<script type="text/javascript" src = "'.$RootPath.'/javascripts/bootstrap.min.js"></script>';
$query = "select * from banktrans where type=".'22';
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_array($result)){
$transID = $row['transno'];
echo "<tr>";
echo "<td><button data-id='".$transID."' class='btn btn-info btn-sm btn-popup'>Details</button></td>";
echo "</tr>";
}
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>
HTML;
include('includes/footer.inc');
?>
Yes it dose appear I added the HTML in a separate php file and it works but the closing tag ?> is still not working as expected normally it shows up in NP++ in red when closed but shows as normal text but does not appear on page I am just wondering if it will create any issues that way.
Here is the code for the include modal.php
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>";
HTML;
?>'''
I am trying to open details data obtained from php-mysql in a model box instead of a new html page. Currently it is opening in other html page but I want to add that in a model box.
Here is my current code:
<a class="btn btn-info" href="details.php?view_id=<?php echo $row['userID']; ?>" title="click for Details" onclick="details.php"><span class="glyphicon glyphicon-eye-open"></span> Show Details</a>
here it refers to details.php?view_id but model example found with id selector like bellow,
Show Details
<div id="openModal" class="modalDialog">
X
<div>
X
<h2>Modal Box</h2>
</div>
</div>
How I can add href="details.php?view_id=" instead of #openModel ??
I am new learner, please help.
function edit_m_id(str){
var xhttp;
document.getElementById("edit_con_tent").innerHTML = "<center>loading.......</center>";
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("edit_con_tent").innerHTML = this.responseText;
}
};
xhttp.open("GET", "edit_m_con.php?q="+str, true);
xhttp.send();
}
Edit
<div id="small-modal" class="modal fade" 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 Header</h4>
</div>
<div class="modal-body">
<span id='edit_con_tent'></span>
<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>
Im trying to make the modal show in the condition is met but the problem is no modal is showing, can someone help me about this? The php code is below of the modal code.
here's the php
<?php
session_start();
include_once("connection.php");
if (isset($_POST['login']))
{
$stud_no = $_POST["stud_no"];
$password = $_POST["pword"];
$name = mysqli_real_escape_string($con, $stud_no);
$password = mysqli_real_escape_string($con, $password);
$select_user = "SELECT * FROM student_accounts WHERE stud_no ='$stud_no' AND password ='$password'";
$run_user = mysqli_query($con, $select_user);
$check_user = mysqli_num_rows($run_user);
if ($check_user > 0)
{
$_SESSION['stud_no'] = $stud_no;
header('location: home.php');
}
else
{
echo '<script>$("#myModal").modal()</script>';
}
}
?>
here's the modal
<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>
You just need to INCLUDE jQuery library before PHP code run, as well as bootstrap JS. And see the results, it will worked.
IF still not worked use below code to echo your script::
echo '<script type="text/javascript">'
. '$( document ).ready(function() {'
. '$("#myModal").modal("show");'
. '});'
. '</script>';
Replace below line
echo '<script>$("#myModal").modal()</script>';
with
echo '<script>$("#myModal").modal('show')</script>';
First include JQUERY CDN in the tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
if (condition === true) //Strict comparison
$(document).ready(function(){
$('#form').modal('show');
});
else
......
N/B #form is the ID for the modal
Hi I want to open modal after I click on button. But I want to display different content on the basis on which button I click.
So in html I have:
<h1>article1</h1>
<div class="btnComment">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Comment button 1</button>
</div>
<h1>article2</h1>
<div class="btnComment">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Comment button 2</button>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Comments</h4>
</div>
<div class="modal-body">
<?php
mysql_query("set names 'utf8'");
$selectConf = mysql_query("SELECT * FROM e_comments WHERE article='".$article."'");
$count = 0;
if($selectConf){
while ($row = mysql_fetch_array($selectConf)) {
$text = $row['text'];
echo $text;
}
}
?>
</div>
</div>
</div>
</div>
So how can I know in modal which button was clicked? And how I can pass some variable throw it? I want to show comments of article. So I need to pass id of article and select all comments where is id of article same.
There's a direct example on the bootstrap page at http://getbootstrap.com/javascript/#modals-related-target. Here is the equivalent code for your dialog
<script>
$(document).ready(function () {
$('.bs-example-modal-lg').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
alert(button.html())
})
})
</script>
edit : you'd have to change the alert() part to whatever if else logic you want.
I'm trying to loop through an array of videos and create a button/modal combo for each. I'm having an issue with the need for id="myModal". Each video's button links to the same video. How would I go about keeping these unique? I've tried changing id to class, but that wasn't working.
<?php foreach ($thisVideos as $video):?>
<button class="btn btn-primary link">Video</button>
<div id="myModal" class="modal fade" 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>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script>
$('.link').click(function () {
var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
<?php endforeach; ?>
Your approach is wrong, you only need one modal element and one script (and one event handler...) so you put these outside of the loop. You can add the url in a data attribute in your video list and then you can do everything you need to do.
A simple example with your code:
<?php foreach ($thisVideos as $video): ?>
<button class="btn btn-primary link"
data-url="http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>">Video</button>
<?php endforeach; ?>
<div id="myModal" class="modal fade" 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>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script>
$('.link').click(function () {
// get the url from the data attribute
var src = $(this).data('url');
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
May be this help you
<?php foreach ($thisVideos as $key=>$video):?>
..............
<div id="myModal_<?php echo $key; ?>" class="modal fade"
....................
..............
<script>
$('.link').click(function () {
var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
$('#myModal_<?php echo $key; ?>').modal('show');
$('#myModal_<?php echo $key; ?> iframe').attr('src', src);
});
$('#myModal_<?php echo $key; ?> button').click(function () {
$('#myModal_<?php echo $key; ?> iframe').removeAttr('src');
});
</script>
<?php endforeach; ?>
Hope you understand and it helps you.
Note Its not a good way.It just solves the way you want.
The trick is to have an unique id for #myModal and this can by done in so many different ways.
You can easily set a counter in your loop, for example,
$counter = $counter++;
Append
<div id="myModal_<?=$counter?>"
and in the js you should have
$('#myModal_<?=$counter?>')
This will give the video button link unique ids and all the video links will work.