How to display a response from aspx page using jquery ajax

Question

I am using ajax jquery to request a aspx page and this page displays a GidView , so the response will be the html code for the grid view. and I add the response to DIV to show the result, when I make the request in the first time it works fine, but in the second time nothing added from the response, despite there are a data to bind.

** This problem appear ONLY in IE browsers in FireFox, it si OK ! **

ajax request :

  function getSubTraning(mainId) {
            $(".res" + mainId).html("");
            startLoad();
            $.ajax({
                url: "ajax/GetSubTraining.aspx",
                data: { mainId: mainId },
                success: function (a) {
                    stopLoad();
                    $(".res" + mainId).append(a);
                }
            });

        }

GetSubTraining.aspx html code

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="GetSubTraining.aspx.vb" Inherits="Admin_ajax_GetSubTraining" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <form id="form1" runat="server">
    <div>

        <asp:GridView ID="gvSubTraning" runat="server" 
            AutoGenerateColumns="False" 

            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" 
            BorderWidth="1px" 

            CellPadding="4" EnableModelValidation="True" 
            ForeColor="Black" 

            GridLines="Horizontal" Width="100%" DataSourceID="SqlDataSource1">
            <EmptyDataTemplate>
                No sub training to view !
            </EmptyDataTemplate>
            <Columns>
                <asp:BoundField DataField="Train_S_Desc_Ar" 
                    HeaderText="Sub training needs" 

                    SortExpression="Train_S_Desc_Ar">
                <HeaderStyle HorizontalAlign="Left" />
                <ItemStyle HorizontalAlign="Left" Width="95%" />
                </asp:BoundField>
                <asp:TemplateField ShowHeader="False">
                    <ItemStyle Width="5%" />
                </asp:TemplateField>
                <asp:TemplateField SortExpression="Train_S_Indx">
                    <ItemTemplate>

                        <input type="button" class='btnRemoveSub' title="<%# Eval("Train_S_Indx") %>-<%# Eval("Train_M_Indx") %>" value="Remove" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Train_S_Indx") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
            <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
            <%-- <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />--%>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:Con_New %>" 
            SelectCommand="getSubTtraining" SelectCommandType="StoredProcedure">
            <SelectParameters>
                <asp:QueryStringParameter Name="mainId" QueryStringField="mainId" 
                    Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>

    </div>
    </form>

Answer 1

By default, jquery's ajax method uses HTTP GET, which causes the browser to cache the data, which in turn stops your second ajax request from reaching the server. Use HTTP POST instead:

function getSubTraning(mainId) {
    $(".res" + mainId).html("");
    startLoad();
    $.ajax({
        type: 'POST',
        url: "ajax/GetSubTraining.aspx",
        data: { "mainId": "mainId" },
        success: function (data) {
            stopLoad();
            $(".res" + mainId).append(data);
        }
    });
}

Alternatively, use jquery's post method, which is shorthand for the ajax method in some cases, like yours:

function getSubTraning(mainId) {
    $(".res" + mainId).html("");
    startLoad();
    $.post({
        "ajax/GetSubTraining.aspx",
        { "mainId": "mainId" },
        function (data) {
            stopLoad();
            $(".res" + mainId).append(data);
        }
    });
}

In addition, it is safer to quote json string data because some systems choke on unquoted json string data.

How to display a response from aspx page using jquery ajax

Question

1 answers

solution1
1 2012-02-26 19:42:21

How to display a response from aspx page using jquery ajax

Question

1 answers

solution1 1 2012-02-26 19:42:21

solution1
1 2012-02-26 19:42:21