Problem/Motivation
I'm trying to attached a jQuery/JavaScript file to an accordion view, so that when the title is clicked on, content is loaded within an iframe. When the view is presented as a page, the jQuery/JavaScript file loads fine and works as expected. However, when I create a block of that same view, and place it within a page, the jQuery/JavaScript file does not function, at all. I have verified that the jQ/JS file is present in both cases.
I've loaded the jQ/JS file via Asset Injector, via my theme file and via Header/Footer scripts, with the same results.
Here's a snippet of the jQ/JS code:
(function ($) {
$(document).ready(function() {
$("#ui-id-1").click(function(){
$(".calc-iframe.inactive").attr("src", "about:blank");
$("#ui-id-1.iframe-button").toggleClass('open');
$("#ui-id-1.iframe-button").toggleClass('closed');
$("#iframe-auto01").toggleClass('active');
$("#iframe-auto01").toggleClass('inactive');
if ($("#iframe-auto01").hasClass('active')) {
var iframe = $("#iframe-auto01.active");
iframe.attr("src", iframe.data("src"));
$("#iframe-auto01").css({"display": "block"});
$("#iframe-auto01").attr("checkOrigin", "false");
}
else {
$(".calc-iframe.inactive").attr("src", "about:blank");
$("#iframe-auto01").css({"display": "none"});
}
});
});
})(jQuery);
#ui-id-1 is in the same div as ui-accordion-header and is the click event I'm listening for.
It seems to me that the block is loading after the jQ/JS code has loaded, as the same exact jQ/JS code works on the Page view version, but not the block view version.
Steps to reproduce
Proposed resolution
Remaining tasks
User interface changes
API changes
Data model changes