Jquery does not executes after ajax call - asp.net

Question

i have a asp dropdownlist, which is getting generated by ajax, now my problem is, i have a jquery, now basically this jquery is for apply dropdown effect to any select element, now what this does is, once the select element have some option, it hide those option and copy those inside ul and li format, now whats happening, before my ajax call is made, this jquery is executed, and as it finds nothing in select element, it does not creates ul and li, because of which i always gets blank list, i tried placing static items inside DropDownList, it works, but with jquery it does not works, i also tried to place whole jquery code (Jquery which is adding slide effect for dropdownlist) inside document.ready below the ajax call function, but that too is not working, below is my ajax function:
function GetRegion() {
$("select[id$=ddlRegion] > option").remove();
$.ajax({
type: "POST",
url: "InteractiveMap.asmx/GetRegions",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
var Items = data.d;
ddlRegion.attr("disabled", false);
ddlCountry.append('<option value="-1">--Select Region--</option>');
$.each(Items, function (index, Item) {
ddlRegion.append('<option value="' + Item.RID + '">' + Item.Text + '</option>');
});
ddlRegion.val(RegionQueryString);
},
failure: function (msg) {
ShowErrorMessage(msg);
}
});
}
and below is my jquery which is adding slide effect, sorry but its pretty large:
(function ($) {
$.fn.jNice = function (options) {
var self = this;
var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
/* Apply document listener */
$(document).mousedown(checkExternalClick);
/* each form */
return this.each(function () {
$('input:submit, input:reset, input:button', this).each(ButtonAdd);
$('button').focus(function () { $(this).addClass('jNiceFocus') }).blur(function () { $(this).removeClass('jNiceFocus') });
$('input:text:visible, input:password', this).each(TextAdd);
/* If this is safari we need to add an extra class */
if (safari) { $('.jNiceInputWrapper').each(function () { $(this).addClass('jNiceSafari').find('input').css('width', $(this).width() + 11); }); }
$('input:checkbox', this).each(CheckAdd);
$('input:radio', this).each(RadioAdd);
$('select', this).each(function (index) {
//$(this).attr('size')
if ($(this).attr('multiple')) {
MultipleSelectAdd(this, index);
}
else
SelectAdd(this, index);
});
/* Add a new handler for the reset action */
$(this).bind('reset', function () { var action = function () { Reset(this); }; window.setTimeout(action, 10); });
$('.jNiceHidden').css({ opacity: 0 });
});
}; /* End the Plugin */
var Reset = function (form) {
var sel;
$('.jNiceWrapper select', form).each(function () { sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('.jNiceSelectWrapper ul', $(this).parent()).each(function () { $('a:eq(0)', this).click(); }); });
$('.jNiceWrapper select', form).each(function () {
sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('.jNiceMultipleSelectWrapper ul li', $(this).parent()).each(function () {
if ($('a:first', this).hasClass('selected'))
$('a:first', this).click();
});
});
$('a.jNiceCheckbox, a.jNiceRadio', form).removeClass('jNiceChecked');
$('input:checkbox, input:radio', form).each(function () { if (this.checked) { $('a', $(this).parent()).addClass('jNiceChecked'); } });
};
var RadioAdd = function () {
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jRadioWrapper jNiceWrapper"></span>');
var $wrapper = $input.parent();
var $a = $('<span class="jNiceRadio"></span>');
$wrapper.prepend($a);
/* Click Handler */
$a.click(function () {
var $input = $(this).addClass('jNiceChecked').siblings('input').attr('checked', true);
/* uncheck all others of same name */
$('input:radio[name="' + $input.attr('name') + '"]').not($input).each(function () {
$(this).attr('checked', false).siblings('.jNiceRadio').removeClass('jNiceChecked');
});
return false;
});
$input.click(function () {
if (this.checked) {
var $input = $(this).siblings('.jNiceRadio').addClass('jNiceChecked').end();
/* uncheck all others of same name */
$('input:radio[name="' + $input.attr('name') + '"]').not($input).each(function () {
$(this).attr('checked', false).siblings('.jNiceRadio').removeClass('jNiceChecked');
});
}
}).focus(function () { $a.addClass('jNiceFocus'); }).blur(function () { $a.removeClass('jNiceFocus'); });
/* set the default state */
if (this.checked) { $a.addClass('jNiceChecked'); }
};
var CheckAdd = function () {
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jNiceWrapper"></span>');
var $wrapper = $input.parent().append('<span class="jNiceCheckbox"></span>');
/* Click Handler */
var $a = $wrapper.find('.jNiceCheckbox').click(function () {
var $a = $(this);
var input = $a.siblings('input')[0];
if (input.checked === true) {
input.checked = false;
$a.removeClass('jNiceChecked');
}
else {
input.checked = true;
$a.addClass('jNiceChecked');
}
return false;
});
$input.click(function () {
if (this.checked) { $a.addClass('jNiceChecked'); }
else { $a.removeClass('jNiceChecked'); }
}).focus(function () { $a.addClass('jNiceFocus'); }).blur(function () { $a.removeClass('jNiceFocus'); });
/* set the default state */
if (this.checked) { $('.jNiceCheckbox', $wrapper).addClass('jNiceChecked'); }
};
var TextAdd = function () {
var $input = $(this).addClass('jNiceInput').wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"></div></div>');
var $wrapper = $input.parents('.jNiceInputWrapper');
$input.focus(function () {
$wrapper.addClass('jNiceInputWrapper_hover');
}).blur(function () {
$wrapper.removeClass('jNiceInputWrapper_hover');
});
};
var ButtonAdd = function () {
var value = $(this).attr('value');
$(this).replaceWith('<button id="' + this.id + '" name="' + this.name + '" type="' + this.type + '" class="' + this.className + '" value="' + value + '"><span><span>' + value + '</span></span>');
};
/* Hide all open selects */
var SelectHide = function () {
$('.jNiceSelectWrapper ul:visible').hide();
};
/* Check for an external click */
var checkExternalClick = function (event) {
if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { SelectHide(); }
};
var SelectAdd = function (element, index) {
var $select = $(element);
index = index || $select.css('zIndex') * 1;
index = (index) ? index : 0;
/* First thing we do is Wrap it */
$select.wrap($('<div class="jNiceWrapper"></div>').css({ zIndex: 100 - index }));
var width = $select.width();
$select.addClass('jNiceHidden').after('<div class="jNiceSelectWrapper"><div><span class="jNiceSelectText"></span><span class="jNiceSelectOpen"></span></div><ul></ul></div>');
var $wrapper = $(element).siblings('.jNiceSelectWrapper').css({ width: width + 'px' });
$('.jNiceSelectText, .jNiceSelectWrapper ul', $wrapper).width(width - $('.jNiceSelectOpen', $wrapper).width());
/* IF IE 6 */
if ($.browser.msie && jQuery.browser.version < 7) {
$select.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $select.height() + 4 + 'px' }));
}
/* Now we add the options */
SelectUpdate(element);
/* Apply the click handler to the Open */
$('div', $wrapper).click(function () {
var $ul = $(this).siblings('ul');
if ($ul.css('display') == 'none') { SelectHide(); } /* Check if box is already open to still allow toggle, but close all other selects */
$ul.slideToggle('fast');
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({ scrollTop: offSet });
return false;
});
/* Add the key listener */
$select.keydown(function (e) {
var selectedIndex = this.selectedIndex;
switch (e.keyCode) {
case 40: /* Down */
if (selectedIndex < this.options.length - 1) { selectedIndex += 1; }
break;
case 38: /* Up */
if (selectedIndex > 0) { selectedIndex -= 1; }
break;
default:
return;
break;
}
$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
$('span:eq(0)', $wrapper).html($('option:eq(' + selectedIndex + ')', $select).attr('selected', 'selected').text());
return false;
}).focus(function () { $wrapper.addClass('jNiceFocus'); }).blur(function () { $wrapper.removeClass('jNiceFocus'); });
};
var MultipleSelectAdd = function (element, index) {
var $select = $(element);
var size = parseInt($select.attr('size'));
index = index || $select.css('zIndex') * 1;
index = (index) ? index : 0;
/* First thing we do is Wrap it */
$select.wrap($('<div class="jNiceWrapper"></div>').css({ zIndex: 100 - index }));
var width = $select.width();
$select.addClass('jNiceHidden').after('<div class="jNiceMultipleSelectWrapper"><div><span class="jNiceSelectText"></span><span class="jNiceSelectOpen"></span></div><ul></ul></div>');
var $wrapper = $(element).siblings('.jNiceMultipleSelectWrapper').css({ width: width + 'px' });
$('.jNiceSelectText, .jNiceMultipleSelectWrapper ul', $wrapper).width(width - $('.jNiceSelectOpen', $wrapper).width());
//$('.jNiceMultipleSelectWrapper ul').height(($select.height()+4) +'px');
//$('.jNiceMultipleSelectWrapper ul').css({'overflow-x':'hidden','overflow-y':'auto'});
/* IF IE 6 */
if ($.browser.msie && jQuery.browser.version < 7) {
$select.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $select.height() + 4 + 'px' }));
}
/* Now we add the options */
MultipleSelectUpdate(element);
/* Add the key listener */
$select.keydown(function (e) {
var selectedIndex = this.selectedIndex;
switch (e.keyCode) {
case 40: /* Down */
if (selectedIndex < this.options.length - 1) { selectedIndex += 1; }
break;
case 38: /* Up */
if (selectedIndex > 0) { selectedIndex -= 1; }
break;
default:
return;
break;
}
$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
$('span:eq(0)', $wrapper).html($('option:eq(' + selectedIndex + ')', $select).attr('selected', 'selected').text());
return false;
}).focus(function () { $wrapper.addClass('jNiceFocus'); }).blur(function () { $wrapper.removeClass('jNiceFocus'); });
};
var MultipleSelectUpdate = function (element) {
var $select = $(element);
var $wrapper = $select.siblings('.jNiceMultipleSelectWrapper');
var $ul = $wrapper.find('ul').find('li').remove().end().show();
$('option', $select).each(function (i) {
if ($('option:eq(' + i + ')', $select).attr('selected'))
$ul.append('<li>' + this.text + '</li>');
else
$ul.append('<li>' + this.text + '</li>');
});
/* Add click handler to the a */
$ul.find('a').click(function () {
//$('a.selected', $wrapper).removeClass('selected');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else
$(this).addClass('selected');
/* Fire the onchange event */
//if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
//$select[0].selectedIndex = $(this).attr('index');
/// we make the select in the input also true
$('option:eq(' + $(this).attr('index') + ')', $select).attr('selected', true);
if ($(this).attr('index') == 0)
$('span:eq(0)', $wrapper).html($(this).html());
return false;
});
/* Set the defalut */
$('a:eq(0)', $ul).click();
};
var SelectUpdate = function (element) {
var $select = $(element);
var $wrapper = $select.siblings('.jNiceSelectWrapper');
var $ul = $wrapper.find('ul').find('li').remove().end().hide();
$('option', $select).each(function (i) {
$ul.append('<li>' + this.text + '</li>');
});
/* Add click handler to the a */
$ul.find('a').click(function () {
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
//if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
if ($select[0].selectedIndex != $(this).attr('index')) {
$select.trigger('change');
}
$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the defalut */
$('a:eq(' + $select[0].selectedIndex + ')', $ul).click();
};
var SelectRemove = function (element) {
var zIndex = $(element).siblings('.jNiceSelectWrapper').css('zIndex');
$(element).css({ zIndex: zIndex }).removeClass('jNiceHidden');
$(element).siblings('.jNiceSelectWrapper').remove();
};
/* Utilities */
$.jNice = {
SelectAdd: function (element, index) { SelectAdd(element, index); },
MultipleSelectAdd: function (element, index) { MultipleSelectAdd(element, index); },
MultipleSelectUpdate: function (element) { MultipleSelectUpdate(element); },
SelectRemove: function (element) { SelectRemove(element); },
SelectUpdate: function (element) { SelectUpdate(element); },
Reset: function (element) { Reset(element); }
}; /* End Utilities */
/* Automatically apply to any forms with class jNice */
$(function () { $('.content').jNice(); });
})(jQuery);

Answer 1

You don't need to $.parseJSON(response); on success. jQuery parses it ahead of time and passes the object (not the JSON string) to the success function. So response contains the object.
See the "dataType" section for "json" here: http://api.jquery.com/jQuery.ajax/