SharePoint Learning
Login
Signup Free
User Login
Close
 
 
Keep me logged in on this computer
Signup for a FREE user account
Close
Email
Password
Designation (optional)
First Name
Last Name
Headline (optional)
Online SharePoint training videos and articles
Price: FREE

Using AJAX in SharePoint Development

By Lin Zhang on 05 June 14

This article describes how you can use AJAX in SharePoint Development. Sample codes are provided.

What we want to do is selecting a "type of course" item to refresh the drop down list items in "Course", and selecting a "Course" item to refresh the "Software Version" items:
ajax
There is already a ScriptManager in the master page, so we don't need to add one in the webpart.
Put the following JavaScript Code on the top of the webpart (you need to include jQuery before this code):

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

<!--

var prm = Sys.WebForms.PageRequestManager.getInstance();

function CancelAsyncPostBack() {

if (prm.get_isInAsyncPostBack()) {

prm.abortPostBack();

}

}

prm.add_initializeRequest(InitializeRequest);

prm.add_endRequest(EndRequest);

var postBackElement;


 

var stillInProgress = false;

var displayLoadingAfter = 1000;


 

function InitializeRequest(sender, args) {

stillInProgress = true;

if (prm.get_isInAsyncPostBack()) {

args.set_cancel(true);

}

postBackElement = args.get_postBackElement();

setTimeout(function () {

if (stillInProgress) {

if (postBackElement.id.indexOf('ddlCourse') > 0) {

$('div[id*="UpdateProgress5"]').show();

} else if (postBackElement.id.indexOf('ddlTypeOfCourse') > 0) {

$('div[id*="UpdateProgress4"]').show();

} 

}

}, displayLoadingAfter);


 

}

function EndRequest(sender, args) {

stillInProgress = false;

if (postBackElement.id.indexOf('ddlCourse') > 0) {

$('div[id*="UpdateProgress5"]').hide();

} else if (postBackElement.id.indexOf('ddlTypeOfCourse') > 0) {

$('div[id*="UpdateProgress4"]').hide();

} else if (postBackElement.id.indexOf('ddlUser') > 0) {

$('div[id*="UpdateProgress2"]').hide();

}

}


 

// -->

</script>

Then the fields look like this:

<table><tr class="alt"><th>Type of Course <span class="red">*</span></th><td><asp:DropDownList ID="ddlTypeOfCourse"

runat="server" Width="300"

onselectedindexchanged="ddlTypeOfCourse_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList></td></tr>


 

<tr ><th>Course <span class="red">*</span></th><td>


 
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="ddlCourse" runat="server" Width="300" onselectedindexchanged="ddlCourse_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
        <asp:UpdateProgress ID="UpdateProgress4" AssociatedUpdatePanelID="UpdatePanel4" DisplayAfter="20000" runat="server">
            <ProgressTemplate>
            <img src="/Style%20Library/Custom%20Images/loading.gif" align="absmiddle" />  Please wait while loading the courses...
            </ProgressTemplate>
        </asp:UpdateProgress>
     </ContentTemplate>

    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlTypeOfCourse" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>
 

</td></tr>

<tr class="alt"><th>Software Version <span class="red">*</span></th><td>


 

<asp:UpdatePanel ID="UpdatePanel5" runat="server">

<ContentTemplate>

<asp:DropDownList ID="ddlSoftwareVersion" runat="server" Width="300"></asp:DropDownList>


 

<asp:UpdateProgress ID="UpdateProgress5" AssociatedUpdatePanelID="UpdatePanel5" runat="server">

<ProgressTemplate>

<img src="/Style%20Library/Custom%20Images/loading.gif" align="absmiddle" />  Please wait while loading version numbers...

</ProgressTemplate>

</asp:UpdateProgress>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="ddlCourse" EventName="SelectedIndexChanged" />

</Triggers>


 

</asp:UpdatePanel>


 

</td></tr></table>

 

Comments:

No comments.

Copyright © SharePointLearning.net.au. All Rights Reserved | Contact Us

Powered by DigiLife Studio