We Keep Coding

How to restart the Jquery events, to avoid the repetition of each one of them?

I have an index page that contains the following events.
<div id="sub_page"></div>
$(document).ready(function () {
$("a.menu_navegacion_abrircaja").on('click', function (ev) {
ev.preventDefault();
var href = “nombrecontrollerEJ/view_ej";
$.post(href, function (data) {
$("#sub_page").html(data);
});
});
});
In it, when you click, load the html contents of subpages in the div sub_page.
In view view view_ej, I bring html code and also, jquery code. The Jquery code of the view that is added to the index div is as follows:
$(document).ready(function () {
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert("hello");
});
});
By clicking on the link that contains the class "menu_navegacion_abrircaja", I get the alert ("hello");
But it turns out that there is a problem, for every time I click on the link, the alert messages are repeated (alert ("hello");). For example, the first time I click on the link that contains the class menu_navegacion_abrircaja, it works fine showing the alert once, but then I click again on the same link it shows me the alert twice, then I do it for the third time, He shows me three times the alert, and so on.
I would like to know how to solve this problem.
Will there be any way to restart the events or handler of the jquery, as are the events click, change, "hidden.bs.modal", etc., in such a way that their repetition of the events is avoided?
I have seen the methods unbind (), bind (), off (), which might be the solution, but if so, how could you apply them?

Maybe you could try something like this in the jQuery code of your subpage:
$(document).ready(function () {
$('#modal_establecer_turnos').off('hidden.bs.modal');
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert(“hello”);
});
});

Bootstrap 3 modal doesnt always activate ajax code

I'm sure there is a simple answer to this I just don't seem to be able to resolve it.
I am using the bootstrap modal to return ajax content from specified url. (using $.removeData() between loads to remove content).
The problem comes with running JS on content from the form presented in the modal.
I am currently using (simplified) from within the final file (returned by ajax):
$('#myModalLg').on('shown.bs.modal', function(e) {
$(this).on('submit', 'form', function(ev) {
... event handler for form...
});
});
EDIT: along with other event handlers (datepicker for within modal included) but this code is only loaded once and then fails to activate again until the full page is reloaded
On close code:
$('#myModal, #myModalLg').on('hidden.bs.modal', function (e) {
$(e.target).removeData();
$(e.target).off('shown.bs.modal');
$('#myModal, #myModalLg').on('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});
});
I would be expecting the handlers to run each time #myModalLg is shown and then when it is closed it removed what has been entered and restores each time but doesn't seem to work like that.

you never turn off your shown.bs.modal have you looked into the One Event In JQuery:
I'm not sure if this will help but it seems like your redeclaring your shown.bs.modal multiple times you might want to change that to a one instead of on
$('#myModal, #myModalLg').one('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});

How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

On zurb foundation's website at http://foundation.zurb.com/docs/reveal.php they listed some Options including
open: callback function that triggers 'before' the modal opens.
opened: callback function that triggers 'after' the modal is opened.
close: callback function that triggers 'before' the modal prepares to close.
closed: callback function that triggers 'after' the modal is closed.
But I have no idea how to use them with my modal.
I tried:
$('#myModal').closed(function()
{});
$('#myModal').trigger('reveal:closed')(
{});
$('#myModal').reveal.closed(function()
{});
$('#myModal').reveal().closed(function()
{});
I have Googled but found no hits. Anyone who can explain it or give me an example or provide a related link?
The suggestion given works, however
I have yet another closely related question for reveal():
Click Me For A Modal);
I tried to add one attribute like data-closeOnBackgroundClick="false" That doesn't seem to work. What should be the correct syntax? Will it work for callback function as well?

The above answer did not work for me. Here's what worked (Foundation 4 and jQuery):
$('#myModal').bind('opened', function() {
console.log("myModal opened");
});

Event Bindings for Zurb Foundation Reveal -
There are a series of events that you can bind to for triggering callbacks:
$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
If you have multiple data-reveal used in single page as follows :
<div class="content reveal-modal" id="element-1" data-reveal>
<div class="content reveal-modal" id="element-2" data-reveal>
Then in this situations you can trigger callback same as explained above but with little modification as shown below :
$(document).on('open.fndtn.reveal', '#element-1[data-reveal]', function () {
// your code goes here...
});
$(document).on('open.fndtn.reveal', '#element-2[data-reveal]', function () {
// your code goes here...
});

Call reveal like you normally would, but include the name of the option and corresponding function as an object:
//Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });

On Zurb Foundation v6, these events were renamed to xxx.zf.reveal:
closeme.zf.reveal Fires immediately before the modal opens. Closes any other modals that are currently open
open.zf.reveal Fires when the modal has successfully opened.
closed.zf.reveal Fires when the modal is done closing.
Source: http://foundation.zurb.com/sites/docs/reveal.html#js-events
Examples:
Generic callback that will fire for all modals:
$(document).on('open.zf.reveal', '[data-reveal]', function() {
console.log('This works');
});
Callback that will fire when a specific modal is opened:
$(document).on('open.zf.reveal', '#<ELEMENT-ID>[data-reveal]', function() {
console.log('This works');
});

Like meatrobot said, to get this working you want to bind to the modal with the action you are targetting. I got this to work:
$('#myModal').bind('closed', function() {
console.log("myModal closed!");
});

This is a little late but for the second part you add the attributes as a semi-colon separated list of values in the data-options attribute (tested with foundation 5), i.e:
<div id="myModal" data-options="close_on_background_click:false;" class="reveal-modal">
And no, you cannot pass functions this way, i tried :)

