JQuery extension only visible with 2 objects

[victa001]

Hello,

we're developing our own extensions with jquery/html/css3. It's is working all fine but the only

weird thing is that when we add the extension and viewing it in webview there is nothing there.

Only when adding the same (or other) extension one of the extensions starts to work.

We're using QlikView 11 SR1 (64bit) with IE9 installed.

Hopefully someone knows  strange problem?

Greetings,

Victa

[#2]

Please post your code, it is impossible to guess what your problem is without it.

[victa001]

Only visible when adding another object/extension (and sometimes pressing f5) in webview.

Nested 3 loadscripts and using 2 LoadCSS. The script loads an iScrollWheel and the results

are displayed in an input box. Next step is getting data from QlikView to display in the iScrollWheel.

Our code:

//company: Victa
Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/jquery-1.7.1.min.js", function () {
     Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/jquery.mobile-1.1.0.min.js", function() {
        Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/mobiscroll-2.0.custom.min.js", function() {
            Qva.AddExtension("Vince", function () {
                Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/jquery.mobile-1.1.0.min.css");
                 Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/mobiscroll-2.0.custom.min.css");
            var html = "";
    $(function(){
        $('#i').scroller({
        preset: 'date',
        invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        theme: 'ios',
        display: 'inline',
        mode: 'scroller',
        dateFormat: 'dd/mm/yy',
        dateOrder: 'mmD ddy'
        });    
    });
            html += '<input disabled="disabled" readonly="readonly" style="display: inline;" name="i" id="i" class="i-txt dwtd" />';
            html +='<input id="i" name="i" style="display:none" />'
                  this.Element.innerHTML = html;
                });
            });
         });
    });

[Alexander_Thor · Accepted solution]

Try this snippet, worked perfectly for me. I removed the jquery reference, QV loads that for you anyway. If you want fallback check if jquery is present and load it if not and you can avoid a round trip to the server.

//company: Victa
Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/jquery.mobile-1.1.0.min.js", function() {
Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/mobiscroll-2.0.custom.min.js", function() {
    Qva.AddExtension("Vince", function () {
    Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/jquery.mobile-1.1.0.min.css");
    Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Vince/mobiscroll-2.0.custom.min.css");
            var html = "";
            html += '<input disabled="disabled" readonly="readonly" style="display: inline;" name="i" id="i" class="i-txt dwtd" />';
            html += '<input id="i" name="i" style="display:none" />'
            this.Element.innerHTML = html;
            $('#i').scroller({
            preset: 'date',
            invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
            theme: 'ios',
            display: 'inline',
            mode: 'scroller',
            dateFormat: 'dd/mm/yy',
            dateOrder: 'mmD ddy'
            });    
    });
});
});