looping through select option values using array with jquery

var foo = [];
$('#multiple :selected').each(function(i, selected){
  foo[i] = $(selected).text();
});

Problem with JQuery Show() Method when an html control is in Show() state.

I have two divs Div1 and Div2.

I opened Div1 and Div2.

I div1 function i need to close Div2. Suppose if i open Div1 and Div2 both then div2 is also in show() state. If div is in show state and if you try to perform show() on Div2 then you will get the error "object doesnt support this property or method". To avoid this you have to check whether the object div2 is in hide() mode or not.

Example:-
     if($('#div2').hide())
     {
            //Perform show Operation.
           $('#div2').show();
     }

How to Rewrite a Default breadcrumb using JQuery in SharePoint 2007 or SharePoint 2010

1. First open your SharePoint site which you want to perform the operation.
2. Now press F12 key so that IE Developer Toolbar will open.
3. Now want to change the URL and Text for Hyperlink along with URL.

See the sample code for this.

Example1:-

$('a:contains("Sample Radio")').html("<a href='http://google.com'>Test JQuery in Breadcrumb</a>");

The same way you should do for other controls also.

Example2:-

$('h3:contains("Hide1")').html("<Span><A href='http://google.com'>Google</Span>");

Search LookUp Column and select the value in the Dropdownlist using ECMA Script and JQuery

var myColl="";
var myColl1="";
var strCurrentWeb="";
var strCurrentSiteUrl="";
function SearchLookUpData()
{
    try
    {
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        strCurrentWeb=context.get_url();
        strCurrentSiteUrl=window.location.protocol + '//' + window.location.host + strCurrentWeb;
        var list = web.get_lists().getByTitle('Book Names');
        var sQuery="<View><Query><Where><Eq><FieldRef Name='ID' /><Value Type='Counter'>4</Value></Eq></Where></Query></View>";
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml(sQuery);
        this.myColl1 = list.getItems(camlQuery);
        context.load(this.myColl1, 'Include(Title, ID, Category)');
        context.executeQueryAsync(Function.createDelegate(this, this.SearchLookUpDataSuccess), Function.createDelegate(this, this.SearchLookUpDataFailed));
    }
    catch(Ex)
    {
        alert(Ex);
    }
}

function SearchLookUpDataSuccess()
{
    var strBookNames="";
    strBookNames+="<Table>";
    if(myColl1.get_count()!=0)
    {
        var listEnumerator = this.myColl1.getEnumerator();
        while (listEnumerator.moveNext())
        {
            var item = listEnumerator.get_current();
            var strCategoryID=item.get_item('Category').get_lookupId();
            $('select#ddlCategory').val(strCategoryID);
            break;
        }
    }
    else
    {
       

    }   
}

function SearchLookUpDataFailed(sender, args)
{
    alert('failed. Message:' + args.get_message());
}

function BindData()
{
    ExecuteOrDelayUntilScriptLoaded(BindLookUpData, "sp.js");
    ExecuteOrDelayUntilScriptLoaded(SearchLookUpData, "sp.js");
}


function BindLookUpData()
{
    try
    {
        //debugger;
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        strCurrentWeb=context.get_url();
        strCurrentSiteUrl=window.location.protocol + '//' + window.location.host + strCurrentWeb;
        var list = web.get_lists().getByTitle('Book Category');
        var sQuery="<View><Query><OrderBy><FieldRef Name='ID' /></OrderBy></Query></View>";
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml(sQuery);
        this.myColl = list.getItems(camlQuery);
        context.load(this.myColl, 'Include(Title, ID)');
        context.executeQueryAsync(Function.createDelegate(this, this.BindLookUpDataSuccess), Function.createDelegate(this, this.BindLookUpDataFailed));
    }
    catch(Ex)
    {
        alert(Ex);
    }
}

function BindLookUpDataSuccess()
{
    var strBookNames="";
    if(myColl.get_count()!=0)
    {
        var listEnumerator = this.myColl.getEnumerator();
        strBookNames+="<Select id='ddlCategory' width='158px'>";
        strBookNames+="<Option>Select Category</Option>";
        while (listEnumerator.moveNext())
        {
            var item = listEnumerator.get_current();
            var strItemID=item.get_item('ID');
            var strTitle=item.get_item('Title');
            strBookNames+="<Option Value='"+strItemID+"'>"+strTitle+"</Option>";
        }
        strBookNames+="</Select>";
    }
    document.getElementById("tdCategory").innerHTML=strBookNames;
}

function BindLookUpDataFailed(sender, args)
{
    alert('failed. Message:' + args.get_message());
}

_spBodyOnLoadFunctionNames.push("BindData");

How to select a particular value or text with in a Dropdownlist using JQuery

HTML Select Value Example:- $('select#ddlCategory').val("3"); Note:- Here I am selecting the option which contains 3.

HTML Select Text Example:- $("select#ddlCategory").find("option:contains('SharePoint 2010')").prop("selected", "selected"); Note:- Here I am selecting the option which contains SharePoint 2010

Binding Data to TD on Page Load using JQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Binding Data to TD on Page Load using JQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
    $(function()
    {
        var strDynamicTable="";
        strDynamicTable+="<Table width='100%' cellpadding='0' cellspacing='0'>";
        strDynamicTable+="<Tr>";
        strDynamicTable+="<Td>";
        strDynamicTable+="<Strong>";
        strDynamicTable+="Test Bind Data Dynamically";
        strDynamicTable+="</Strong>";
        strDynamicTable+="</Td>";
        strDynamicTable+="</Tr>";
        strDynamicTable+="</Table>";
        $("#tdBindDataDynamically").html(strDynamicTable);
    });
});
</script>
</head>

