Script tags fire twice when initializing jScrollPane about jscrollpane

[charlau]

This even happens if the javascript is added after jSP is activated. For example, I have this problem with google's recaptcha in a form inside a scroll pane. I tried to build the recaptcha outside of it, and after a settimout, change the content of a div inside the scroll pane. As soon as that div is modified with the javascript, the page reacts and becomes unusable...

Still looking for a workaround, since the whole site is scroller enabled...

By the way, that happens in FF but not in Chrome.

[phena109]

I thought I won't be able to work out a workaround for that but suprisingly i worked out a ralatively quick and dirty solution for that.

With the inspiration of the page here: http://stackoverflow.com/questions/610995/jquery-cant-append-script-element (message posted by Hendra Uzia)

I am now able to execute the code only once with the drawback that the script is not inspectable via simple mean (and i don't feel that i must make it visible). It is as follow:

taking the v2.0.0beta10/11 as the starting point, around line 92 (or below a line with "<originalScrollLeft = elem.scrollLeft();">")

insert:

                    var scripts = [];
                    elem.find("script").each(function(){
                        scripts.push($(this).clone());
                    });                    
                    elem.find("script").remove();

and at acount line 120 (or below a line ").append(pane).appendTo(elem);")

insert:

                    _size = scripts.length;
                    for(i=0;i<_size;i++){
                        eval(scripts[i]);
                    }

What it does is that it clones all the script elements in the block and save it in an array. Then execute(eval()) all scripts after the JSP finished with DOM manipulation. It at least for my case on IE9(comp ie8,ie7),FF,GC and my android phone. what i didn't test is native ie7+8, opera all iProducts. improvements on that likely are memory management, better code placement, etc.

At last, i don't own any credit of this. Use at your own risk.

[nelsonad]

I tracked this down to being an issue with how the elements are being manipulated during jScrollPane initialization.

Scripts are eval'd and run within jQuery's append method, which is used to move the elements children within the new jspPane container. But the jspPane has not yet been added to the document. So any inline scripts that run against the children elements will not be able to find the element.

By changing the order in which elements are created and appended, this issue can be resolved without ripping out the scripts from the dom and eval'ing them manually.

example:
current code Version: 2.0.0beta11, Last updated: 2011-07-04

pane = $('<div class="jspPane" />').css('padding', originalPadding).append(elem.children());
container = $('<div class="jspContainer" />')
     .css({
     'width': paneWidth + 'px',
     'height': paneHeight + 'px'
    }
).append(pane).appendTo(elem);

becomes

elemChildren = elem.children().remove();
pane = $('<div class="jspPane" />').css('padding', originalPadding)
container = $('<div class="jspContainer" />')
.css({
    'width': paneWidth + 'px',
    'height': paneHeight + 'px'
    }
).append(pane).appendTo(elem);
pane.append(elemChildren);

[vitch]

Sorry for the very slow reply on this - I haven't had much time to dedicate to jScrollPane recently. A newly submitted issue (#160) reminded me of this one...

I'm curious as to why appending the children to the pane after it is already in the DOM prevents the script firing twice?

[nelsonad]

In the first code block, the children are appended to "pane" and script is evaluated, then "pane" is appended to "container" and script is evaluated again.

In my suggested change, the child content is only passed to jquery's append method once, so script is only executed once.

I didnt end up using this solution though, instead fixed the issue with the control which had inline script that was erroring out.

[vitch]

Ahh... When I read the description of the problem I thought that the two firings of the script were:

1. When the page loads
2. When JSP is initialised

And I didn't understand how your code would prevent either of these times. But it seems like the script is firing twice when JSP is initialised?

[nelsonad]

Right, twice during JSP initialization.