jQuery and dropdowns
jQuery and dropdowns
Hi,
I am about to build a advertisement site but have some problems with the category dropdowns.
My thought is to have 5 dropdowns on the page, these dropdowns will be generated by the MVC helper like this :
- <%: Html.DropDownListFor(model => model.CS.C1, Model.CS.Category1List, "-- Välj kategori --")%>
This means that a dropdown will be generated with the id CS_C1 adn itll will be filled with the collection in model.CS.C1 (from the service). It will by this be possible to fill the first dropdown without jQuary.
When the user selects a category from the first dropdown the dropdown.change event will be triggered and this looks somthing like this :
- $(document).ready(function () {
$('#CS_C1').change(function () {
var url = '/AdCategory/GetCategoriesByParent2/' + $(this).val();
$.ajax({ url: url, success: DataRetrieved, type: 'POST', dataType: 'json' });
});
});
The result of this function is that ajax will go to the service and fetch data and then return to the DataRetrived function with this data.
The data will contain the list for the next dropdown and the filter for the current choosen category. This means that first the second dropdown will be filled, then the filter will be set (extra settings for the search like price intervals and so on).
I got a couple of questions on this :
- How do I know in the DataRerieved function what dropdown that driggered the load? I do have to know that to be able to know which dropdown to load and show and whichone to hide.
- Its important that the right dropdowns and right filter is set on every new page. It most be possible to typ/copy in a URL that will set the proper dropdown and filters. By using Html helper (Html.DropDownListFor) can help with this, but Im not sure how to handle this togheter with the jQuery?
- I have looked at this article and this looks grate, but I need to also implement the filter part which means that I need to change the source in some way. The problem is that I do not understand how the code work. The best would be if someone coulde explain it. The code looks like this :
- /*
* CascadingDropDown : a jQuery plugin, version: 0.2 (2010-05-21)
* @requires jQuery v1.4 or later
*
* CascadingDropDown is a jQuery plugin that can be attached to a select list to get automatic population.
* Each time the source element changes value, an ajax request is made to retrieve a list of values for
* the select list. The respose from the ajax request should be in json with the following format
*
* [{
* "Text": "John",
* "Value": "10326"
* },
* {
* "Text": "Jane",
* "Value": "10801"
* }]
*
*
* Licensed under the MIT:
* http://www.opensource.org/licenses/mit-license.php
*
* Raj Kaimal http://weblogs.asp.net/rajbk/
*
* v0.2 Added support for custom postData using functions
*
*
*/
(function ($) {
$.fn.CascadingDropDown = function (source, actionPath, settings, hideEmpty) {
if (typeof source === 'undefined') {
throw "A source element is required";
}
if (typeof actionPath == 'undefined') {
throw "An action path is requried";
}
var optionTag = '<option></option>';
var config = $.extend({}, $.fn.CascadingDropDown.defaults, settings);
return this.each(function () {
var $this = $(this);
if (hideEmpty == true) {
$this.css("visibility", "hidden");
}
(function () {
var methods = {
clearItems: function () {
$this.empty();
if (!$this.attr("disabled")) {
$this.attr("disabled", "disabled");
}
if (hideEmpty == true) {
if ($this.children().size() < 2) {
$this.css("visibility", "hidden");
}
else {
$this.css("visibility", "visible");
}
}
},
reset: function () {
methods.clearItems();
$this.append($(optionTag)
.attr("value", "")
.text(config.promptText));
$this.trigger('change');
},
initialize: function () {
if ($this.children().size() == 0) {
methods.reset();
}
else {
if (hideEmpty == true) {
if ($this.children().size() < 2) {
$this.css("visibility", "hidden");
}
else {
$this.css("visibility", "visible");
}
}
}
},
showLoading: function () {
methods.clearItems();
$this.append($(optionTag)
.attr("value", "")
.text(config.loadingText));
$('input[type=submit]').attr('disabled', 'disabled');
},
loaded: function () {
$this.removeAttr("disabled");
$this.trigger('change');
$('input[type=submit]').removeAttr("disabled");
},
showError: function () {
methods.clearItems();
$this.append($(optionTag)
.attr("value", "")
.text(config.errorText));
$('input[type=submit]').removeAttr("disabled");
},
post: function () {
methods.showLoading();
$.isFunction(config.onLoading) && config.onLoading.call($this);
$.ajax({
url: actionPath,
type: 'POST',
dataType: 'json',
data: ((typeof config.postData == "function") ? config.postData() : config.postData) || 'id=' + $(source).val(),
success: function (data) {
methods.reset();
$.each(data, function () {
$this.append($(optionTag)
.attr("value", this.Value)
.text(this.Text));
});
if (hideEmpty == true) {
if ($this.children().size() < 2) {
$this.css("visibility", "hidden");
}
else {
$this.css("visibility", "visible");
}
}
methods.loaded();
$.isFunction(config.onLoaded) && config.onLoaded.call($this);
},
error: function () {
methods.showError();
}
});
}
};
$(source).change(function () {
var parentSelect = $(source);
if (parentSelect.val() != '') {
methods.post();
}
else {
methods.reset();
}
});
methods.initialize();
})();
});
}
$.fn.CascadingDropDown.defaults = {
promptText: '-- Select --',
loadingText: 'Loading ..',
errorText: 'Error loading data.',
postData: null,
onLoading: null,
onLoaded: null
}
})(jQuery);
Hope you understand where Im going with this.
BestRegards