dotnetnuke ajax example

1.Here we have two related drop down and when on selected , secod one will be repopulated with related values , here is javascript part of the code placed directly into ascx control.

 
<script type="text/javascript">
    function PageMethod(fn, paramArray, successFn, errorFn) {
        //Create list of parameters in the form:
        //{"paramName1":"paramValue1","paramName2":"paramValue2"}
        var paramList = '';
        if (paramArray.length > 0) {
            for (var i = 0; i < paramArray.length; i += 2) {
                if (paramList.length > 0) paramList += ',';
                paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"';
            }
        }
        paramList = '{' + paramList + '}';
        //Call the page method
        $.ajax({
            type: "POST",
            url: fn,
            contentType: "application/json; charset=utf-8",
            data: paramList,
            dataType: "json",
            success: successFn,
            error: errorFn
        })
        ;
    }



    var TargetDD='';
    function Repopulate(value, TargetDDId, url2call) {
        TargetDD = TargetDDId;
        PageMethod(url2call, ["Group", "" + value], AjaxSucceeded, AjaxFailed); //No parameters
    }

    function AjaxSucceeded(result) {
        //alert(result.d[0].FirstName);
        var elem = document.getElementById(TargetDD);
        $(elem).empty();
        $.each(result.d, function (index, v1) {
            
            $(elem).append(
                $('<option></option>').val(v1.MembershipNumber).html(v1.FirstName + " " + v1.LastName)
            );
        });

    }
    
    function AjaxFailed(result) {
        alert("ajax failed" + result.d);
    }

</script>

2.Create jsonhub page for making ajax calls from different pages

Imports DotNetNuke.Modules.MembershipModule
Imports System.Web.Services

Namespace NEvoWeb.Modules.NB_Store
    Public Class jsonhub
 Inherits System.Web.UI.Page

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

 End Sub

 <WebMethod()>
 Public Shared Function MSearchVolunteersbyGroup(Group As Integer) As ArrayList
     Dim c As New MembershipModuleController
     Return c.MSearchVolunteersbyGroup(Group)
 End Function

    End Class
End Namespace

3.Ad ajax calls inside of control:

 
Dim jscall As String = String.Format("Repopulate(this.value,'{0}','{1}');", ddlSalesRep.ClientID, Me.TemplateSourceDirectory + "/jsonhub.aspx/MSearchVolunteersbyGroup")
ddlTeam.Attributes.Add("onchange", jscall)