What I need is very simple but, searching the web, I didn't find any example.
I am using the jqModal jQuery plugin for displaying content dynamically (via Ajax) in a modal dialog. Once, this modal content is loaded, I need to bind some event on the dialog DOM elements. Therefore, I would like to assign an handler to the "success" AJAX event for manipulating these DOM elements.
The problem is that, looking into the jqModal documentation, there is no 'success' defined events. For instance, the code:
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
will call the examples/2.html for the Ajax request and the response content will replace ex2 content...
...but how can I define my handler for success (or error) such that I can bind some events on the new content of '#ex2' ?
Thank you in advance for your help,
Fabien.
I'm guessing you're using the jqModel plugin? For success (not sure of error) you can add onLoad(callback) as detailed here
So for instance
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger', onLoad: doStuff});
function doStuff() {
//Do stuff here
}
You can use the onLoad callback, see here: http://dev.iceburg.net/jquery/jqModal/
$('#popup').jqm( { onLoad:onLoadCallback } );
Related
I have a MainContent div which contains main content of the website which could be loaded from ajax.
how can i find out if $("#MainContent").load("someUrl") was called, so i am able to push new history state to the webbrowser?
Like LSletty said, if you want to know when it is called use the handler from .load() itself:
$("#MainContent").load("path/content.html", function(){
// Do stuff when load is called ...
});
More info here: jQuery load event
To take action after completion I would use the .done() handler.
Use it in the following way:
$("#MainContent").load("path/content.html").done(function(){
// Do stuff when load is done ...
});
From jQuery docs:
Add handlers to be called when the Deferred object is resolved.
More info here: deferred.done() jQuery
I have a form in Yii and want to load the next step via Ajax. So I have the following request:
$.ajax({
url: jQuery("#form-1").attr("action"),
type: "POST",
data: jQuery(form).serialize()
}).done(function(data) {
jQuery("body").html(data);
});
The url leads us to the following:
$this->render('formStep2', array('model' => $model));
so the complete view will be overwritten.
The problem is, that all event triggered javascript functions don't work. (for example afterValidateAttribute aswell as events with mouseover etc)
How do i get these working?
binding code is for example:
jQuery("#collapsor").mouseover(function(e) {
...
jQuery("#collapsing").collapse('show');
...
}
there the console says: "Uncaught TypeError: Object [object Object] has no method 'collapse'" (bootstrap). When I do collapsing only with the from bootstrap suggested html code (and a click) then it works...
Or like I said the automatic generated Yii functions "afterValidateAttribute" and so on, but there isn't a console-error at all.
edit: when I use document.write(ajaxContnent) the collapse-thing is working, but without animations and the Yii form functions are still not working...
The way to handle dynamically added content, is to attach the event to the document and target the event and selector that you require.
use jquery's on
jQuery('body').on("mouseover","#collapsor", function(e) {
jQuery("#collapsing").collapse('show');
});
Read more here about delegated events :http://api.jquery.com/on/
I have a dynamic list loaded into a HTML 5 web app built using jquery mobile + (jquery and javascript).
I want to display a simple "loading..." image by placing a <div> on the page while the list is populated dynamically. Once the list is complete I need a event to fire to remove the "loading..." image. Is it possible to attach the .ready or .load events to a element of the dynamic list so I get a event to fire when the list has loaded?
Thanks for any advice, searching for existing answers on the .ready subject only provides results about document.ready use of the event.
Use the callback function.
$(function() {
$('#content').html('<div>loading...</div>');
$('#content').load('http://mynewcontent.com/', function(data) {
// optional: do more stuff here.. not needed since the content will already be replaced.
});
});
jQuery's .load provides a complete callback function that you could use to remove the loading image.
http://api.jquery.com/load/
I am loading data into the flexigrid. I am trying to use JQuery selectors to make the rows clickable, but I am unable to do so. I want to know if the element has been fully loaded, how do I do that?
I want to do something like if(element.load == true){//do this}. I am not sure of how to check that out. Could anybody help me with this.
Ok, so I already have this div, and am binding a flexigrid to that div. I want to know if the flexigrid has been bound.
$("#GridLoad").flexigrid();
I want to know if the flexigrid has been bound, after that, I need to run a piece of code.
Using a live() on div Gridload would always be true as it is already there. :(
I want to know if the element has been fully loaded?
There appears to be an onSuccess callback.
$("#GridLoad").flexigrid({
'onSuccess': function() {
// Do this.
}
});
Otherwise, if the things you are binding are being lost when the table updates, attach the events via on() or simply capture them at the persistent ancestor element and examine event.target.
You can use $(element).live('click', function () { // do something });
so that if it later loads it'll have the appropriate event binding.
you could use the callback function of jquery's load method.
like so :
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
Even if you are not using 'load' method, almost any method in jquery supports callbacks which happen after the functionality has been completed.
For example, ajax() has success and failure callbacks, animations has callbacks, etc.
I have a list of elements that I am loading via ajax (using jQuery's .load()). Each of these elements has an (edit) link next to it that lightboxes (using colorbox) a little edit form. When the lightbox is closed I use the onClosed callback to reload the ajax list to show and changes made during the edit.
The colorbox call looks likes this:
$('.colorbox').colorbox({
'iframe':true,
'onClosed':function(){
$("#featureList").load("/template/featureList","id="+$("#model_id").val());
}
});
My list looks like this:
<div id="featureList">
<ul id="features">
<li id="item_000000000008+0">Element 1 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&delta=0">Edit</a>)</li>
<li id="item_000000000008+1">Element 2 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&delta=1">Edit</a>)</li>
</ul>
</div>
I looked at the colorbox source code and saw that is uses jquery live() to do the bind. Here it is:
$('.' + boxElement).live('click', function (e) {
if ((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey) {
return true;
} else {
launch(this);
return false;
}
});
You can see above the way colorbox works is by binding to "boxElement", which is a class it creates called "cboxElement". Before the live() bind colorbox adds this class (cboxElement) to all of the elements matching the selector (.colorbox in my example), then binds to this new class.
So thought that if I placed the colorbox bind outside of the ajaxed content it would bind to the links after I replaced the #featureList div with ajax, since live() is supposed to bind to elements "now or in the future". But it doesn't because it's binding to .cboxElement instead of .colorbox so when the ajax reloads colorbox doesn't re-add the .cboxElement class to the elements.
I tried calling $.fn.colorbox.init() in the ajax content to get colorbox to re-add the .cboxElement class to the elements, but this had no effect. (I do something like this when dealing with shadowbox, but it doesn't seem to work the same for colorbox.)
So then I tried to place all the colorbox code inside the ajax content. When I do this the colorbox binds are stacking/chaining. So the second time I call it I get two colorboxes (and have to hit the "close" button twice to return to the main screen). The third time I get three. This is because when I call colorbox again it adds the .cboxElement class, making the old live() binds active again, and it also adds ANOTHER live() bind to it. I tried to clear out the .live() binds by calling .die() first, but it didn't work for some reason.
I have found a couple of related posts but none of them solved this problem since colorbox is already using live():
Problem with jQuery Colorbox
jQuery AJAX table to a page but now the colorbox overlays no longer work
Any other ideas out there? I am really stumped. I feel like I should switch to a different lightbox, but in general I like colorbox and it was working great everywhere else on the site until this ajax problem came up.
Thanks!!!
EDIT:
So, in this case my issue was that my framework (Yii) was including a duplicate colorbox script on each AJAX call, which was causing the problem. So watch out for that!
For everyone having issues who is NOT facing the duplicate-script issue I was: #Relic points out below you can sort of "sidestep" some issues by doing your own jQuery delegate() bind which does a "direct call" of colorbox, instead of relying on colorbox's default live() binding. I would tweak it like this for my case:
$(document).delegate("#features a", "click", function (event) { // $.colorbox() call }
First of all, you shouldn't use .live() it's deprecated. Instead learn how to use .delegate() You'll find this is a much more powerful listener and will help solve your problem.
On page load initially the DOM is ready, and colorbox is initilized for the selector
AJAX calls a new piece of the page with some DOM element that is in the colorbox selector list, but isn't noticed because it loaded into the page after the selector was read by the javascript.
Try the following - as it watches body #main for all, existing and new a[rel='lightbox']:
$("body #main").delegate("a[rel='lightbox']", "click", function (event) {
event.preventDefault();
$.colorbox({href: $(this).attr("href"),
transition: "fade",
innerHeight: '515px',
innerWidth: '579px',
overlayClose: true,
iframe: true,
opacity: 0.3});});
EDIT for ".on()"
$("body #main").on("click", "a[rel='lightbox']", function (event) {
event.preventDefault();
$.colorbox({href: $(this).attr("href"),
transition: "fade",
innerHeight: '515px',
innerWidth: '579px',
overlayClose: true,
iframe: true,
opacity: 0.3
});
});
Yes, big change, I know, but the point is the 'on' method can also be used as 'bind', so that's kind of cool.
i solved this in a pretty easy way.
If you are sending back an ajax response (usually a javascript response) - attach the normal colorbox binding code (as you would do in any place) in that response.
$('.colorbox').colorbox({
'iframe':true,
'onClosed':function(){
$("#featureList").load("/template/featureList","id="+$("#model_id").val());
}
});
attach this in your js response from server. this worked for me.
The problem appears to be related to something I didn't notice at first and therefore didn't put in my question. I have edited the question to reflect this new information.
My issue was that AJAX response was multiple-binding and including the colorbox script multiple times. The Yii Framework helper widget I was using to include the script is also including jQuery and Colorbox in the response EACH TIME. Yii doesn't have a way to determine if the required scripts (like jQuery) have already been included in the main page (typical stateless HTTP issue) so it includes it in the AJAX partial render each time.
I solved this issue by not using a Yii Widget to do the Colorbox binding on each Ajax call's renderPartial view. I just include thecolorbox binding on the parent page, so the Ajax content has no JS in it.