I have tried to find this out here and not found what I was looking for.
The Goal: After a process has completed, to display a Bootstrap Modal that notifies the user it is complete (and/or that the admin may need to authorize something, for example, a comment may need to be authorized ...).
I can output a JavaScript script (sounds redundant as I type that) that will open the modal, but I want to pass text to the modal so I can have a reusable dialog. Here's the basic code I am working with:
The modal form:
<!-- language: lang-html -->
<!-- meant to be an alert dialog -->
<div id="myAlert" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<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>
<h3 class="modal-title" id="descModalLabel"></h3>
</div> <!-- / modal-header -->
<div class="modal-body">
<!-- some text will be inserted here -->
</div><!-- / modal-body -->
<div class="modal-footer" -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- /modal-dialog -->
</div> <!--/ modal -->
<!-- end of modal form -->
<!-- end snippet -->
The JavaScript to open the form:
// for the myAlert modal:
// code to open the modal with the caption and description:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
// need to get these values passed somehow
var caption = "Test";
var description = "Test Test Test";
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
// when modal closes, clear out the body:
$('#myAlert').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
The PHP that outputs the script that actually opens it:
echo '<script>';
// how do I pass the variables???
echo '$("#myAlert").modal("show")';
echo '</script>';
I would like to be able to pass the caption and description values to the form, but cannot figure it out. I have a version that works with a button based heavily on the Bootstrap site, but I cannot figure this one out. Thanks in advance!
There are probably better solutions out there but this one works too as I have tested already. It requires to take 3 steps:
You need to declare your variables you want to pass to JavaScript above all events and functions (make them global).
For example:
var global_caption = "Some default caption";
var global_description = "Some default description";
// All scripts now go here
In your modal you assign local variables from global variables (or use global variables directly) for some events, for example:
This will show basically the same thing as in your case so far:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
var caption = global_caption;
var description = global_description;
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
With echo you assign new values to global variables and summon the event again.
Declaration can go as simply as:
echo '<script>';
echo 'global_caption = "This is a new caption"';
echo 'global_description = "This is a new description"';
echo '$("#myAlert").modal("show")';
echo '</script>';
Related
Trigger Button:
while ($row = mysqli_fetch_array($result)) {
$name = $row['name'];
$id = $row['id'];
echo '<a data-target="#exampleModal" class="wpmui-field-input button wpmui-submit button-primary" data-toggle="modal" data-whatever="'.$name.'">Details</a>';
echo $id . "<br>";
}
Modal:
echo'
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<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="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<textarea class="form-control"></textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>';
JavaScript:
echo'
<script type="text/javascript">
window.onload = function () {
$("#exampleModal").on("show.bs.modal", function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data("whatever") // Extract info from data-* attributes
var modal = $(this)
modal.find(".modal-title").text("New message to " + recipient)
modal.find(".modal-body textarea").val(recipient)
})
}
</script>';
Now I have all these codes above that will generate a Modal Box when clicked on that Trigger Button. This code seems to work fine in my localhost but it doesn't act the same in my server, and the values returned are undefined. Now, I think it might have something to do with the PHP Version, because my localhost has PHP7 and my server has PHP5. Does this mean in PHP5 does not support value field (JavaScript is .val()) in the <textarea> tag as in <textarea value="something">?
Even if that's the case, what is the workaround for this problem? I tried using .html() and .text() but all it does is overwriting the value, and when you open up the modal box once again, the value will be the same for ALL modal boxes (whereas it should be different value for each recipient modal box).
It seems you have'nt included necessary jquery and style files.try including bootstrap.js, jQuery.min.js
This one might be helpful for you
www.bootply.com/mRbjbQ1JAB
Good Luck.
Use chrome developer tools or in firefox depending on your browser, click on the network tab and load the page the modal is supposed to appear, check all the files listed in the network tab of developer tools for anyone with 404 not found, that is possibly what is missing.
I've got some code that is loaded on my footer via jquery (So that every page visited has the code on its page)
This code is meant to check a database and, if any responses, send a bootstrap modal to the client. When the modal is sent, the row is deleted from the database. Each user has their own row in the database when an update happens.
The footer code is reloaded every 10 seconds to check if there are any updates to the relative table.
This works, except even after the row is deleted, PHP seems to execute code inside my if blocks that shouldn't be executeted, as it is causing the modal to close or pile up on top of eachother, forcing the client to reload their page to continue browsing.
So lets say a client loads the index page, and they have a pending message waiting for them.
The modal is sent for the user to close manually. If the user waits more than 10 seconds, the modal will close itself but the backdrop will remain, making it so the user cannot click anything until the page is reloaded. If the user waits another 10 seconds, another backdrop is added, darkening the screen. This goes on and on until the screen is completely black or the client reloads the page.
The code that opens the modal is inside of 2 if blocks basically stating that it should not be executed.
Here is my reloading code:
<?
include("dbConnect.php");
$sql = "SELECT DISTINCT Message,uniqueID from sendMessage WHERE UserID='".$_GET['userID']."';";
$ret = $db->query($sql);
$loop = 0;
$messages = array();
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
$loop++;
array_push($messages,array("uniqueID" => $row['uniqueID'], "Message" => $row['Message']));
}
if($loop != 0) {
if(!empty($messages)) {
?>
<script type="text/javascript">
$(document).ready(function () {
$('.modal').modal('hide');
$('#memberModal').modal('show');
});
</script>
<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel">
<div class="modal-dialog" role="document">
<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="memberModalLabel">Message from Administrators</h4>
</div>
<div class="modal-body">
<?
foreach($messages as $v) {
echo $v['Message'];
if($loop > 1) {
echo "<br><br>";
}
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?
foreach($messages as $v) {
$sql2 = "DELETE from sendMessage where uniqueID='".$v['uniqueID']."';";
$ret2 = $db->exec($sql2);
}
}
}
?>
As far as I can tell, all the imports are correct (Otherwise the modal wouldn't work at all, right?)
Here is the jquery in my footer:
<div id="links"></div>
<script>
function loadlink(){
$('#links').load('templates/sendMessage.php?userID=<?=$userInfo['uniqueid'];?>',function () {});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 10000);
</script>
--edit--
I suspect my issue is because the div is reloaded again while the modal is open, therefore breaking it because it is erasing the code the modal is in. I'm not sure how to combat this.
The code is not complete, but from what I can tell your ajax script should only send the content of the modal, not the whole modal, append() it in (or use html() if you want to remove the previous messages) <div class="modal-body"> and then show the modal. Now you are inserting the whole modal code inside the modal and get a babushka effect.
-- EDIT --
In your php script, return only the messages, not the modal html:
[...]
if($loop != 0) {
if(!empty($messages)) {
foreach($messages as $v) {
echo $v['Message'];
if($loop > 1) {
echo "<br><br>";
}
}
[...]
The in the footer
<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel">
<div class="modal-dialog" role="document">
<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="memberModalLabel">Message from Administrators</h4>
</div>
<div class="modal-body">
// mesages will be inserted here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function loadlink(){
$('.modal-body').load('templates/sendMessage.php?userID=<?=$userInfo['uniqueid'];?>',function () {
// maybe add a condition to see if nothing is returned
// and not show it
$('#memberModal').modal('show');
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 10000);
</script>
I'm using Wordpress to create my theme on selling boats. So far I got this plugin Search and Filter to work on selecting what kind of boat the custom wants.
Now after the custom has the options for the boat they want I want to have an checkbox (or something else) to save this boat or boats if more are available.
So I can sent a contact message (contact form 7) that displays the boats that the customer has selected, so I know what information he or she wants.
Using this code:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
Example | Source (credits go to: T.J. Crowder)
I can output a true or false value but not (at the moment) the name of the boat.
Is there a good way to make this work?
In my header I have started a session
<?php
session_start();
?>
So I could be able to echo values from anywhere right? I know the script and the session are separate things. But what would be the best way to solve my question?
UPDATE:
Ok i found this bootstrap modulo code that lets me do 'stuff' with ajax and probably write in my session. Can someone tell me how I do this?
<script>
$('.post-<?php the_ID(); ?>').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".post-<?php the_ID(); ?>" data-whatever="#mdo">Open modal for #mdo</button>
<div class="modal fade post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<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="exampleModalLabel"><?php the_title(); ?></h4>
</div>
<div class="modal-body">
<p>Boot <?php the_title(); ?></p>
<hr>
<p><?php the_title(); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>
Main page contains the google map(div), after selecting state from map, i will try to open bootstrap modal and load the selected county map inside the bootstrap.
Firsttime click Texas state(javascript ShowModalDialog() called) then bootstrap modal alert shows Texas then close.
Second time Ohio is selected, now first alert showing Texas then Ohio.
Why the previous state is showing here?
<script type="text/javascript">
function ShowModalDialog(stateid) {
$('#myModal').modal('show').on('shown.bs.modal', function () {
alert(stateid);
$("#myModal #myModalLabel").html(document.getElementById("statename").value);
var datajson = GetCountyData(stateid);
});
}
</script>
<!-- Modal -->
<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="color: #808080">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
....
....
..
.
</div>
</div>
</div>
</div>
I think this is bug in bootstrap, because i have several ways to clear modal
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
But stil got no 'perfect' solutin, becasue with every new call, modal on screen goes a little down, than in firebug i saw there is a lots of modal there just hidden, than i found
http://bootboxjs.com/
And all my problem were solved
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
I have problem with jquery $.post function. I use this function a lot and same function works fine except in one case and I don't understand why it keeps redirecting me after script was executed, here is js code:
var record;
$('.delbtt').on('click', function(e){
e.preventDefault();
var deleteid = $(this).parent().parent().find('#id').text();
record = $(this).parent().parent();
$('#delrecord').empty().val(deleteid);
});
$(document).on('submit', '#delteform', function() {
var formData = $(this).serialize();
$.post('includes/delete.php',formData,processData);
function processData(data){
record.remove();
};
});
HTML:
<!-- Modal -->
<div class="modal fade" id="deleteFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form id="deleteform" class="form-horizontal" role="form" action="includes/delete.php" method="POST"> <!-- -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete record</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this person?</p>
</div>
<input type="hidden" id="delrecord" name="delrecord" value="" />
<div class="modal-footer">
<button type="button" class="btn btn-default empty" data-dismiss="modal">Cancel</button>
<button id="delentry" type="submit" class="btn btn-danger">Delete Person</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I know that function is executed successfully, because if I put alert("Why is this not working?"); after record.remove();, I can see alert and in background code executed, but instead of staying at the same page it redirects me to 'includes/delete.php'. I tried disabling all other $.post functions that I have in my JS, I tried using $('#deleteform').submit(), I tried putting it outside of my main $(document).ready(function() {}); same results... Always same result it redirects me after function completes instead of staying on a page. Does anybody have idea why am I getting this behavior?
php code:
<?php
include('budgetprop/Initialize.php');
Database::GetInstance()->ConnectToServer($errors);
$record = $_POST['delrecord'];
# CONNECT TO DB
if(Database::GetInstance()->ConnectToServer($errors)){
$insertSQL1 = "DELETE FROM salaries WHERE record_id = '".$record."' ";
$stmt1 = sqlsrv_query(Database::GetInstance()->databaseConnection, $insertSQL1);
# IF THERE IS AN ERROR
if(!$stmt1){
echo "Error, cannot delete record";
}else{
Database::GetInstance()->LastInsertId($stmt1);
}
# IF ALL QUERIES WERE SUCCSESSFUL, COMMIT THE TRANSACTION, OTHERWISE ROLLBACK
if($stmt1 && !$errors){
sqlsrv_commit(Database::GetInstance()->databaseConnection);
# FREE THE STATEMENT
Database::GetInstance()->FreeDBStatement($stmt1);
echo "success";
return true;
}else{
sqlsrv_rollback(Database::GetInstance()->databaseConnection);
# FREE THE STATEMENT
Database::GetInstance()->FreeDBStatement($stmt1);
return false;
}
# NO CONNECTION WAS MADE
}else{
return false;
};
?>
preventDefault() doesn't work either
It sounds like your form is still being submitted, hence the redirect. You can stop it with preventDefault()...
$(document).on('submit', '#deleteform', function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.post('includes/delete.php',formData,processData);
function processData(data){
record.remove();
};
});
Assuming "deleteform" is the ID of a form element on your page, within which you have an input or button of type "submit", I would suggest changing the delentry button to have a type of "button".
Most browsers will perform a POST/GET on a form that has an input or button of type submit when that button is clicked.
I would then update your jQuery event handler to select the button and specify an onclick event:
$('#delentry').click(function() {
...
});
If you wish to maintain some form of graceful degradation, you could leave the markup as a submit type button and on $(document).ready(), update the type of the button to be "button".