Looking at Foundation 5 and found that the reveal library triggers open, opened, close, and closed events. Just attach a handler to the event you want.
$('#myModal').on([event], handler)
You can also pass the handlers via the settings argument.
Check this out: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

The foundation 5 documentation specifies scoping of reveal events to the 'reveal' eventspace. However, the actual modal events do not seem to fire consistently within this eventspace. Removing this specification fixes the issue:
$(document).on('opened.fndtn', '[data-reveal]', function() {
console.log('This works');
});

In foundation 3.2.5 you should bind 'reveal:opened' like this:
$('#myModal').bind('reveal:opened', function() {
console.log("myModal opened");
});
Regards, MarianoC.

Need to understand how javascript functions are called

This is part of a code. The question is, does this line "$("#b_facetNewChild").button().click(function(){" means that the following should be fired when the button "facetNewChild" is clicked? Because there is no "onClick" function at the button. Also, can you explain briefly, what does it mean to have this nested into another function "newChildFacet()" and how to call it?
Sorry, but I am new to javascript.Thanks!
function newChildFacet()
{
// button click
$("#b_facetNewChild").button().click(function(){
//get selected fId
var $fId=getSfSelectedFIds();
if($fId.length>0 && $fId.split(",").length!=1)
{
messageBox("Tip","Please select <b>ONE</b> as the parent facet. If no facet is selected, the new facet will be created under <b>root</b>.");
return false;
}
//some more stuff here!
});
// newChildFacetDialog
$("#newChildFacetDialog").dialog({
autoOpen: false,
modal: true,
title: "New Child Facet",
buttons: {
"Cancel": function() {
$(this).dialog('close');
},
"Create": function() {
//get data
var $parentId=getSfSelectedFIds();
});
$(this).dialog('close');
}
}
});
}

First, yes it bound as a click event handler, so it'll run when #b_facetNewChild is clicked - you won't see this in source, it's stored elsewhere in the DOM.
You can call it by invoking the click event handlers on that element, like this:
$("#b_facetNewChild").click();
It doesn't matter that it's a nested/anonymous function, all we care about here is it's a click event handler on that element, so you can trigger it any of the following ways:
$("#b_facetNewChild").click();
$("#b_facetNewChild").trigger("click");
$("#b_facetNewChild").triggerHandler("click");

You got it right.
$("#b_facetNewChild").button().click(function(){ ... }) does exactly what you mean. However, you won't see an onclick handler in the HTML, but rather only if you inspect the DOM/JS element itself (for example, by using FireBug).
The fact that this call is located inside a function simply means it will only be called (i.e. callback attached to the button) once the wrapping function is called.

preventing effects to be applied to the same object twice when adding objects with ajax

I'm having a little issue with an application I'm making. I have a page where the user edits a document via dragging modules into the page or "canvas" area.
http://thinktankdesign.ca/temp_img.jpg
When the page is loaded, javascript haves the modules collapsible (like above). However after the user drags in a new module the effect is applied again some new modules can collapse as well. here is the problem. each time a module loads the same effect gets applied to the modules that already can collapse. It ends up breaking their animations.
heres the code that gets executed on page load.
//make colapsible
$("h1.handle").click(function() {
var object = $(this);
v$(this).next().toggle("fast", colapsible_class(object));
vreturn false;
}).addClass("open");
and heres the code that gets executed in the creation of a module via ajax
function get_module(id){
var template = $('input[name=template]').val();
$.post(window.location.href, { template: template, module: id, mode: 'create' },
function(data){
$(data).insertBefore(".target_wrapper");
//enable deletion of module
$(".js_no_modules").slideUp("slow");
$(enable_module_deletion());
//show delete button
$("button[name=delete]").show();
//make colapsible
$("h1.handle").click(function() {
var object = $(this);
$(this).next().toggle("fast", colapsible_class(object));
return false;
}).addClass("open");
}
);
}
I need a solid way of preventing the toggle effect to be applied to the same module twice

Use jQuery 1.3 live events instead.
//make colapsible
$("h1.handle").live("click", function() {
var object = $(this);
v$(this).next().toggle("fast", colapsible_class(object));
vreturn false;
}).addClass("open");
and then eliminate the click declaration in the second block of code, changing it to $("h1.handle").addClass("open");
Live events bind all current and future matching elements with an event.

In your Ajax success handler try the following:
//make collapsible
$("h1.handle:not(.open)").click(function() {
var object = $(this);
$(this).next().toggle("fast", colapsible_class(object));
return false;
}).addClass("open");

The best way to solve your problem is, instead of using $("h1.handle") on the AJAX callback, go for $(data).find("h1.handle"). Something like,
var x = $(data);
x.insertBefore(...);
/* your other code */
x.find('h1.handle').click(...).addClass(...);
Like that, only the newly added items will have the event bounded. The already present ones will not be touched.
If we want to answer your question instead of just solving your problem, then we have several alternatives, such as:
store, in your objects, that the onclick event handler has been set so that you don't set it twice
always bind the onclick event, but always unbind it first
use jQuery's live events and the addClass open only on the newly created items.
IMO, the first one is the easiest. You can accomplish it by using jQuery's data(). Then you could do something like:
$("h1.handle").each(function() {
var me = $(this);
// if already has click handler, don't do anything
if (me.data('click_set') != null) { return true; }
// otherwise, store the data and bind the click event
me.data('click_set', true).click(function() {
/* the code you already have on the click handler */
}).addClass('open');
}
The second alternative involves storing the function that you pass inline to the click event binder in a variable, and then using jQuery's unbind to disable it.