jQueryTOOLS Overlay lightbox not functioning when HTML/LINK is loaded via ajax - javascript

Before starting, I have researched and found this similar, previous question: Reinitialize jQuerytools Overlay on ajax loaded element
However, the "answer" to that question suggests using .live(). I attempted to us jQuery 1.9 .live() is not a function to update using .on().
$(".overlay_load[rel]").on('click', 'a', function () {
$(this).overlay().load();
$(this).overlay().load();
return false;
});
I will admit I don't 100% understand exactly what that is doing other than perhaps re-initializing the newly loaded HTML so that jQueryTOOLS Overlay has 'access' to the newly loaded HTML.
I have a page loading sections of HTML content via AJAX. Here is an example of one DIV that is loaded.
<div class="ajax-returned mytop">
<span class="username"> drkwong </span> <br>
<span class="full-name">Andrew Kwong</span><br>
<span class="action-status">
<span class="mt-icon ut3"></span>
<span class="autoship active">A</span>
<span class="view_profile">
<a href="/member/downline_tree_view/?view=tree_profile&program=1&view_userid=13" rel="#overlay">
<img src="/inc/downline_tree/images/more_info.png" rel="#13">
</a>
</span>
</span>
</div>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
This has a link that should engage a jQuery and then load a jQueryTOOLS Overlay lightbox:
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'grey',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
This is the jQuery I am using to load an external page into a Light Box: http://jquerytools.github.io/demos/overlay/external.html
It simply feels like it's not triggering the jQuery.
Here's what's in the header:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/templates/public/2/downline/js/jquery.browser.min.js"></script>
<script type="text/javascript" src="/templates/public/2/downline/js/jquery.tools.min.js"></script>
The jquery.browser.min.js is required by jQueryTOOLS Overlay to access browsers. https://github.com/gabceb/jquery-browser-plugin
EDIT:
AJAX
var ids=new Array()
var node
var param={"action":"NodeDetailAll","admin":"1"}
var users=new Array()
function get_ids(){
for(var i=0;i<nodes.length;i++){
users.push("child_"+$(nodes[i]).attr("class"))
ids.push($(nodes[i]).attr("class"))
}
}
function get_nodes(){
nodes = $("#chart [myattr*='descendent']")
nodes= jQuery.makeArray(nodes);
$.when(get_ids()).then(function(){
$.each(ids,function(key,value){
param[users[key]]=value
})
})
}
function write_html(response){
$.each(response,function(key,value){
$("."+key).html(value)
})
}
jQuery(document).ready(function() {
$(".spinner-loader").fadeIn(200)
$.when(get_nodes()).then(function(){
$.post("~ajax_url~",param,function(response) {
response=jQuery.parseJSON(response)
$.when(write_html(response)).done(function() {
$(".spinner-loader").fadeOut(600)
$("#chart").css("opacity","1")
// is this where I would add the on()? //
// I tried that, without success. //
// perhaps I need to modify the on() function? //
})
})
})
})

You could call the overlay binding on the callback of your ajax function. The other thing would be is to check your jQuery selectors to make sure you have them configured appropriately and that they are selecting the appropriate element to bind your event to.
As per the jQuery documentation: "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."
so it does seem to me that calling the binding functionality in the callback of your AJAX request would be the way to go! Perhaps if you could provide a simplified version of your code, ajax request included then I could try and take another look :)

Use a different solution. jQueryTOOLS Overlay is no longer active and uses deprecated and even eliminated jQuery functions. Trying to solve all those issues has proven both inefficient and so far as AJAX is related, impossible with the latest versions of jQuery.
As suggested by #sparky FancyBox 2 provided the needed solution. It was simple and intuitive to implement.

Related

How to bind a future event when using jQuery Mobile external page linking?

