jQuery

Selectors

For all selectors, see w3schools

Single selectors

The element selector: $("p") selects all <p> elements on a page
The #id selector: $("#test") selects the element with id="test"
The .class selector: $(".test") selects all elements with class="test"

Combined selectors

$("#pnlSummary legend") will select the legend elements within the element with id="pnlSummary".

Enabling/disabling controls - effects on HTML

jQuery HTML
.prop("disabled", true) disabled=""
.prop("disabled", false) removes disabled=""
.prop("disabled", "disabled") disabled=""
.attr("disabled", true) disabled="disabled"
.attr("disabled", false) removes disabled="disabled"
.attr("disabled", "disabled") not allowed in jQuery

Remarks:
- Tested on button and fieldset.
- Tested using Firefox Scratchpad with jQuery 1.11.0
- You can check the version of jQuery with: alert(jQuery.fn.jquery);

Controls - specific actions

Textbox, Label (span)

Read: $("txt").val();
Write textbox: $("txt").val("123");
Write label: $("lbl").text("123"); // if the text contains html that needs processing, use .html instead.
Enable: $("txt").prop("disabled", false);
Mind that sometimes also the css will cause the textbox to be disabled. In this case you also need something like this;
$("txt").removeClass("textbox-ro");
$("txt").addClass("textbox");
Disable: $("txt").prop("disabled", true);
Read only: $("txt").attr("readonly", true);
Not read only: $("txt").attr("readonly", false);

Checkbox (jQuery 1.6+)

Read checkbox: $("#cb").prop("checked");
Returns true or false
Check: $("cbCheck").prop("checked", true);
Uncheck: $("cbCheck").prop("checked", false);
Enable: $("cbCheck").prop("disabled", false);
Remark: in IE you also need to enable the surrounding span:
$("cbCheck").closest("span").prop("disabled", false);
Disable: $("cbCheck").prop("disabled", true);
Check if disabled: $("cbCheck").prop("disabled") - returns true or false
Event: OnClick

Dropdown list

Value
Get the value: $("ddl").val();
Set the value: $("ddl").val(QuoteDTO.Frequency);

Text
Get the selected text: $("ddl option:selected").text();
Get text for a value: $("ddl option[value=" + ID + "]").text()
Update the selected text: $("ddl option:selected").text(text);

Index
Set the selected index: $("ddl")[0].selectedIndex = 0;

Disable: $("ddl").attr("disabled", true);
Empty: $("ddl").empty();
Add a new item: $("ddl").append(new Option(text, value, defaultSelected, selectedNow));

Fill:

// Dto.Items contains 2 strings per item. The first contains the value, the second the text.
for (var count = 0; count < Dto.Items.length; count += 2) {
  items += '<option value="' + Dto.Items[count] + '">' + Dto.Items[count + 1] + '</option>';
}
$("ddl").html(items);

Event: OnChange

Button

Enable: $("#btn").prop("disabled", false);
jQueryUI: $("#btn").button("enable");
Disable: $("#btn").prop("disabled", "disabled");
jQueryUI: $("#btn").button("disable");
Check if disabled: $("#btn").prop("disabled")
Event: OnClientClick="btn_Click(); return false;"
The return false is to avoid the postback.
Change text: $("#btn").val("Save");
Remark:
The ASP.NET OnClientClick is not rendered into a onclick event if the button is disabled on page load.

Panel (div)

Enable: $("#pnl").removeAttr("disabled");
Remark: Also the controls in a panel will be disabled. So you also need to enable the separate controls in the panel:
$("#pnl :input").removeAttr("disabled");
Check if disabled: $("pnl").prop("disabled")
Hide: $("#pnl").hide();
Remark: this will set the style display to none.
Show: $("#pnl").show();

Radiobutton

Enable: $("#rb").attr("disabled", false);
Disable: $("#rb").attr("disabled", true);
$("#rb").prop("checked", true)

Datepicker

Initialize: $("#id").datepicker({ dateFormat: "dd/mm/yy", showWeek: true });

Controls - generic

Change backcolor: $("#").css("background-color", "red");
Change textcolor: $("#").css("color", "red");
Add class:$("txt").addClass("textbox");
Add class:$("txt").removeClass("textbox-ro");

Custom attributes

Read custom attributes

var customAttribute = $("aspnetForm").attr("customAttribute");

Write custom attributs (C#)

JavaScriptSerializer s = new JavaScriptSerializer();
Page.Form.Attributes.Add("Translations", s.Serialize(translations));

Interesting extended controls

http://jqueryui.com/
http://www.jeasyui.com/

References

jQuery

http://www.w3schools.com/jquery/default.asp

JSON examples

Single parameter
var parameters = '{"id":' + $("#txtId").val() + '}'; // {"id": 15}
Multiple parameters
var parameters = '{"id":' + $("#txtId").val() + ', "name":' + $("#txtName").val() + ', "isCustomer":' + JSON.stringify(false) + '}';
Object parameters
var parameters = '{"contact":' + JSON.stringify(ContactDto) + '}';

Ajax

Common: jQuery for the asp.net developer
Using complex types
Native JSON support (in FireFox, but also in IE,...0

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License