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>
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 continue with my new website and I'm trying the bootstrap framework and I would like modify a row, its fields, from a bootstrap modal window. At moment I show a modal windows with fields but I don't know to include the data from the row of the table :(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AddCloud - Producció</title>
<!-- INCLUDES -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>
</head>
<body>
<!-- SESSION PHP OK -->
<?php
session_start();
if(isset($_SESSION['username']) and $_SESSION['username'] <> ''){
?>
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="http://www.addvantage.es"><font color=#8abe44>AddCloud</font></a></div>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">Producció<span class="sr-only">(current)</span></li>
<li>Menu2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> <?php echo $_SESSION['username'] ?></a>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-wrench"></span> preferències</li>
<li><span class="glyphicon glyphicon-lock"></span> canviar password</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-log-out"></span> log out</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- TABLE -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">Miquel Alimentació</h1>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-6 col-md-offset-3"><h3>Edició 12</h3></div>
</div>
<hr>
<div class="row">
<?php
// Conexió a la base de dades
include("connect.php");
$conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass");
//query
$query = "SELECT * FROM produccion.ma_origen ORDER BY id_articulo ASC";
$result = pg_query($conn, $query);
//se despliega el resultado
echo "<table id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'
data-click-to-select='true'>";
echo "<thead class='thead-inverse'>";
echo "<tr>";
echo "<th data id='seleccion' data-switchable='false' data-checkbox='true'></th>";
echo "<th data id='pagina' data-sortable='true'>pagina</th>";
echo "<th data id='codigo' data-sortable='true' data-switchable='false'>codigo</th>";
echo "<th data id='descripcion' data-sortable='true' data-switchable='false'>descripcion</th>";
echo "<th data id='pvp-cat' data-sortable='true'>pvp-cat</th>";
echo "<th data id='pvp-lev' data-sortable='true'>pvp-lev</th>";
echo "<th data id='pvp-and' data-sortable='true'>pvp-and</th>";
echo "<th data id='pvp-cen' data-sortable='true'>pvp-cen</th>";
echo "<th data id='pvp-nor' data-sortable='true'>pvp-nor</th>";
echo "<th data id='pvp-vas' data-sortable='true'>pvp-vas</th>";
echo "<th data id='fecha-mod' data-sortable='true'>fecha-mod</th>";
echo "<th data id='user' data-sortable='true' data-visible='false'>user</th>";
echo "<th data id='edit' data-sortable='false' data-switchable='false'>edit</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while ($row = pg_fetch_row($result)){
echo "<tr>";
echo "<td></td>";
echo "<td>$row[2]></td>";
echo "<td>$row[3]</td>";
echo "<td>$row[4]</td>";
echo "<td>$row[5]</td>";
echo "<td>$row[6]</td>";
echo "<td>$row[7]></td>";
echo "<td>$row[8]</td>";
echo "<td>$row[9]</td>";
echo "<td>$row[10]</td>";
echo "<td>$row[11]</td>";
echo "<td>$row[12]</td>";
echo "<td><p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit' ><span class='glyphicon glyphicon-pencil'></span></button></p></td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
</div>
</div>
<hr>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p>Copyright © 2016 · All Rights Reserved · <a href="http://www.addvantage.es/" >http://www.addvantage.es</a></p>
</div>
</div>
<hr>
</div>
<!-- MODAL MENU -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Editar registre</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Pàgina">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Codi">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Descripció">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-cat">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-lev">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-and">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-cen">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-nor">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="pvp-vas">
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
</div>
</div>
<!-- SESSION PHP ERROR -->
<?php
} else{
?><p>La sesión no está activa, por favor ingrese aquí</p>
<?php
}?>
</body>
</html>
I use php to connect to database and add data into the table. My idea is from a edit button can modify this fields from a modal window. After that I would like to update database.
I'm not sure if this is the best way, I haven't a experience programming from web environment.
Please Could you help me to modify this data-fields from windows modal?
Thanks!
The way to try to do is correct. What you have to do is on clicking Edit link find the closest tr and find all the td that tr contain. Read td one by one the assign it to the text box.
Below is the code:
$('.edit').click(function(){
var $row = $(this).closest("tr"), $tds = $row.find("td"); //This will all the tds we need.
$.each($tds, function() {
$('#txtbox').val($(this).text()); //textbox in the modal window
});
});
The above code will fill all the values from the row to modal window after that you can modify and submit the form.
First step - identify row somehow. I'm working under assumption that $row[0] is the id of that row in the database. If it isn't change the code accordingly.
index.php
while ($row = pg_fetch_row($result)){
echo "<tr id="{$row[0]}">"; // assign id that corresponds to database id to each row
echo "<td></td>";
echo "<td class="pagina">$row[2]></td>";
echo "<td class="codigo">$row[3]</td>";
echo "<td class="descripcion">$row[4]</td>";
echo "<td class="pvp-cat">$row[5]</td>";
echo "<td class="pvp-lev">$row[6]</td>";
echo "<td class="pvp-and">$row[7]></td>";
echo "<td class="pvp-cen">$row[8]</td>";
echo "<td class="pvp-nor">$row[9]</td>";
echo "<td class="pvp-vas">$row[10]</td>";
echo "<td class="fecha-mod">$row[11]</td>";
echo "<td class="user">$row[12]</td>";
echo "<td>
<p data-placement='top' data-toggle='tooltip' title='Edit'>
<button class='edit' class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit'>
<span class='glyphicon glyphicon-pencil'></span>
</button>
</p>
</td>";
echo "</tr>";
}
Second, set jquery click event to copy values from rows and fill the modal input fields with correct values:
JQUERY
$('.edit').click(function(){
var row = $(this).closest("tr"), // edit button is in the same row as data you want to change
tds = row.find("td"); // get all table cells in that row
$.each(tds, function(index) {
if( $.inArray(index, [0, 10, 11, 12]) ) { // indexes of cells not to be used when getting data from table cells to edit
return; // skip to next loop iteration if one of these indexes
}
var input_name = $(this).attr("class"); // get name of cell we are evaluating (pagina, codigo, descripcion etc)
$([name='"' + input_name + '"']).val($(this).text()); //input name in the modal window
});
});
I've changed the modal to reflect changes in code above.
MODAL
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Editar registre</h4>
</div>
<form action="/store.php">
<div class="modal-body">
<input type="hidden" name="id" type="text"> <!-- hidden input for id -->
<div class="form-group">
<input class="form-control" name="pagina" type="text" placeholder="Pàgina">
</div>
<div class="form-group">
<input class="form-control" name="codigo" type="text" placeholder="Codi">
</div>
<div class="form-group">
<input class="form-control" name="descripcion" type="text" placeholder="Descripció">
</div>
<div class="form-group">
<input class="form-control" name="pvp-cat" type="text" placeholder="pvp-cat">
</div>
<div class="form-group">
<input class="form-control" name="pvp-lev" type="text" placeholder="pvp-lev">
</div>
<div class="form-group">
<input class="form-control" name="pvp-and" type="text" placeholder="pvp-and">
</div>
<div class="form-group">
<input class="form-control" name="pvp-cen" type="text" placeholder="pvp-cen">
</div>
<div class="form-group">
<input class="form-control" name="pvp-nor" type="text" placeholder="pvp-nor">
</div>
<div class="form-group">
<input class="form-control" name="pvp-vas" type="text" placeholder="pvp-vas">
</div>
</div>
<div class="modal-footer ">
<input type="submit" class="btn btn-warning btn-lg" style="width: 100%;" value="Update">
</div>
</form>
</div>
</div>
</div>
File for storing edited values to the database:
store.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$id = $_POST['id'];
$pagina = $_POST['pagina'];
$codigo = $_POST['codigo'];
$descripcion = $_POST['descripcion'];
$pvp-cat = $_POST['pvp-cat'];
$pvp-lev = $_POST['pvp-lev'];
$pvp-and = $_POST['pvp-and'];
$pvp-cen = $_POST['pvp-cen'];
$pvp-nor = $_POST['pvp-nor'];
$pvp-vas = $_POST['pvp-vas'];
$sql = "UPDATE produccion.ma_origen SET pagina='{$pagina}',codigo='{$codigo}',descripcion='{$descripcion}',
pvp-cat='{$pvp-cat}', pvp-lev='{$pvp-lev}',pvp-and='{$pvp-and}',
pvp-cen='{$pvp-cen}',pvp-nor='{$pvp-nor}',pvp-vas='{$pvp-vas}'
WHERE id={$id}";
if ($conn->query($sql) === TRUE) {
echo "Record updated successfully";
} else {
echo "Error updating record: " . $conn->error;
}
$conn->close();
?>
Since this was a lot of code to change and I don't have the time and all the data to test this properly you'll have to do it, but this is one of the ways you could solve your problem. Hope it helps.
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.
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
});