You can use class="modal show" to open the modal, but it won't toggle close. I am doing this only in html and need to limit the use of Javascript I use. I am not sure if there is another command to do this in html?
<?php
$row="1";
if(isset($_REQUEST['submitted'])) {
$Page = $_SERVER['REQUEST_URI'];
$page = explode('?', $Page);
if(isset($page[1])) {
if(strpos($page[1], '&') != false) {
$PAGE = explode('&', $page[1]);
$searchString = $PAGE['1'];
if($searchString == $row) {
print "
<div class='modal show' style='z-index:10000' id=\"$row[auditID]\" role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h4 class='modal-title'>Perform Audit</h4>
</div>
<div class='modal-body' >
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>No</button>
</div>
</div>
</div>
</div>
";
}
}
}
}else {
?>
Test
<?php } ?>
You should remove "show" class in your modal, add it an id like "myModal" and using default script from Bootstrap.
Your modal initializes and invokes show immediately
$('#myModal').modal('show')
<div class='modal' role='dialog' id="myModal">
....
</div>
Related
This is my code, i was supposed to get the "$pw" outside the modal.. But it seems that i can't get the value of it and Also i can't seem to fetch the "$errMSG" value.. If it's if($pin != $pww) cant get the err MESSAGE.. Really need some help.. Thank you!
This is my "$pw" code, its on the same page as my modal..
<?php
include('connectdb.php');
$sql = "SELECT * FROM accounts WHERE usernamee='$userid'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($data = $result->fetch_assoc()) {
$pww = $data['passwordd'];
}
}
?>
This is my modal code:
<div class="container">
<form method="post">
<h2>Enter your Pin Number</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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">Enter your Pin Number</h4>
</div>
<div class="modal-body text-center">
<input type="password" id="first-name" required="required" class="form-control" name="pin">
<?php
if(isset($errMSG)){
?>
<div class="alert alert-danger">
<span class="glyphicon glyphicon-infos-sign"></span> <strong><?php echo $errMSG; ?></strong>
</div>
<?php
}
else if(isset($successMSG)){
?>
<div class="alert alert-success">
<strong><span class="glyphicon glyphicon-info-sign"></span> <?php echo $successMSG; ?></strong>
</div>
<?php
}
?>
</div>
<div class="modal-footer">
<button type="submit" name="submit3" class="btn btn-default"><i class="fa fa-key"></i> Confirm Pin</button>
</div>
</div>
</div>
</div>
<!-- START OF PHP -->
<?php include ('connectdb.php');
if(isset($_POST['submit3']))
{
$pin = $_POST["pin"];
if ($pin != $pww) {
$errMSG= "WRONG PIN.. TRY AGAIN..";
}
else{
header('Location: myorders.php');
}
} // SUBMIT
?>
</form>
</div>
include('connectdb.php');
$pww = '';
$sql = "SELECT * FROM accounts WHERE usernamee='$userid'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($data = $result->fetch_assoc()) {
$pww = $data['passwordd'];
}
}
Try this code, You should declare pww before your if or while brackets, to get acces to this variable.
I am building a simple blogging application in php and html, and when i generate my modals (using the javascript fetch() command) with database data, the modal trigger does not work. Here is the generation code:
Javascript:
function RetrieveArticles() {
fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
document.getElementById('container-articles').innerHTML = data;
})
}
Php:
require('../../settings.php');
try{
/* Create a new PDO object */
$connect = new PDO("mysql:host=$databaseHost;dbname=$databaseName",
$databaseUser, $databasePassword);
/* set the PDO error mode to exception */
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
/* Redirect the user with errorcode 1: "Database settings are incorrect" */
header('location: ../pages/error.php?errcode=1');
exit();
}
$stmnt = $connect->prepare("SELECT * FROM blog_articles NATURAL JOIN article_text;");
$stmnt->execute();
$result = $stmnt->fetchAll(PDO::FETCH_ASSOC);
if(count($result) > 0){
foreach($result as $data){
echo "<div class='row'>";
echo "<div class='collection container-collection'>";
echo "<a class='blog-clicker modal-trigger' href='#$data[article_id]'>";
echo "<p>"."<span class='article-title'>".$data['article_name']."</span>"."<br/>"."By ".$data['article_user'].", ".$data['article_made']."</p>";
echo "</a>";
echo "</div>";
echo "</div>";
echo "<div id='$data[article_id]' class='modal'>";
echo "<div class='modal-content'>";
echo "<h5>".$data['article_name']."</h5>";
echo "<p>".$data['article_text']."</p>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<div class='divider'></div>";
echo "<button type='button' class='modal-close btn left indigo darken-3'>"."Close Article"."</button>";
echo "</div>";
echo "</div>";
}
}else{
echo "<p class='center-align'>"."No Articles Found"."</p>";
}
And this is how i gets displayed in the webbrowser:
<div id="blog-wrapper">
<div class="c-12" id="container-articles">
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884499GuylianWasHier">
<p><span class="article-title">Test Modal 1</span><br>By GuylianWasHier, 2018-06-01 20:21:39</p>
</a>
</div>
</div>
<div id="art1527884499GuylianWasHier" class="modal">
<div class="modal-content">
<h5>Test Modal 1</h5>
<p>This is a simple modal test</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884802GuylianWasHier">
<p><span class="article-title">12</span><br>By GuylianWasHier, 2018-06-01 20:26:42</p>
</a>
</div>
</div>
<div id="art1527884802GuylianWasHier" class="modal">
<div class="modal-content">
<h5>12</h5>
<p>12</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527884806GuylianWasHier">
<p><span class="article-title">1234</span><br>By GuylianWasHier, 2018-06-01 20:26:46</p>
</a>
</div>
</div>
<div id="art1527884806GuylianWasHier" class="modal">
<div class="modal-content">
<h5>1234</h5>
<p>1243</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
<div class="row">
<div class="collection container-collection">
<a class="blog-clicker modal-trigger" href="#art1527885314GuylianWasHier">
<p><span class="article-title">23</span><br>By GuylianWasHier, 2018-06-01 20:35:14</p>
</a>
</div>
</div>
<div id="art1527885314GuylianWasHier" class="modal">
<div class="modal-content">
<h5>23</h5>
<p>23</p>
</div>
<div class="modal-footer">
<div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
</div>
</div>
<div class="row">
<!-- Form -->
<div class="collection container-collection">
<a class="modal-trigger blog-clicker" href="#createnewarticle">
<p id="title-createnewarticle">Create New Article</p>
</a>
</div>
</div>
The modals get initialized by a script that has the auto-init function from materialize in it (Which loads correctly into the webpage because a modal that has not been generated by php works fine).
Does anyone know how to fix this?.
If you want to have a better look at the code, here is the github repo: https://github.com/GuylianWasHier/Blog.php
You have to reinitialize modals after document.getElementById('container-articles').innerHTML = data;
Try this
function RetrieveArticles() {
fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
document.getElementById('container-articles').innerHTML = data;
// you can destroy previous instances instance.destroy();
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {});
})
}
I'm trying to send the get variable from a anchor href to modal. but I cant seem to get the variable $_GET['edit2']. when I try to echo the variable it echo null which is obtain from the else statement. Thank you in advance
Part 1 : used to check if the get variable have been submitted or not.
if(isset($_GET['edit2'])){
$_SESSION['reply_id'] = $_GET['edit2'];
$reply_id = $_SESSION['reply_id'];
}
else{
$reply_id = "null";
}
Part 2 : the anchor href
<a href='?edit2=". $row2['reply_id'] ."' data-toggle='modal' data-target='#myModal'><small>edit</small></a>
part 3 : the modal form
<div class='modal fade' id='myModal' role='dialog'>
<div class='modal-dialog'>
<!-- Modal content-->
<div class='modal-content row'>
<div class='col-12'>
<div class='modal-header'>
<h5 class='modal-title'>Edit Reply</h5>
<button type='button' class='close' data-dismiss='modal'>×</button>
</div>
<div class='modal-body'>
<form id='r_edit_form' method='post'>
<div class='row'>
<label class='col-12'>Reply :</label>
</div>
<div class='row'>
<textarea class='col-12' form='r_edit_form' name='description' rows='4'>". $reply_id ."</textarea>
</div>
<div class='row'>
<input class='col-12 btn btn-dark' type='submit' name='edit_reply'>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
</div>
I've got a problem adding ajax to my code. I'm trying to make my photogallery so I can put in images filtered by categories trough a form. After I put in ajax, my modal turns out blank like this:
But somehow it does display the thumbnail picture. It seems to not take the target id's of the modal.
Here's my ajax code:
function fotoalbumfilter() {
$.ajax({
url: '../ajax/fotoalbumfilter.php',
data: {
categorie: $('#fotoalbumfilter').val()
},
type: "POST",
dataType: 'json'
}).done(function(result) {
var jsonResult = result;
var outputgallery = jsonResult.outputgallery;
$('#output-gallery').html(outputgallery);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
});
};
$(document).ready(function() {
fotoalbumfilter();
});
my php code:
define('AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
if(!AJAX_REQUEST) { die();}
require_once('../app_config.php');
if($_POST['categorie']){ $categorie = $_POST['categorie']; }else{ $categorie = ''; }
$result = array();
if($categorie == ''){ $fotos = ''; }else{ $fotos = "WHERE (categorie_id = '".$categorie."')"; }
$r = 0;
$querycategorie = mysqli_query($con, "SELECT * FROM fotos ".$fotos." ORDER BY timestamp ASC");
while($uitkomst = mysqli_fetch_array($querycategorie)){
$weergave = 1;
$titel = $uitkomst['titel'];
$foto = $uitkomst['naam'];
$r++;
if($r == 1){ $outputgallery = '<div class="row">'; }
$outputgallery .= '<div class="col-lg-3 col-sm-4 col-md-4 col-xs-6 fotocontaineralbum">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="'.$titel.'" data-image="/images/fotoalbum/'.$foto.'" data-target="#image-gallery">
<img class="img-fluid" src="/images/fotoalbum/'.$foto.'">
</a></div>';
if($r == 4){ $outputgallery .= '</div>'; $r = 0; }
}
if($r !== 0){ $outputgallery .= '</div>'; }
$outputgallery = utf8_encode($outputgallery);
$result['outputgallery'] = $outputgallery;
echo json_encode($result);
and my html (with php dropdown):
<div class="container">
<div class="col-md-12 pagecontainer container">
<div class="row">
<div class="col-md-12">
<center><h2><span class="impactfont mcorange" style="margin:20px;">Het Fotoalbum</span></h2></center>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="categoriecontainer impactfont">
<select class="categoriedropdown" onchange="fotoalbumfilter()" id='fotoalbumfilter'>
<option>Kies een categorie</option>
<?php
mysqli_query($con, "SET CHARACTER SET utf8_general_ci");
$query = mysqli_query($con, "SELECT * FROM foto_categorie ORDER BY 'id' ASC") or die (mysqli_error($con));
while($uitkomst = mysqli_fetch_array($query)){
$categorie = $uitkomst["categorie"];
$id = $uitkomst["id"];
?>
<option value="<?php echo $id; ?>"><?php echo $categorie;?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-md-12 padding20 pagecontent">
<div id="output-gallery">
</div>
</div>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="image-gallery-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-fluid" src="">
</div>
<div class="modal-footer">
<div class="col-md-2 floatl">
<button type="button" class="btn btn-primary floatl" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">
</div>
<div class="col-md-2 floatr">
<button type="button" id="show-next-image" class="btn btn-default floatr">Next</button>
</div>
</div>
</div>
</div>
</div>
The issue is that you do not instruct the modal to update its contents. You can do so by adding the following javascript next to your existing one. Basically this updates the contents of the modal depending on which button was clicked. The functionality is explained in detail in the Bootstrap docs under the Varying modal content section.
$('#image-gallery').on('show.bs.modal', function (event) {
var thumbnail = $(event.relatedTarget),
imageSrc = thumbnail.data('image');
$('#image-gallery-image').attr('src', imageSrc);
});
I have a form that is posting sessions back to my index page. Based on those sessions I am using echo to load a modal window from the results. I keep getting a 500 error. I can't figure out why.
if($_SESSION["submitemail"] == "fail"){
echo
"<script type='text/javascript'>
$(window).load(function(){
$('#betaalert').modal('show');
});
</script>
<div class='modal fade' role='dialog' id='formerror'>
<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'>Could not send message...</h4>
</div>
<div class='modal-body'>
<?
echo '<p>We are very sorry, but there were error(s) found with the form you submitted.</p>';
echo '<p>These errors appear below.</p><br /><br />';
echo $_SESSION['errormessage'].'<br /><br />';
echo '<p>Please go back and fix these errors.</p><br /><br />';
?>
</div>
<div class='modal-footer'>
<a href='#' class='btn btn-primary' data-dismiss='modal'>Close</a>
</div>
</div>
</div>
</div>";
}
else if($_SESSION["submitemail"] == "success"){
echo
"<script type='text/javascript'>
$(window).load(function(){
$('#betaalert').modal('show');
});
</script>
<!-- Modal -->
<div class='modal fade' role='dialog' id='formsent'>
<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'>Thank You <? echo $_POST['first_name']; ?> <? echo $_POST['last_name']; ?>!</h4>
</div>
<div class='modal-body'>
<?
echo '<p>We appreciate your business and will be contacting you as soon as possible. Please allow 48 hours for us to process your request before sending another. Thank you!/p>';
?>
</div>
<div class='modal-footer'>
<a href='#' class='btn btn-primary' data-dismiss='modal'>Close</a>
</div>
</div>
</div>
</div>";
}
else {
echo
"<script type='text/javascript'>
$(window).load(function(){
$('#betaalert').modal('show');
});
</script>
<!-- Modal -->
<div class='modal fade' role='dialog' id='betaalert'>
<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'>ANNOUNCEMENT!</h4>
</div>
<div class='modal-body'>
<p>However we are pleased to announce that our beta testing program is open to all ambulance companies interested. If you are interested use the contact form on the bottom of this page to send us a message with your contact information and we will get you started with testing ASAP!</p>
</div>
<div class='modal-footer'>
<a href='#' class='btn btn-primary' data-dismiss='modal'>Close</a>
</div>
</div>
</div>
</div>";
}
Nevermind, I figured it out! Thank you though, and for the future, I will make sure to post more information.