Editing a bootstrap template, adding dynamically jarvisWidget and regenerate the widgets after the page allready been loaded

Question

I'm using smart admin panel from https://wrapbootstrap.com/

They using the jarvisWidget / smart widget which are quite easy to use.

The problem what i heading into , after the page has been loaded i'm using jquery function to add dynamically some widgets :

$(".items-container").append('<article class="col-xs-12 col-sm-6 col-md-4 col-lg-3 sortable-grid ui-sortable">\
                                        <div class="jarviswidget" id=wid-id-"'+itemId+'">   \
                                            <header>\
                                                <span class="widget-icon"> <i class="glyphicon glyphicon-search"></i> </span>\
                                                <h2>'+ data.title +'</h2>               \
                                            </header>   \
                                            <div>\
                                                <div class="jarviswidget-editbox"> \
                                                    <!-- This area used as dropdown edit box --> \
                                                    <input class="form-control" type="text">    \
                                                </div>\
                                                <div class="widget-body">\
                                                    Here is an item\
                                                </div>\
                                            </div>\
                                        </div>\
                                    </article>');

The widgets are added but as a plain HTML and not regenerate as a predefined widget on the html page.

how i can re initialize all the current widget on the current page / only the ones that has not been initialized?

For a temporary solution that i found now is to create my own pageSetUp(); method , and call the setup_widgets_desktop() only when i finished to load all the widget dynamically to the page.

But I'm looking for something more solid.

Answer 1

I had kind of same issue. I was calling a ajax method to add widgets as html. Calling pageSetUp(); and setup_widgets_destop(); will reinitialize all the elements so its better to reinitialize only widgets inside your container. My solution is as follows:

I was inserting widgets inside

$("#div-id").html(widgetsHTML);

I destroyed the existing widget first using

 $("#div-id").jarvisWidgets('destroy');

then reinitialize all widgets inside div using

$("#div-id").jarvisWidgets();

you can also pass defaults as:

$("#form-data").jarvisWidgets({
    "fullscreenClass": "fa fa-expand | fa fa-compress",
    "toggleClass": "fa fa-minus | fa fa-plus"
});

I hope this will help.