Question: Would like to know how to have a loading spinner

[Mike-Branham]

First, great stuff. Using this in a couple of projects, and seems the best of all I've seen. Showed a demo to a client, and they were WOW'd.

I have some panels that will load via json from a server, and may take a few seconds. I was wondering if there could be some way to put a waiting spinner in the panel until the data loads and is formatted.

Thanks in advance -Mike

[Flyer53]

Hi Mike, thanks for the praise :)

There are several options to add a loading spinner. To show you one example I updated example 5 of the option.contentAjax docs. It adds a spinner as header logo and the ajax done callback replaces the spinner with a tick as last action. Just go to http://jspanel.de/api/#option/contentAjax and scroll down to example 5.

Another option would be to use option.content to load a spinner and the content.Ajax done callback removes it before appending the new content like:

$.jsPanel({
    content: '<i class="fa fa-refresh fa-spin fa-fw"></i>',
    contentAjax: {
        // ajax config ... ,
        done: function(data, textStatus, jqXHR, panel){
            this.content.empty().append(data);
        }
    }
});

Let me know whether this is of help. Otherwise we'll find a way.

Regards, Stefan

[Mike-Branham]

Thanks Stefan,

Had an issue with option.content, however example 5 worked perfectly.

Thanks again for the quick response, and perfect solution.

Kind regards -Mike

[Flyer53]

Hi Mike, On the beta site for the comming jsPanel version 3.5.0 I added another example 5a that uses option.content for a spinner and replaces content via the ajax done callback. http://beta.jspanel.de/api/#option/contentAjax The following code is used:

$.jsPanel({
    content: '<p style="font-size:4rem;text-align:center;margin-top:60px;"><i class="fa fa-spinner fa-spin fa-fw"></i></p>',
    contentSize: {width: 900},
    contentOverflow: {horizontal: 'hidden', vertical: 'scroll'},
    headerTitle: 'Get and display JSON data',
    theme: 'info',
    contentAjax: {
        url: 'https://api.github.com/repos/Flyer53/jsPanel3/releases/latest',
        method: 'GET',
        dataType: 'json',
        done: function (data, textStatus, jqXHR, panel) {
            window.setTimeout(function() {
                // timeout just for demo purpose
                panel.content.css({padding: '10px'}).empty().append('<pre id="json"></pre>');
                // uses jquery-jsonview - https://github.com/yesmeck/jquery-jsonview
                $('#json').JSONView(data, {collapsed: true});
                panel.resize(null, 'auto').reposition();
            }, 5000);
        }
    }
});

Stefan

[Mike-Branham]

Hi Stefan,

Works perfectly, and exactly what I was looking for. A better indicator than the headerLogo code, however that is pretty cool as well, and may use that elsewhere.

Thanks again, I'm a big fan of this project.

Lebt seit ein paar Jahren in Frankfurt am Main. Und mein Deutsch ist nicht so gut, aber danke nochmal.

-Mike

[Flyer53]

My pleasure Mike, if you have more questions ... don't hesitate to ask.

Btw: The v3.5.0 release (coming soon) will remove the dependency from jQuery UI by implementing its own pointerEvent and touch enabled draggable/resizable interactions. http://beta.jspanel.de/api/#option/dragit http://beta.jspanel.de/api/#option/resizeit

PS: Nicht schlechter als mein Englisch würde ich sagen ;) Und auch wenn es schon ein paar Jahre sind .... Willkommen in Deutschland!