CODEWITHSUNDEEP
javascriptasp.netajaxinternet-explorerfirefox
Bader
Bader

Reputation: 3774

How to display a response from aspx page using jquery ajax

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>

Upvotes: 2

Views: 1847

Answers (1)

John Pick
John Pick

Reputation: 5650

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.

Upvotes: 1

Related Questions