Calling a function that resides in the main page from a plugin?
- by Justin Lee
I want to call a function from within plugin, but the function is on the main page and not the plugin's .js file.
EDIT
I have jQuery parsing a very large XML file and building, subsequently, a large list (1.1 MB HTML file when dynamic content is copied, pasted, then saved) that has expand/collapse functionality through a plugin. The overall performance on IE is super slow and doggy, assuming since the page/DOM is so big.
I am currently trying to save the collapsed content in the event.data when it is collapsed and remove it from the DOM, then bring it back when it is told to expand... the issue that I am having is that when I bring the content back, obviously the "click" and "hover" events are gone. I'm trying to re-assign them, currently doing so inside the plugin after the plugin expands the content. The issue then though is that is says the function that I declare within the .click() is not defined. Also the hover event doesn't seem to be re-assigning either....
if ($(event.data.trigger).attr('class').indexOf('collapsed') != -1 ) { // if expanding
// console.log(event.data.targetContent);
$(event.data.trigger).after(event.data.targetContent);
$(event.data.target).hide();
/* This Line --->*/ $(event.data.target + 'a.addButton').click(addResourceToList);
$(event.data.target + 'li.resource')
.hover(
function() {
if (!($(this).attr("disabled"))) {
$(this).addClass("over");
$(this).find("a").css({'display':'block'});
}
},
function () {
if (!($(this).attr("disabled"))) {
$(this).removeClass("over");
$(this).children("a").css({'display':'none'});
}
}
);
$(event.data.target).css({
"height": "0px",
"padding-top": "0px",
"padding-bottom": "0px",
"margin-top": "0px",
"margin-bottom": "0px"});
$(event.data.target).show();
$(event.data.target).animate({
height: event.data.heightVal + "px",
paddingTop: event.data.topPaddingVal + "px",
paddingBottom: event.data.bottomPaddingVal + "px",
marginTop: event.data.topMarginVal + "px",
marginBottom: event.data.bottomMarginVal + "px"}, "normal");//, function(){$(this).hide();});
$(event.data.trigger).removeClass("collapsed");
$.cookies.set('jcollapserSub_' + event.data.target, 'expanded', {hoursToLive: 24 * 365});
} else if ($(event.data.trigger).attr('class').indexOf('collapsed') == -1 ) { // if collapsing
$(event.data.target).animate({
height: "0px",
paddingTop: "0px",
paddingBottom: "0px",
marginTop: "0px",
marginBottom: "0px"}, "normal", function(){$(this).hide();$(this).remove();});
$(event.data.trigger).addClass("collapsed");
$.cookies.set('jcollapserSub_' + event.data.target, 'collapsed', {hoursToLive: 24 * 365});
}
EDIT
So, having new eyes truly makes a difference. As I was reviewing the code in this post this morning after being away over the weekend, I found where I had err'd.
This:
$(event.data.target + 'a.addButton').click(addResourceToList);
Should be this (notice the space before a.addbutton):
$(event.data.target + ' a.addButton').click(addResourceToList);
Same issue with the "li.resource". So it was never pointing to the right elements... Thank you, Rene, for your help!!