<body>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td id="tdBindDataDynamically"></td></tr></table>
</body>

</html>

Validations using JQuery

<html>

<head>
<title>Validations using JQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
    $("#btnValidate").click(function()
    {
        if($("#txtValidate").val()=="")
        {
            alert('Please enter some thing in TextBox');
            return false;
        }
       
        if($("#ddlValidate").get(0).selectedIndex==0)
        {
            alert('Please select a valid Option');
            return false;
        }
       
        if(!$("#chkValidate").get(0).checked)
        {
            alert('Please select CheckBox');
            return false;
        }
    });
});
</script>
</head>

<body>
<table cellpadding="0" cellspacing="0">
<tr><td colspan="2" align="center" style="font-weight:bold;">Validations using JQuery</td></tr>
<tr><td>Validate TextBox</td><td><input type="text" id="txtValidate" /></td></tr>
<tr><td>Validate DropDown</td><td><select id="ddlValidate"><option value="Select">Select</option><option value="A">A</option></select></td></tr>
<tr><td>Validate CheckBox</td><td><input type="checkbox" id="chkValidate" value="Validate CheckBox" /></td></tr>
<tr><td colspan="2" align="center"><input type="button" value="Validate Controls" id="btnValidate" /></td></tr>
</table>
</body>

</html>

Getting Dropdown selected Value and Selected Text using JQuery

<html>
<head>
<title>Enter Value in DropDown</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
    $("#btnGetDropDownValue").click(function()
    {
        alert('DropDown Value '+$("#ddlSample").val());
        alert('DropDown Text '+$("#ddlSample").find('option').filter(':selected').text());
    });
});
</script>
</head>

<body>
<table cellpadding="0" cellspacing="0">
<tr><td>Enter Value in TextBox</td><td><select id="ddlSample"><option value="A">A1</option><option value="B">B1</option><option value="C">C1</option></select></td></tr>
<tr><td colspan="2" align="center"><input type="button" id="btnGetDropDownValue" value="Get DropDown Value" /></td></tr>
</table>
</body>

</html>

Getting a TextBox Value using JQuery

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enter Value in TextBox</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
    $("#btnGetTextBoxValue").click(function()
    {
        alert($("#txtSample").val());
    });
});
</script>
</head>

<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td>Enter Value in TextBox</td><td><input type="text" id="txtSample" /></td></tr>
<tr><td colspan="2" align="center"><input type="button" id="btnGetTextBoxValue" /></td></tr>
</table>
</body>

</html>

JQuery sample to Show & Hide Divs

<html>

<head>

<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Apple</title>

<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

$("#btnAlphabets").click(function(){

$("#divAlphabets").show();

$("#divNumbers").hide();

});

$("#btnNumbers").click(function(){

$("#divAlphabets").hide();

$("#divNumbers").show();

});

});

</script>

</head>

<body>

<div id="divAlphabets">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td>Apple</td>

</tr>

<tr>

<td>Boy</td>

</tr>

<tr>

<td>Cat</td>

</tr>

<tr>

<td>Dog</td>

</tr>

<tr>

<td>Elephant</td>

</tr>

<tr>

<td>Fan</td>

</tr>

<tr>

<td>Gun</td>

</tr>

<tr>

<td>Hut</td>

</tr>

<tr>

<td>Ink</td>

</tr>

<tr>

<td>Kite</td>

</tr>

<tr>

<td>Lamp</td>

</tr>

<tr>

<td>Monkey</td>

</tr>

<tr>

<td>Nose</td>

</tr>

<tr>

<td>Owl</td>

</tr>

<tr>

<td>Pen</td>

</tr>

<tr>

<td>Queen</td>

</tr>

<tr>

<td>Rat</td>

</tr>

<tr>

<td>Sun</td>

</tr>

<tr>

<td>Tree</td>

</tr>

<tr>

<td>Umbrella</td>

</tr>

<tr>

<td>Van</td>

</tr>

<tr>

<td>Watch</td>

</tr>

<tr>

<td>X-Ray</td>

</tr>

<tr>

<td>Yacht</td>

</tr>

<tr>

<td>Zebra</td>

</tr>

</table>

</div>

<div id="divNumbers" style="display:none;">

<table>

<tr>

<td>1</td>

</tr>

<tr>

<td>2</td>

</tr>

<tr>

<td>3</td>

</tr>

<tr>

<td>4</td>

</tr>

<tr>

<td>5</td>

</tr>

<tr>

<td>6</td>

</tr>

<tr>

<td>7</td>

</tr>

<tr>

<td>8</td>

</tr>

<tr>

<td>9</td>

</tr>

<tr>

<td>10</td>

</tr>

<tr>

<td>11</td>

</tr>

<tr>

<td>12</td>

</tr>

<tr>

<td>13</td>

</tr>

<tr>

<td>14</td>

</tr>

<tr>

<td>15</td>

</tr>

<tr>

<td>16</td>

</tr>

<tr>

<td>17</td>

</tr>

<tr>

<td>18</td>

</tr>

<tr>

<td>19</td>

</tr>

<tr>

<td>20</td>

</tr>

<tr>

<td>21</td>

</tr>

<tr>

<td>22</td>

</tr>

<tr>

<td>23</td>

</tr>

<tr>

<td>24</td>

</tr>

<tr>

<td>25</td>

</tr>

</table>

</div>

<div>

<table><tr><td><input type="button" id="btnAlphabets" value="Show Alphabets" /></td><td><input type="button" id="btnNumbers" value="Show Numbers" /></td></tr></table>

</div>

</body>

</html>