CascadingDropdown jquery plugin

CascadingDropdown is a great jquery plugin to implement cascading drop down in javascript

I suggest you this 2 demo links.
http://www.dnasir.com/github/jquery-cascading-dropdown/demo.html
http://www.jqueryscript.net/demo/Dynamic-jQuery-Cascading-Dropdown-Lists-Plugin/

This plugin works great when I navigate to a “create new item” page.
The problem I found is when I navigate to a “edit item” page and I pre fill all dropdown.
When the plugin initialize found the required combo already select it will trigger the change event and It will update the next combo, losing all server side values.
The solution I describe is not great but it works good.
I set a js variable if I’m in edit, then I save the html of the combo before init CascadingDropDown
When the plugin trigger the source function of the second combo I check if I’m in edit and I call response([]) that will made combo empty.

  • I turn firstLoadingInEdit to off
  • I set the server side generated Html
  • I enable the combo because response([]) don’t update enable
  • I use selectPicker JQuery plugin, so I have to refresh it
$(function () {
    initCombo();
});

function initCombo() {
    var isFirstLoadingInEdit = @Model.IdSymbol != 0;
    var oldHtml = $("#editIdParent").html();

    $("form").cascadingDropdown({
        selectBoxes: [
        {
            selector: '#editTypology',
            paramName: 'IdTypology',
        },
        {
            selector: '#editIdParent',
            requires: ['#editTypology'],
            source: function (request, response) {
                if (isFirstLoadingInEdit) {
                    response([]);
                    isFirstLoadingInEdit = false;
                    var $editIdParent = $("#editIdParent");
                    $editIdParent.html(oldHtml);
                    $editIdParent.removeAttr('disabled').triggerHandler('enabled');
                    $editIdParent.selectpicker('refresh');
                    return;
                }

                $.getJSON('@Url.Content("~/Admin/Symbol/SelectParentByTypology")', request, function (data) {
                    var selectOnlyOption = data.length <= 1;

                    response($.map(data, function (item, index) {
                        return {
                            label: item.desc,
                            value: item.key,
                            selected: item.isSelected || selectOnlyOption
                        };
                    }));
                    $("#editIdParent").selectpicker('refresh');

                    //$("#editIdParent").change();

                });
            },
            onChange: function (event, value, requiredValues, requirementsMet) {
                $("#dialogGenerateTemplate").attr("href", urlDownloadTemplate + "&ModelId=" + value);
            }
        }
        ]
    });
}
Annunci

Informazioni su Andrea Regoli

Project Manager .Net Developer WPF WP7 Asp.Net c# javascript ajax SQL sharepoint
Questa voce è stata pubblicata in HTML5, javascript, jquery, plugin e contrassegnata con , , , . Contrassegna il permalink.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...