Wednesday, March 21, 2012

A fetch ajax page isn’t updating within the fetch area

Hi! I'm having some limitation problem with ajax page that is fetch from a main ajax updating in a div tag. The fetch ajax is taking over main ajax page. In the asp control is not functioning as AsyncPostback, it's making a full postback then showing fetch ajax page instant.

WebRequest.aspx

1<body>2 <form id="form1" runat="server">3 <div>4 <h2>5 Using WebRequest</h2>6 <asp:ScriptManager runat="server" ID="ScriptManagerId">7 <Scripts>8 <asp:ScriptReference Path="WebRequest.js" />9 </Scripts>10 </asp:ScriptManager>11 <table>12 <tr align="left">13 <td>14 Request Body:</td>15 <td>16 <button id="Button2" onclick="PostWebRequest('ajax.aspx', 'ResultId0')">17 Make POST Request for .aspx file.</button>18 </td>19 </tr>20 </table>21 <hr />22 </div>23 </form>24 <div id="ResultId0">25 </div>26</body>

WebRequest.js

1var displayElement;23function pageLoad()4{5 PostWebRequest('ajax.aspx','ResultId0')6}78function PostWebRequest(postPage, HTMLtarget)9{10 displayElement = $get(HTMLtarget);11 var wRequest =new Sys.Net.WebRequest();12 wRequest.set_url(postPage);13 wRequest.set_httpVerb("POST");14 var body ="Message=Javascript generated POST parameter"15 wRequest.set_body(body);16 wRequest.get_headers()["Content-Length"] = body.length;17 wRequest.add_completed(OnWebRequestCompleted);18 wRequest.invoke();19}2021function OnWebRequestCompleted(executor, eventArgs)22{23if (executor.get_responseAvailable())24 {25// displayElement.innerHTML = "";26if (document.all)27 {28 displayElement.innerHTML += executor.get_responseData();29 }30else// Firefox31 {32 displayElement.textContent += executor.get_responseData();33 }34 }35else36 {37if (executor.get_timedOut())38 {39 alert("Timed Out");40 }41else42 {43if (executor.get_aborted())44 alert("Aborted");45 }46 }47}4849if (typeof(Sys) !=="undefined") Sys.Application.notifyScriptLoaded();

ajax.aspx

1<body>2 <form id="form1" runat="server">3 <div>4 <asp:ScriptManager ID="ScriptManager1" runat="server" />5 <asp:UpdatePanel ID="UpdatePanel1" runat="server">6 <ContentTemplate>7 <asp:Label ID="Label1" runat="server"></asp:Label>8 </ContentTemplate>9 <triggers>10 <asp:asyncpostbacktrigger ControlID="Button1" EventName="Click" />11 </triggers>12 </asp:UpdatePanel>1314 <br />15 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />1617 </div>18 </form>19</body>

Ajax.aspx.cs

1public partialclass ajax : System.Web.UI.Page2{3protected void Page_Load(object sender, EventArgs e)4 {56 }7protected void Button1_Click(object sender, EventArgs e)8 {9 Label1.Text ="AJAX updated";10 }11}

Thank you in advance for your help

Does anyone have any ideas?

Thank you in advance


Have you looked at the example here:http://www.asp.net/ajax/documentation/live/ClientReference/Sys.Net/WebRequestClass/default.aspx

-Damien


Thanks

Yap! my solution was base on this example. their posttarget.aspx is my ajax.aspx. problem the updatepanel of the fetched page is not doing ayncpostback.


There are several reason that it will not works. The Calling page already has a ViewState, EventArgument, EventValidation hidden field. So once you are setting the html of the request page in an div this fields gets dupicated. The Form will never get posts to the requested page as the original form points to a different location. Your are ended up in a mixed version of both pages.

No comments:

Post a Comment