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();
});
Related
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”);
});
});
This is my code, 'slide' event inside AJAX success call.
success: function(data) {
$('#my_container').html(data);
// I am getting' #mycarousel' successfully in to #my_container
$('#mycarousel').bind('slid', function(e) {
console.log('hi');
}
// tried 'slid.bs.carousel' too, no change.
// btw, I can see my 'slid' function under event listeners for that element.
// when I paste the above binding code in console again it shows the element too.
});
I want to print the 'hi' to console on slid event, which is not working now.
Thanks
Check whether you have multiple versions of jquery libraries loaded in the page.
Use $.fn.jquery to find the loaded version and cross check it with the jquery version you have included and see both are same.
After loading the carousel dynamically, you have to initialize it (as androbin suggested):
$('#my_container').html(data);
$("#mycarousel").carousel();
$('#mycarousel').bind('slide.bs.carousel', function (e) {
console.log('slide event!');
});
$('#mycarousel').bind('slid', function (e) {
console.log("slid event!");
});
Here you can see it working: http://jsfiddle.net/faw242a8/1/
Make sure the html you are pulling in via ajax contains a valid carousel.
Reference: Carousel - Bootstrap
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
Maybe someone can help me with the following problem.
The problem is that i'm trying to add new photo album(with jQuery) and after adding- to show new album i'm reloading DIV with jQuery .load function
$($classid).load('..')
Everything is working fine, except that after reloading function like folder hovering (where bar with buttons appear - delete,etc..on hover) just don't work.
It looks like after DIV reloading jquery is dissabled and it need's to be called out again to run all functions.
I'v tryed to add this code
<script>
$.getScript("/data/sys.js" ); // item hovering functions styling etc..
$.getScript("/data/late.js" ); //for button clicks
</script>
at reload DIV'S Content..
Everything worked fine except that when I try to add new photo album at next album adding it multiply's added folder count.. so when i add one there show's up one, at next click there is two new folders..
I'v tryed alot and I cant figure out how to stop this or do it in diffrent way..
here is late.js file that is responsible for new folder adding..
late.js file
Thanks in advance..
Does adding this code below make any difference, as the page wont load up until everything is ready.
$(document).ready(function(){
});
Try:
function loadSelectors() {
// here paste sys.js code
$('#lfd').live('click', function(e) {//form button
$.post( $("#frm1").attr("action"),//form
$("#frm1 :input").serializeArray(),//form input
function(info){
$("#ui_info_anim_s").html(info);//popup
$("#afolder").css("display","none");
$("#fn_nameid").val('New Folder');
//a lot of animation stuff for popup
$("#ui_info_anim_s").animate({top: '40px'}, 'slow', function() {
$('#load_anim_privf').fadeIn( 500);
$('#load_anim_pubf').fadeIn( 500);
$('#load_anim_privf').fadeOut(1000,function(){});
$('#load_anim_pubf').fadeOut( 500);
$(this).delay(3000).animate({top: '+=40px',opacity:'0','filter':'alpha(opacity=0)'},'slow',function(){
$(this).css({"top": "-42px","margin-top": "-42px", "opacity": "1","filter":"alpha(opacity=0)" });
});});
});
loadUp(1,'.ui_treetype','');// Reloading func
});
$("#frm1").submit( function() {
return false;
});
}
Now you need to call function loadSelectors() two times. First on document load & second where div created
This happens because when you attach event handlers to div's and then replace them you lose all event bindings.
What you need is to attach event handlers through their parent container element which stays on page regardless of reload. I think it may be the one you refer to as $classid in your code.
In this case attach event handlers this way, only once, at your page dom ready event:
$(document).ready(function(){
$($classid).on("hover", "yourSelectorHere", function() {
... your code to handle event
})
$($classid).on("click", "yourSelectorHere", function() {
... your code to handle event
})
...
})
My problem is that following code works fine (dialog show once on startup), but when I navigate to another page (with standard ajax activated), and then navigate back to the first page, the dialog is showing again (and then in a loop manner when I click "dismiss").
What am I doing wrong?
Code looks like that:
$(document).on('pageinit', '#pageindex', function(event) {
setTimeout(function(){
$('#dialog').click();
$('#dialog').remove();
},1000);
});
For a quick fix, replace .on with.one. However, normally pageinit event should fire once only, so there must be something causing it to fire multiple times.
The following code is executed once on single/multipage page and multiple pages approach:
$(document).on('pageinit', '#pageindex', function (event) {
$(this).off(event);
setTimeout(function () {
$('#dialog').click();
$('#dialog').remove();
}, 1000);
});
I'm placing content on my page through an ajax (post) request like so:
$("input#ViewMore").click(function() {
var data = { before: oldestDate, threadId: 1 };
$.post("/Message/More", data,function(html) {
$('tbody#posts').prepend(html);
return false;
},
"html");
return false;
});
with the html coming back looking something like:
<div id="comment">Message output Quote</div>
This is all working fine and dandy, everything appears as it should, no problems.
The problem occurs when I have an event hooked into the "quote" anchor that has been added through the ajax call. Specifically, a jQuery event on that anchor does not fire. Why?
For instance:
$("#quote).click(function() { ... });
Does nothing. Acts like there is no event on it. I know it is working on other anchors on the page that were not added through a ajax request, so there is not a code error there, plus if I refresh the page it will then fire correctly. Is there some reason that this is happening, do I need someway to reinitialize that event on the anchor tag somehow? Any ideas?
Working with jQuery 1.3.1 (didn't work with 1.2.6 either) so I believe it is my implementation not code itself.
You can use Events/live of jQuery 1.3, live will bind a handler to an event for all current - and future - matched elements.
When the new content is added to the page with Ajax you have to re-register all the events to those new elements.
Changed to
$('#quote').live("click", function() { ... }
and
$("input#ViewMore").live("click", function() { ... }
Doesn't seem to work
CMS's answer helped, but here's how it ended up:
The view more button event remained the same as it was outside of the AJAH request that added it:
$("input#ViewMore").click( function() { ... }
Elements that had events that were being added in and out of the AJAH request needed to use the live method:
$('#quote').live("click", function() { ... }
Works like a charm!