Loading script via $.getScript() conflicts breaks fitting capability

[itbra]

When i load the modal carousel script the regular way via <script src="..."></script> then the plugin works fine, where as when i load the script on demand via $.getScript() it does not. The carousel is loaded into the modal, but triggering its fit() method throws the error Uncaught TypeError: Cannot read property 'fit' of undefined. I checked the data() value both on normal load and deferred load. In normal mode it contained the property bs.carousel: i, where as when loaded deferred it didn't which leads the the assumption that there is some initialisation issue.

I think that you know faster than me what to do/call/fix when loading the script deferredly to init the plugin correctly. Please tell me, whether i have to call something specifically after the script was fetched.

Also, please add to your script checks for the bs.carousel property being available from the data() object before using it, thus preventing errors being thrown that may break further javascript processing by the browser.

[noreiller]

Hi, can you provide the code you use please ?

[itbra]

The code for what?

[noreiller]

I would like to be able to test and check the code containing the "$.getScript()" and ".fit()" calls. An example on http://jsfiddle.net/ would be great.

[itbra]

Sure, its nothing more than:

$.when.apply($,
    [
        '/noreiller/dist/js/bootstrap-modal-carousel.js'
    ]
    .map(function(url){ return $.getScript(url) })
)
.then(
    // Success callback
    function(data) {
        console.log('Load successful');
    },
    // Error callback
    function(jqXHR, textStatus, errorThrown) {
        console.log('Load error');
    },
    // Progress callback
    function(jqXHR, textStatus, errorThrown) {
        console.log('Load in progress');
    }
);

[noreiller]

I put your code in jsFiddle, and I don't see any problem. http://jsfiddle.net/70erdq3w/1/

[itbra]

Interesting! It works when fetching the script from your repo but not when fetching the script from my local server. Both scripts are 100% identical. This is absolutely strange.

Can you tell me, how to debug whether there is a difference in script execution when loading it from a remote source or from a local source? How to debug the script initialisation? As i mentioned, there is the data property 'bs.carousel'. Is it set by your script? When? Where? Where in your script happens the initialisation? I would like to monitor it somehow to see whethere there is a difference in order or access right.

[noreiller]

jsFiddle inserts the dependencies in the header while in my demo, they are at the end of the body. the "bs.carousel" data is from Bootstrap. As I said in the doc, I didn't create anything, I just enhanced the way the Bootstrap modal and carousel interact each other.

So, to debug, there are some possibilities:

• check that the "$.getScript" is called after the dependencies or in a "document.ready" callback
• open you script in the debugger of your browser (F12) and check the input "pause on exceptions" (in Firefox)
• check that the script which open the modal is called once the "$.getScript" is successful.

Good luck :)

[itbra]

Ok, i'll go for a deeper inspection as soon as i finished more urgent work.

Anyway i'd like to come back to my request to also check for the data attribute being available or to assign it before using it as this would prevent the error from being thrown at all and thus ensure to not break any futher Javascript processing. What do you say?

[noreiller]

I won't check for the "bs.carousel" data since the "fit" method only works on a carousel instance. It's mandatory that the carousel to be initialized either by the "data-api" (http://getbootstrap.com/javascript/#js-data-attrs) or by you (http://getbootstrap.com/javascript/#carousel-methods). So it's your code fault if it throws an error. Can you send me your code so I can check it ?

[itbra]

I'm afraid i can't, because this is used in a project prohibiting any code publication before launch. But thanks for your offer!

I'll dig into it again as i suppose some dependency issue.

[vinoduxid]

Hi I have a issue with dynamic carousels with more than one, I tried jQuery way before using your extended bootstrap feature. `

close

    </div>

//Fullscreen Slider/Gallery view $('.modal-fullscreen').click(function () { var fullsliderid = $(this).data('target'); console.log(fullsliderid); $('#imgSliderFull, #imgSliderFull .close').attr('data-sliderid', fullsliderid); $('#imgSliderFull .modal-body .slideImg').empty(); $(fullsliderid + ".slideCarousel").css('padding-top', $(fullsliderid + ".slideCarousel .slideImg").outerHeight()); $(fullsliderid + ' .item').prependTo('#imgSliderFull .slideImg');
$('#imgSliderFull .carousel-controls').insertAfter('#imgSliderFull .slideImg'); $('#imgSliderFull').modal('show').on('shown.bs.modal', function (e) { $('#imgSliderFull .carousel').carousel(); }).on('hidden.bs.modal', function (e) { var fullsliderid = $(this).data('sliderid'); $(fullsliderid + ".slideCarousel").css('padding', ''); console.log(fullsliderid); $('#imgSliderFull .item').prependTo(fullsliderid + ' .slideImg'); console.log(fullsliderid); $("[id$=slideCarousel]").carousel(); }); });`

Carousels are dynamic so the id is different for each. unable to replace the carousel from which i pull and place in model body and return back. its placing in first collected id instead of second id

Any advice on jQuery way doing it, In mean time I will try your plugin.

[noreiller]

Hi, have you tried the modal local feature ?