I get dynamic content with Ajax and i put it in a div, but the problem is that i have diffrent ids for some child divs(from the dynamic content). So i have added selectors for these divs, but as i said they are dynamic loaded and that means they are not visible anywhere before they are loaded(from another file) and inserted into the div. The problem comes when i insert the dynamic content. jQuery can't select these divs :( Is there any possible solution for my problem?
Hmm maybe my explanation is not good so i will speak with code :D
Example:
This is the empty div
<div id="div"></div>
Here is the jQuery code
$(document).ready(function(){
$.get("file.php", function(data){
$("#div").html(data);
$("#somediiv").click(function(){
alert("Yeah");
});
$("#somediv").click(function(){
$.get("otherfile.php", function(data){
$("#div").html(data);
});
});
$("#somediv2").click(function(){
$.get("file.php", function(data){
$("#div").html(data);
});
});
});
});
Everything works until the new content comes. In the new content when the "file.php" is loaded there is a div with id "somediiv" and when i click on it "otherfile.php" is going to be loaded and in the content of this div there is another div with id "somediiv", but when jQuery can't catch the click :(
I think you have to use live(). Or attach the event in the callback of $.get().
You want each dynamically loaded div to also contain the click functionality of the original div? powtac is right, live events will help you. Something like:
$(".someDivClass").live("click",function(){
$.get("yourFile",function(data){
$(this).append(data);
});
});
That's assuming you want to append the data to the div you clicked, that wasn't really specified. Also you have to make sure the returned data contains the div with class "someDivClass".
Live events register for any matching selector plus all future matches (say that were added dynamically)
Related
I am using UberGallery for my site:
http://www.ubergallery.net/
Here is a sample of the page with Uber Gallery called directly in the HTML
http://www.goloyal.com/clients/dealers-mlm.php
If you click on a thumbnail it opens the popup div.
Some pages have a lot of thumbs, so they load slowly, so I tried to call the Uber Gallery through an Ajax so the page would load, then the thumbs could take their time:
/old-dealers-mlm.php
The loader works exactly as I hoped, however when you click on the thumbnails it opens in a new page (not the pop up div)
I am calling THIS div in my ajax
/div-dealers-mlm.php
Which also has the popups showing correctly.
I do understand that the pages are loaded separately, and I know it requires a special conversation to tell one page to do something in the other. However, I am not sure what I need to relay to the parent/original page, or how to do it to start testing. Any ideas?
THANKS!
The problem is that you're setting up the colorbox on links that don't exist yet. You need to replace your current colorbox code with this:
$(document).ready(function(){
$(document).on("click", "a[rel='colorbox']", function(e){
e.preventDefault();
var url = this.href;
$.colorbox({href: url, maxWidth: "99%", maxHeight: "99%", opacity: ".5"});
});
});
This uses jQuery .on() to bind the click event to all current and future a elements with a rel attribute that equals colorbox.
I'm attempting to run the following simple bit of code on an html snippet contained in a php file, loaded with jquery's .load() function:
$(".thumbnail").on("click", function(event){
alert("thumbnail clicked");
});
However, I can't seem to get it to work on this portion of my page. I have other calls to elements not loaded via ajax and they work fine with the .on() function. I was under the impression that .on() would recognize ajax loaded content.
My .thumbnail elements are pictures in img tags contained within a series of divs all loaded via ajax, jquery can't seem to find any of this content. All of my code is contained within the ready function.
Is there a way to get jquery to recognize these new elements?
Thanks.
You need a delegated event handler for dynamic content :
$('#container').load('somefile.php');
$('#container').on('click', '.thumbnail', function(event){
// do stuff
});
The closest non-dynamic parent would probably be the element you're loading the content into, and you need to attach the event handler to that element, filtering based on the .thumbnail class, like the code above.
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
I've got some links coming in from ajax that need lightbox functionality:
<img src='...'>
Normally this is given behavior via an on page load handler, but since the content is coming from ajax, the UJS isn't getting triggered.
Any way to do this?
If the content is coming from AJAX, then din't setup the event handling during page load. Instead, let the event bubble to the topmost container that is not being changed or replaced by AJAX. Worst case, use document as the topmost node.
$('<root element selector>').on('click', 'a.lightbox', function() {
// activate lightbox on the clicked element.
});
I'm not sure how you're triggering the ajax requests, but if it's with jQuery which seems likely, you can bind the lightbox in the success callback:
$.ajax({
url: '/route',
success: function (response, status) {
$('.lightbox').lightbox();
}
});
You can pass in a context to the jQuery selector so you don't re-attached the lightbox to links that are already in the page, for example if your ajax call is adding the links to a div with id 'lightbox_links', use this selector instead:
$('.lightbox', '#lightbox_links').lightbox();
I have a page that dynamically loads content with the jQuery load() function, so I need to use live() for each of my jQuery functions on this page. However, I am unable to get live() to work with jQuery plugins. For example, I want to use jQuery accordion:
$("#accordion").accordion();
But I cannot find the right syntax to get accordion to work with live(). I have tried:
$("#accordion").live("load", accordion());
$("#accordion").live("load", $("#accordion").accordion());
$("#accordion").live("load", $(this).accordion());
I either receive the "b is undefined" error, or "accordion is not defined."
You must use anonymous function
$("#accordion").live('load',function(){
$(this).accordion();
});
Edit:
If the accordion is already in the page when you first render it, then you shouldn't call it using live(), but by page load
$(function(){
$("#accordion").accordion();
});
This could partly answer your question:
I would suggest using livequery instead to do this:
$("#accordion").livequery(
function() { $(this).accordion(); },
function() { $(this).accordion("destroy"); }
);
The first function will initialize jQuery UI's accordion functionality on any $("#accordion") element that's added to the DOM, and the second one will destroy the accordion object when that same element is removed from the DOM.