Bookmark and Share

Monday, November 30, 2009

JQuery assorted tips

Here are some useful JQuery 1.2.7 code snippets:

//Select the cheched checbox:
$('#myId').find('input[@type=radio][@checked]')
//Get an array of text of the selected SELECT
var elems = $.map($('#myId).find('select :selected'),function(a){return $(a).text();})
//Get an array of the values of the selected SELECT
var txtelems = $.map($('#myId).find('[@id=innerElementId]').find('input'),function(a){return $(a).val();});
//Set the title on a element
$(idTxtSearch).attr('title','my title');
//Focus a textbox (INPUT field)
$(idTxtSearch).focus();
//reset the value of a textbox (INPUT field)
$(idTxtSearch).val('');
//not JQuery, add a trim function to the JavaScript String object
String.prototype.trim = function ()
{
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
//ASP.NET + JQuery + blockUI
//Call the postback on a button after having blocked the page
//Note that the __doPostBack requires the name of the element, not the Id, asp.net rules.
$.blockUI({message:$('#myId').html()});
__doPostBack($('#<%= myAspNetBtn.ClientID %>').attr('name'), '');
//Attach the keyup event of a textvox
$().keyup(function(e){myFunction();});
//function for the blur and focus events
searchBoxes.focus(function(e){$(this).addClass("mycss");});
searchBoxes.blur(function(e){$(this).removeClass("mycss");});
//reset all the checkboxes inside an element
$('#myid > input[@type=radio]').attr('checked','')
//find the first DIV inside a table row that contains a value
if ($('#myid').find('tr:contains(thestring)').find('div:eq(1)').length>0)
//reset an element and add some HTML
$('#myid').empty().append(someHTML);
//find all visible elements inside an element with class myClass
$('.myClass').find('*').css("visibility","visible");
//change the source image on some images 
$(elemDiv).find('IMG[@src*="myvalue"]').attr('src','images/oem/newimg.png');
//add the nowrap attribute to all TDs
$(elemDiv).find('TD').attr('nowrap','nowrap');
//hide an element 
$('.myClass').hide();
//disable a button
btn.attr('disabled','disabled');
//find the first element with the same attribute and get the display attribute
$("[@myattr='my-row']:first").css('display');
//Toggle a class on a element
element.toggleClass("myClass");
//Execute script after the page load
$(document).ready(function()
{
//some js here;
});
//find the first image inside an element and chenge the image source
element.children('img:first').attr('src',newSrc);
//duplicate an HTML element
$('#myId').clone();
//get the url of an anchor with id=myId
var sUrl = $("a[@id='myId']").attr('href');
//hide all anchors inside an element
$('#myId').find('A').css('display','none');
//get the text of an element
var text = $('#myId').text();
//disable a button
$('#myId').attr('disabled', true);
//click a button after the load of the page
$(document).ready(function(){$('#myId').click()});
//check all visible checkboxes inside a table
function selectAllVisibleCheckBox(idTable)
{
$("#" + idTable).find("input[@type$='checkbox']").each(function()
{
if ($(this).parents("TR").css("display")!='none')
this.checked=true;
}
);
return false;
}
//call the classical HelloWorld asmx web service using JQuery
jQuery.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebServices.asmx/HelloWorld",
data: "{'msg':'hello!'}",
dataType: "json"
});