Problem with DropDownList script error

[jinchul oh]

Hello,

Error: ejDropDownList: methods/properties can be accessed only after plugin creation

Bring up the simply dialog dropdownlist cascade error.

webForm.aspx

<div>

        <div class="cols-sample-area">

                <input class="e-btn" id="btnOpen" value="Click to open dialog" />

                <div class="control">

                    <div id="ajaxDialog">

                    </div>

                </div>

            </div>

    </div>

    <script type="text/javascript">

        $(function () {

            // declaration

            $("#ajaxDialog").ejDialog(

               {

                   contentUrl: "Dialog.aspx",

                   contentType: "ajax",

                   title: "Twitter",

                   width: "90%",

                   height: "90%",

                   content: ".cols-sample-area",

                   close: "onDialogClose"

               });

            $("#btnOpen").ejButton({ size: "medium", "click": "onOpen", type: "button", height: 30, width: 150 });

        });

        function onDialogClose(args) {

            $("#btnOpen").show();

        }

        function onOpen() {

            $("#btnOpen").hide();

            $("#ajaxDialog").ejDialog("open");

        }

    </script>

Dialog.aspx

 <div class="row">

            <div class="">

                <div class="padding : 30px;">

<div class="cascadding">

                        <div id="control" >

<span class="txt">Select Group</span>

<input id="groupsList" type="text" />

                        </div> 

                        <div id="binding">

<span class="txt">Select Country</span>

<input id="countryList" type="text" />

                        </div> 

                    </div>

</div>

                </div>

            </div>

    <script type="text/javascript">

        var target;

        $(function () {

            // declaration

            var groups = [

          { parentId: 'a', text: "Group A" },

          { parentId: 'b', text: "Group B" },

          { parentId: 'c', text: "Group C" },

          { parentId: 'd', text: "Group D" },

          { parentId: 'e', text: "Group E" }]

            //first level child

            var countries = [{ value: 11, parentId: 'a', text: "Algeria", sprite: "flag-dz" },

           { value: 12, parentId: 'a', text: "Armenia", sprite: "flag-am" },

           { value: 13, parentId: 'a', text: "Bangladesh", sprite: "flag-bd" },

           { value: 14, parentId: 'a', text: "Cuba", sprite: "flag-cu" },

           { value: 15, parentId: 'b', text: "Denmark", sprite: "flag-dk" },

           { value: 16, parentId: 'b', text: "Egypt", sprite: "flag-eg" },

           { value: 17, parentId: 'c', text: "Finland", sprite: "flag-fi" },

           { value: 18, parentId: 'c', text: "India", sprite: "flag-in" },

           { value: 19, parentId: 'c', text: "Malaysia", sprite: "flag-my" },

           { value: 20, parentId: 'd', text: "New Zealand", sprite: "flag-nz" },

           { value: 21, parentId: 'd', text: "Norway", sprite: "flag-no" },

           { value: 22, parentId: 'd', text: "Poland", sprite: "flag-pl" },

           { value: 23, parentId: 'e', text: "Romania", sprite: "flag-ro" },

           { value: 24, parentId: 'e', text: "Singapore", sprite: "flag-sg" },

           { value: 25, parentId: 'e', text: "Thailand", sprite: "flag-th" },

           { value: 26, parentId: 'e', text: "Ukraine", sprite: "flag-ua" }]

            $('#groupsList').ejDropDownList({

                dataSource: groups,

                fields: { value: "parentId",text:"text" },

                cascadeTo: 'countryList',

                change: "onChange",

width:"100%"

            });

            $('#countryList').ejDropDownList({

                dataSource: countries,

                enabled: false,

width:"100%"

            });

        });

        function onChange() {

            var ctry = $('#countryList').data("ejDropDownList");

            ctry.element.val("");

        }

    </script>

Thank you

Jinchul oh

Attachment: WebApplication1_6a618500.zip

[Keerthana Rajendran]

Hi Jinchul,   

  

We had checked your shared sample. An issue occurs because you had referred the script files in both web pages (Dialog.aspx and webForm1.aspx) of your application. We suggest you to refer the required scripts and css only in the main page(WebForm1.aspx) where you render the dialog to resolve the issue.   

  

We had prepared a sample for your reference. Kindly refer the below given link:   

  

Sample: http://www.syncfusion.com/downloads/support/forum/126082/ze/Dialog-1463665791.zip   

Regards,   

Keerthana.