jquery miscellaneous notes

1. Selector example

//radio button group, select the first one
$("#userForbidForm input[name='forbidMinutes']").get(0).checked=true;   

//Get the value selected by the multi-select button
$("#userForbidForm input[name='forbidMinutes']:checked").val();  

//Get the value of select, name="controlKey" under the form with id="queryForm"
$("#queryForm select[name='blacklistStatus']").val();

//The radio button gets the value of the selected button
$("input[type=radio]:checked").val()；  

//Get the value of input under the form with id="queryForm", name="controlKey"
$("#queryForm input[name='controlKey']").val()  

//Set id="updateBlackForm" to select under the form, name="controlKey" drop-down list selects value="spName" by default
$("#updateBlackForm select[name='controlKey']").value('spName');

 

2. Ajax submit form asynchronously

$.ajax({
        type: "post",
        url:"send.do",
        data:$('#userForbidForm').serialize(), //Submit the entire form
        success: function(data) {
            alert("Success.");
        },
        error: function(request) {
            alert("Failed.");
        }
    });

 

3. Patch up the form, patch up the parameter submission

$.ajax({
	url: 'email!send.action',
	type: 'post',
	data: $("form.jasperReportForm").serialize() + '&' + $("#hiddenForm").serialize() + '&' + $("#emailAddressForm").serialize()+'&pdfFilename='+$("#pdfFilename").val(),
	success: function(data) {
		$("#progressDialog").hide();
		displayResult("Your email report request has been submitted successfully.");
	},
	error: function() {
		$("#progressDialog").hide();
		displayError("Failed to send report");
	}
});

  

 

4. Dynamically add elements to the table, and delete elements

<table id="ongoing_campaigns" rules="cols" class="dataTable" bgcolor="#FFFFFF">
	<!--This is a table with dynamically added data-->													
</table>

 

//Add the first row of data to the table whose id is ongoing_campaigns
$("#ongoing_campaigns").append("<tr bgcolor='#007FC3'>"
	+ "<th style='width: 300px;'>Event Name</th>"
	+ "<th style='width: 135px;'>Start Date</th>"
	+ "<th style='width: 135px;'>Duration</th>"
	+ "</tr>");
	
// delete all child elements of the table with id ongoing_campaigns
$("#ongoing_campaigns").empty();