Nov 14 2006

Update multiple templated controls HTML

Posted by admin under Ajax

In the example here we used AJAH technique (Asynchronous Javascript And Html) and returned pure html (generated from a templated repeater control in our page class) for updating just a part of the interface.

We just returned a single chunk of data and took all that data and put it into the innerHtml of a div control.

However - the problem is: what if we have multiple controls to update? I.e one single Ajax call should update multiple controls in the interface and we still want to use the AJAH technique so we could have the pages generate HTML just as if we were not using ajax at all.

Here is the sample (downloadable of course)

In this example we have one single call - triggered when a filter is selected but now we want to update two controls - the employees table - but also the territories table which sould contain the linked territories for the filtered employees.

In this solution we will call the GetHtml for more than one control and concatenate the result using some sort of separator (for example 10 #:s and split it at the client using javascript).

Our Page_Load looks like this:



...
...
...
            rptTable.DataBind();
            rptTable2.DataBind();
            if (Request["w"] != null && Request["w"] == "callback")
            {
                //Just return the rptTable html...
                Response.Cache.SetCacheability(HttpCacheability.NoCache);
                string sRet = GetHtml( rptTable );
                sRet += "##########";
                sRet += GetHtml(rptTable2);
                Response.Write(sRet);
                Response.End();

            }

As I said, we call GetHtml twice - once for each control - and we also separate them using the string "##########"



...
...
...
            rptTable.DataBind();
            rptTable2.DataBind();
            if (Request["w"] != null && Request["w"] == "callback")
            {
                //Just return the rptTable html...
                Response.Cache.SetCacheability(HttpCacheability.NoCache);
                string sRet = GetHtml( rptTable );
                sRet += "##########";
                sRet += GetHtml(rptTable2);
                Response.Write(sRet);
                Response.End();

            }

On the client side we just split the data and updates the different dvs after that:



function AjaxGetHTML(sUrl)
{
    $.get(sUrl,function(result)
        {
         var col_array = result.split('##########')
         $('#repeater1').html( col_array[0] );
         $('#repeater2').html( col_array[1] );
        });
 }