Reloading of addNew Tab in Toolbar?

[meister-d]

Hi Guys, is it possible to reload somehow the add New Control in the Toolbar? I would like to perform a reload of my form if i make a certain selection in a dropdown of the tab.

At the moment I grab the event of the select2 control and I am able to modify the backend after the ajax call. If I replace the addNew form with a new one the toolbar seems to be broken.

My first approach was something like this:

1.st get the selected item from a select2 dropdown in the addNew Form. 2.nd perform an ajax request to get / prepare additional data etc.

 $.ajax({
            url: "/profile/UpdateNewForm",
            type: 'get',
            data: { Id: evt.val, name: name },
            dataType: 'json',
            success: function (response) {
                //Do Something
                var r = response;
                $('.js-newForm').replaceWith(r.htmlString);
                this.$subscriberForm = $('.js-newForm');
                this.$subscriberForm.bsInitUI();

                $('#toolbar').bsToolbar({
                    uniqueName: 'profileToolbar',
                    subscribers: [$('#grid')]
                });
                $('.myDropDown').on("change", function (e) { profileIndex.prototype.log("change", e); });
            },
            error: function (xhr) {
                var x = xhr;
                //Do Something to handle error
            }
        });

3rd after the ajax call succeded I replaced the form...

I saw in the documentation that you cann add a control, but i couldn't figure out how to use it for my scenario.

What would be the best way to refresh the tab? Should i remove it and add it again? Could you provide an example on refreshing a Tab?

Regards Dumitru

[cristipufu]

Here's a code snippet that should help you:

var profileIndex = function(options){
    this.options = $.extend(true, {}, options);
    this.init();
};

profileIndex.prototype.init = function(){
    this.$grid = $('#grid');
    this.$toolbar = $('#toolbar');

    this.initGrid();
    this.initToolbar();
    this.events();
};

profileIndex.prototype.events = function(){
    this.$toolbar.on('change', '.myDropdown', $.proxy(this._evChangeDropdown, this));
};

profileIndex.prototype._evChangeDropdown = function(e){
    e.preventDefault();
    var $target = $(e.currentTarget),
        val = $target.val();

    $.ajax({
        url: "/profile/UpdateNewForm",
        type: 'get',
        data: { Id: val },
        dataType: 'json',
        success: $.proxy(this._evChangeDropdownSuccess, this),
        error: $.proxy(this._evChangeDropdownError, this)
    });
};

profileIndex.prototype._evChangeDropdownSuccess = function(response){
    var $form = $(response.htmlString);
    this.$toolbar.find('.js-newForm').replaceWith($form);
    $form.bsInitUI();
};

profileIndex.prototype._evChangeDropdownError = function(){
    console.trace();
};

You are actually replacing only the form (child of toolbar) and you don't need to add any controls or apply the toolbar again.

Let me know if you still have any problems and show me your full code (views, js)