In jQuery Mobile, the external page is linked via Ajax (i.e. the content of the external page is loaded into current page via Ajax).
The problem is: How to bind a event on the future (i.e. to be loaded) content?
Let say the content to be loaded has the following HTML input
<input type='text' id='foo' name='foo'>
How to bind a input event on it?
With just static HTML, the following code would work
$('#foo').on('input', function () {
...
Now it didn't work now since the DOM is loaded dynamically, I tried to use delegation but also not work
$(document).on('#foo', 'input', function () {
...
Any idea?
You can include the script in the external page as long as the script tag is within the data-role="page" div (Only the content of the first found data-role="page" element is loaded into the current page.
$(document).on("pagecreate", "#extpagedivid", function(){
$(document).on("input", "#foo", function(){...});
});
You can also include this code in the pagecreate handler of the main page as long as you are using event delegation. Make sure the ID of the input is unique across all pages that will be loaded into the main page.
How about using var
var myFunc = function() { ... }
$(document).ready(function() {
$('#foo').on('input', myFunc );
});

How to lazy-load an inline javascript?

I want to load a banner ad script only when specific div is reached. For example - banner div at the bottom of the page.
I can load external scripts by using jquery lazy script:
var options = {
type: "visible",
id:"mydiv", //div Id
scripts: [
"1.js",
"2.js",
"3.js"
],
success: function () {
}
};
$.lazyscript(options);
But how to load inline scripts?
Thanks.
The entire html document is parsed top to bottom, script tags included. So in that sense, your inline javascript is "loaded." I may be misunderstanding your question.
If you didn't want your inline script to be executed as soon as it was parsed you would need to use some kind of event listener in the inline script.
For example, assuming your inline banner ad code is wrapped in a function
<script>
loadBannerScriptAd()
</script>
you would need to write something like
<script>
$(document).on("loadBannerScript", loadBannerScriptAd)
</script>
which you could trigger at any point by
$(document).trigger("loadBannerScript")
All of this is assuming you have jquery based on your code sample you gave above. Check out http://api.jquery.com/trigger/ for detailed information on how you could trigger custom events via jquery.
You can try my project jquery-lazyload-any
Html
<div id="you-want-lazyload">
<!--
<script>doSomething();</script>
-->
</div>
JavaScript:
$('#you-want-lazyload').lazyload(options);
or
other one jquery-appear
Html
<div id="you-want-to-detect">
</div>
JavaScript
$('#you-want-to-detect').bind('appear', doSomething); // you have to unbind event if you want to trigger only once

Execution of JS command on load completed of external widget

In this question i use addthis widget as an example, but it's really true for any widget (if generalization is possible)
addthis is a widget that adds all the social linking to a webpage. However it comes with very limited design customization options. So in order to make it fit to my theme I need to transfer the a tag that are generated by addthis into my own html/css structure.
I tried to use JQuery append method on document ready:
$(document).ready(function(){
var addthis = $("#atftbx");
});
However the array that was returned by $("#atftbx") was empty [], which means jquery didn't find the element on the page. I assume that at the point of execution of $(document).ready the widget hasn't been loaded yet. Is there any event that i can listen to and then execute? is there any other way which it can be done?
Not that it matters but just for reference purposes, here is an example of what the widget generates.
<div class="addthis_custom_follow">
<div id="atftbx" class="at-follow-tbx-element addthis-smartlayers animated at4-show">
<p><span> </span></p>
<div class="addthis_toolbox addthis_default_style addthis_32x32_white_style circular">
<a class="addthis_button_facebook_follow...">
<span class="at300bs at15nc at15t_facebook">
<span class="at_a11y">Follow on Facebook</span>
</span><span class="addthis_follow_label">Facebook</span>
</a>
<a class="......
</a>
Try to use this:
function addthisReady(evt) {
// your jQuery code
}
addthis.addEventListener('addthis.ready', addthisReady);
For more info look at http://support.addthis.com/customer/portal/articles/1365497-addthis-javascript-events
EDIT:
For the general purpose I can assume, that you can use event DOMSubtreeModified to execute your code, when widget will change HTML of widget's container, like that:
var isChanged = false;
$(".widget_container").bind("DOMSubtreeModified", function() {
if (! isChanged) {
isChanged = true;
// your code
}
});
but it's better to use widget's built-in events, because DOMSubtreeModified is buggy in IE 9 (http://help.dottoro.com/ljrmcldi.php)

jQuery slow reveal on page load

I am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?
First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});
$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.

jQuery fn() isn't loading / working?

There is one div which changes frequently it's innerHTML by ajax. Once the page loads, jQuery function() works but when innerHTML changes by ajax then some functionality doesn't work. I checked the code using firebug and try to explain it in short.**
I think DOM loads the js file only when the page loaded first time and if ajax modifies innerHTML then function is not invoked somehow.What you say? what could be solution according to you?
HTML page
<body>
<div class="_div_change"> dynamically class add by jQuery function()
here contenet is added by ajax functionality
</div>
<script type="text/javascript">
$(function(){
$('._div_change').addClass('.div_class');
});
</script>
</body>
Loading first time & class is added by fn() |only div innerHTML modified by ajax ***
|
<div class="_div_change div_class"> | <div class="_div_change">
innerHTML elements added successfully| innerHTML elements altered successfully
</div> | </div>
Your script is incomplete, but assuming that it looks like this:
$(function(){
$('._div_change').addClass('.div_class');
});
...then what you're doing there is telling jQuery to run that function once when the DOM is initially loaded (calling $() with a function is a shortcut to jQuery.ready). If you want to re-run that function when you update the div's contents via ajax, you'll have to do that in your success handler on the ajax call.
You can give jQuery a function that it will call whenever any ajax call is complete, via jQuery.ajaxSuccess, which may be useful.
Yes, the code only runs once when the page loads.
The $(function(){...}); is the short form of hooking up the ready event for the document: $(document).ready(function(){...});.
If you change the DOM and want to apply the jQuery code to the new elements, you should rerun the code with the parent element as scope. Create a function with the code and a scope parameter:
function updateElements(scope) {
$('._div_change', scope).addClass('.div_class');
}
Now you can run the function from the ready event with the document as scope:
$(function(){
updateElements(document);
});
When you have loaded new content into an elements, lets say one with id="asdf", you can rerun the function with that element as scope, and it will apply the changes only to the newly added content:
updateElements($('#asdf'));

Categories

Resources