Message of the day system - javascript

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>

Related

Javascript cookie dismiss forever

I have modal pop-up that asks users if they would like to subscribe to my newsletter. If the user closes the modal I don't want it to appear again. Using my code below the pop-up is shown frequently multiple times a day. What would I need to add so that once dismissed the pop-up wouldn't appear again?
//custom.js
if (!readCookie("close_subcribeModal")) {
function subcribeModal() {
$("#subcribeModal").modal("show");
}
setTimeout(function () {
subcribeModal();
}, 5000);
}
Web page:
#if(!isset($_COOKIE['close_subcribeModal']) && #$_COOKIE['close_subcribeModal'] != "1")
<div id="subcribeModal" tabindex="-1" role="dialog" aria-labelledby="subcribeModalLabel" aria-hidden="true">
<div role="document">
<div class="modal-content">
<button type="button" id="subcribeModal__close" class="cancel" data-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<h2 class="title">Welcome</h2>
<p>Would you like to receive our weekly newsletter?</p>
<x-mail.newsletter-subscription />
</div>
</div>
</div>
</div>
#endif
It looks like you are using Bootstrap, when the modal window gets hidden (or closed) the event hidden.bs.modal gets triggered.
So we create a cookie if the event occurs (add this on the bottom of your view)
$("#subcribeModal").on('hidden.bs.modal', function() {
Cookies.set('modalShowed','active');
});
Change if (!readCookie("close_subcribeModal")) to if(Cookies.get('modalShowed') != 'active')
and get rid of this if statement #if(!isset($_COOKIE['close_subcribeModal']) && #$_COOKIE['close_subcribeModal'] != "1") on your view.

Bootstrap modal doesn't work on live server

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.

Pass Values to Bootstrap Modal JavaScript and PHP

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>';

onClick checkbox save value or echo for later use

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>

How clear the previous data while open the bootstrap modal?

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
});

Categories