JQuery, Load() contents with plugins

Posted by Galas on Stack Overflow See other posts from Stack Overflow or by Galas
Published on 2012-06-09T10:36:22Z Indexed on 2012/06/09 10:40 UTC
Read the original article Hit count: 158

Filed under:
|
|

I know this is not a completely new question, but none of the answers solved my problem...

I have built a little menu that uses load() to load image galleries (as external html files) into a specified div ("content"). The said galleries make use of a JQuery plugin (SlideJS).

Now I know that load() does not work for script tags and that I need to use $.getscript in the callback function in order to run the scripts, but it does not work. I have two .js files that need to be loaded: one is the plugin itself and another one is a smaller script with a preloader and the animations for the captions.

I can't seem to merge them together; if I put them into the same document, the script won't run. So I tried just using $.getscript to load the two files.

I tried using two callbacks as suggested in other answer (I know it's not ideal...):

$("#proposal").click(function(){
$(this).addClass('selected');
    $("a:not(:#proposal)").removeClass('selected');
    $("#content").load("works/proposal/proposal.html", function(){
                $.getScript("js/slide.js", function (){
                    $.getScript("js/slidepage.js");
                                                     });




                                });



});

and I tried a variable (read about it in some other faq, not sure if the syntax is correct)

$("#proposal").click(function(){
$(this).addClass('selected');
    $("a:not(:#proposal)").removeClass('selected');
    $("#content").load("works/proposal/proposal.html", function(){
                var scripts = ['js/slide.js','js/slidepage.js'];
                $.getScript(scripts);
                                         });


});

So none of these work. What am I doing wrong? I'm just starting on jquery and my js knowledge is very limited. Should I just merge the two .js files together using minify or something? One of them is already minified, but I've tried with a non-minified version and it does not work either.

Can anyone suggest any other solution around this problem? I thought of just having the div embedded in the main document and just showing it on click, but I'll have at least 4 galleries with about 8 to 10 images each... its a lot of images to load in the main page, so I don't think its the best way.

if you need me to post any more code, please ask! Thanks in advance for all your help!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about image-gallery