We Keep Coding

Javascript/JQuery Callback confusion

I've a Modal which I show for confirmation:
<div class="modal" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
... Body ...
<div class="modal-footer">
<button type="button" id="btnCancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="btnOk" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
Here is the code for showing the above Modal..
var M = {
confirm: function(body, yes, no) {
$('#btnCancel').on('click', function() {
$('#btnCancel').off();
$('#confirm-modal').modal('hide');
if (no) {
return no();
}
});
$('#btnOk').on('click', function() {
$('#btnOk').off();
$('#modal').modal('hide');
if (yes) {
return yes();
}
});
}
}
And here is how I am using it... (In any view for example)
M.confirm("Body", function(){
// Function Body
})
Now, the problem is: If I call confirm, it shows the Modal. But if I click Cancel and than again call confirm and this time, I hit OK: the function (second param in the snippet above) is called twice. If I hit cancel 10 times, the function above is called 10 times.
Any idea why this is happening?
Thank You.

Every time you call confirm you add an event handler to each of btnCancel and btnOk.
However, you only remove the effect handler on one of those buttons when that button is clicked.
So if you call confirm, then click btnCancel, then call confirm you'll have two event handlers on btnOK: One from the first call to confirm and once from the second.
When either button is clicked you need to remove both event handlers.
… or just add the event handlers when the document is loaded and don't touch them thereafter.

Invoke Ajax function from Bootstrap modal button

I'm looking to invoke an ajax function after clicking an option from a bootstrap confirmation modal. the confirmation modal will be open through function remove(parameter)
Any help will be appreciated
function remove(parameter){
// $("#remove-modal").modal('show');
/*
if( modal clicked Yes){
..perform ajax call using 'parameter'
}
*/
}
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="remove-modal">
<div class="modal-dialog modal-sm">
<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">Do you want to remove this item?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="modal-btn-si">Yes</button>
<button type="button" class="btn btn-primary" id="modal-btn-no" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>

You could just add an event listener for the yes button.
As the event varies every time the modal is shown you remove it before adding the new one.
remove(parameter) {
var yesButton = $("#modal-button-si");
yesButton.off("click");
yesButton.click(function(){
//perform ajax here
});
}

I would assume adding a click handler to the "Yes" button, after the modal is shown, should work. Something like:
function remove(parameter){
// show the dialog
var m = $("#remove-modal").modal('show');
// find the button in your modal, and attach an event
// handler to it's click event
m.on('shown.bs.modal', function(){
m.find('#modal-btn-si').on('click', function(e){
// do something here...
// When you're ready to dismiss the modal, call:
//
// m.modal('hide');
//
// Make sure this is in the callback for your
// AJAX event, unless you want the modal dismissed
// as soon as the button is clicked
});
});
}

Message of the day system

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>

Clear modal fields after closing modal

I have this modal
<form id="contactModal">
<div id="mymodal2" class="" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<span class="modal-title th2" id="lblModalLabel" name="lblModalLabel">Contact</span>
</div>
<div class="modal-body">
What I want is to clear modal every time its closed so I wrote a script like this:
function clear() {
$("#txtNombreCompleto").val("");
$("#txtNombreEmpresa").val("");
$("#exampleInputEmail2").val("");
$("#dropOficina").val("");
$("#txtTelefono").val("");
$("#txtMensaje").val("");
}
$('#mymodal').on('hidden', function(){
$.clear(this)
});
So my inputs inside the modal are something like this:
<input type="text" class="form-control" id="txtNombreCompleto" name="txtNombreCompleto" placeholder="Nombre completo">
But when I close the modal, it doesn´t run the function, how can I run the function when the modal closes? Regards

Simply call clear(); inside bootstrap modal hide.bs.modal event(or hidden.bs.modal) handler or set the function as callback. Also put your code inside document ready handler for attaching event handler after loading the page.
$(document).ready(function() {
$('#mymodal').on('hidden', function() {
clear()
});
});
or get all form all elements inside modal and set value
$(document).ready(function() {
$('#mymodal').on('hidden', function() {
$(':input', this).val('');
});
});

I tried this code in my project but it didn't work. So I tried this new code
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});
});

$('.btnLogMesaj').click(function () { // your button is clicked
$('div#demo').empty(); // clear the "div" of the id "demo"
*
*
*
});
<div class="modal-body">
<div id="demo">
<h4>... Merve's contents </h4>
</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
});