a. Change field Title to Customer ID
b. Create new fields:
Name: Single line of text
Address: Single line of text
c. Create new items as follows:
2. Open Sharepoint Designer 2010
a. In Site Pages, create new page ASPX
b. Name is SearchCustomer.aspx
c. Design UI as follows:
d. Code here
<table
style="width: 50%">
<tr>
<td>Customer
ID:</td>
<td>
<input
id="txtCustomerID" type="text" />
</td>
</tr>
<tr>
<td>Customer
Name:</td>
<td>
<input
id="txtCustomerName" type="text" /></td>
</tr>
<tr>
<td>Address:</td>
<td>
<input
id="txtCustomerAddress" type="text" /></td>
</tr>
<tr>
<td> </td>
<td>
<input
id="btnSearch" type="button" value="Search"
onclick="SearchCustomer();"/></td>
</tr>
</table>
e. Open Sharepoint site
3. Start code
a. Download 2 files jquery-1.4.2.js and
jquery.SPServices-0.5.6 at here and
upload to Shared Documents on top level site.
b. Attach 2 files .js to code html above close tag
head
<script
type="text/javascript" src="../Shared
Documents/jquery-1.4.2.js"></script>
<script
type="text/javascript" src="../Shared
Documents/jquery.SPServices-0.5.6.js"></script>
c. Code here
<script
type="text/javascript">
var
id="#txtCustomerID";
function
SearchCustomer() {
try
{
$().SPServices({
operation:
"GetListItems",
async:
false,
listName:
"Customer",
CAMLQuery:
'<Query><Where><Eq><FieldRef Name="Title"
/><Value Type="Text">'+
$(id).val()+'</Value></Eq></Where></Query>',
completefunc:
function(xData, Status) {
//alert(xData.responseXML.xml);
$(xData.responseXML).find("z\\:row").each(function()
{
$("#txtCustomerName").val($(this).attr("ows_Name"));
$("#txtCustomerAddress").val($(this).attr("ows_Address"));
});
}
});
}
catch
(e) { alert(e); }
}
</script>
4. Save file and run on IE => OK
5. Run on FireFox => OK
6. Run on FireFox => not OK
0 comments:
Post a Comment