Error: ejDropDownList: methods/properties can be accessed only after plugin creation
Bring up the simply dialog dropdownlist cascade error.
<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>
<div class="row">
<div class="">
<div class="padding : 30px;">
<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>
