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.
Related
I passing the user role from PHP $session['role'] tags and then try to hide and show the div on page load event based on if(!sessionRole=='admin') statement using jQuery.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/ecmascript"> //script to hide show page on page load.
$(document).ready(function{
var sessionRole=<?php echo $session_ROLE ?>
if(!sessionRole=='admin'){
$('#admin_tool').hide();
}
});
</script>
<div class="col-md-4" >
<div class="widgets" style="margin-top: 15px;">
<div class='Recent'id='admin_tool' > // dive that i want to hide and show
<h4>Tools</h4>
<hr>
<div class='container'>
<div class='row'>
<div class='col'><button type='button' id="btn" class='btn btn-success btn-lg' style='min-width: 150px;'>Publish</button></div>
<div class='col'><button type='button' id="btn2" class='btn btn-warning btn-lg'style='min-width: 150px;' >Oppose</button></div>
</div>
<div class='row' style='margin-top: 10px;'>
<div class='col'><button type='button' class='btn btn-info btn-lg' style='min-width: 150px;'>Unpublish</button></div>
<div class='col'><button type='button' class='btn btn-danger btn-lg' style='min-width: 150px;'>Delete</button></div>
</div>
</div>
</div>
</div>
Don't!
If you want to securely hide something to a type of user, do it from the server.
Wrap the HTML lines for admin in a if condition.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div class="col-md-4" >
<div class="widgets" style="margin-top: 15px;">
<?php
if($session_ROLE == "admin"){
?>
<div class='Recent'id='admin_tool' > // dive that i want to hide and show
<h4>Tools</h4>
<hr>
<div class='container'>
<div class='row'>
<div class='col'><button type='button' id="btn" class='btn btn-success btn-lg' style='min-width: 150px;'>Publish</button></div>
<div class='col'><button type='button' id="btn2" class='btn btn-warning btn-lg'style='min-width: 150px;' >Oppose</button></div>
</div>
<div class='row' style='margin-top: 10px;'>
<div class='col'><button type='button' class='btn btn-info btn-lg' style='min-width: 150px;'>Unpublish</button></div>
<div class='col'><button type='button' class='btn btn-danger btn-lg' style='min-width: 150px;'>Delete</button></div>
</div>
</div>
</div>
<?php } // End if admin
?>
</div>
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>
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>
Good day, I am displaying members of a team each on a DIV. For each DIV, there is a message button for a user to send message. The message button fires up a Bootstrap modal dialog box where one can type the message. Now, my problem is that I want the name of person the message is being sent to, to appear at the top of the dialog box but it is not working. It only shows the name of the first person in the database even when I click on the third person.
<?php
require_once "include/db_handle.php";
$sql = "SELECT i.*, m.* FROM addclique i JOIN members m ON m.id = i.clique_id WHERE adder_id = :id";
foreach ($db->query($sql, array('id' => $_SESSION['id'])) AS $result)
{
echo "
<div class='user_container'>
Name: </span> {$result['surname']} {$result['firstname']}</br>
<a href='test.php' class='' data-toggle='modal' data-target='#basicModal'>Send Message</a>
</div>
<div class='modal fade' id='basicModal' tabindex='-1' role='dialog' aria-labelledby='basicModal' 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 points' id='myModalLabel'><span style ='color:black;'>To:</span> {$result['firstname']} </h4>
</div>
<div class='modal-body'>
<form action='send.php' method='POST'>
<textarea name='message' rows='10' cols='65'></textarea></br>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
<button type='button' class='btn btn-primary' data-dismiss='modal'>Send Message</button>
</div>
</div>
</div>
</div>
</div>";
}
?>
<a href='test.php' class='' data-toggle='modal' data-target='#**basicModal**'>Send Message</a>
<div class='modal fade' id='**basicModal**' tabindex='-1' role='dialog' aria-labelledby='basicModal' aria-hidden='true'>
If you really want to do a modal for each user, consider do a variable for your modals.
Not sure, but something like that.
var $counter = 0;
foreach ($db->query($sql, array('id' => $_SESSION['id'])) AS $result)
{
echo "
<div class='user_container'>
Name: </span> {$result['surname']} {$result['firstname']}</br>
<a href='test.php' class='' data-toggle='modal' data-target='#basicModal".<?= $counter ?>." '>Send Message</a>
</div>
<div class='modal fade' id='basicModal".<?= $counter ?>."' tabindex='-1' role='dialog' aria-labelledby='basicModal' 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 points' id='myModalLabel'><span style ='color:black;'>To:</span> {$result['firstname']} </h4>
</div>
<div class='modal-body'>
<form action='send.php' method='POST'>
<textarea name='message' rows='10' cols='65'></textarea></br>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
<button type='button' class='btn btn-primary' data-dismiss='modal'>Send Message</button>
</div>
</div>
</div>
</div>
</div>";
$counter++;
}
?>
You are creating modal for each user with same id i.e. basicModal. So if total user is 5 then 5 modal with same id is created on html page.
<a data-toggle='modal' data-target="#basicModal">Show Modal</a>
And in the above link you are calling #basicModal.So the js cant find the that particular user modal id because it is not unique.So it display the first modal with that id(or display none)
The problem should be solved if you use unique id in the link and modal .But a better option would be creating a single modal and setting the data through js so that multiple modal html is not placed in page.If you want to do it with jquery
Send Message
In jquery
$("#showModal").on("click",function(){
//set modal data
});