首页 \ 问答 \ 通过Jquery调用页面时,GridView分页不起作用(GridView Paging Not Working When Page Is Called via Jquery)

通过Jquery调用页面时,GridView分页不起作用(GridView Paging Not Working When Page Is Called via Jquery)

我正在使用asp.net页面调用另一个包含GridView的ASPX页面,其中包含更新面板内的分页

我通过jquery调用页面并且加载正常但是当我点击Gridview分页时,网格视图消失了

<div id = "divParent">

</div>

$(document).ready(function () {
   BindDiv('divParent', 'Parent.aspx');         
});

function BindDiv(DivID, url) {
        $('#' + DivID).empty();
        $('#' + DivID).append('<img src="Images/ajax_loader.gif" alt="Loading..." />');

        $.get(url, function (response) {
            $('#' + DivID).empty();
            $('#' + DivID).append($(response).find('#ParentContainer')); 

        });
    }

第二个aspx页面代码

<div id = "ParentContainer">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers ="true" UpdateMode ="Conditional">
    <ContentTemplate>
    <asp:GridView ID="gvParent" runat="server" SkinID="gvParent" AutoGenerateColumns="False"
        AllowSorting="true" AllowPaging="true" PageSize="10" OnPageIndexChanging="gvParent_PageIndexChanging">
        <Columns>
            <asp:TemplateField HeaderText="Customer ID" SortExpression="CustomerID">
                <ItemTemplate>
                    <asp:Label ID="lblCustomerID" runat="server" Text='<%# Eval("CustomerID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="First Name" SortExpression="Fname">
                <ItemTemplate>
                    <asp:Label ID="lblFname" runat="server" Text='<%# Eval("Fname") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </ContentTemplate>
    </asp:UpdatePanel>
</div>

请提前帮助谢谢


I am working with asp.net page which calls another ASPX page containing GridView with paging inside update panel

I call the page via jquery and its loading fine but when I click on Gridview paging, the Grid view disappears

<div id = "divParent">

</div>

$(document).ready(function () {
   BindDiv('divParent', 'Parent.aspx');         
});

function BindDiv(DivID, url) {
        $('#' + DivID).empty();
        $('#' + DivID).append('<img src="Images/ajax_loader.gif" alt="Loading..." />');

        $.get(url, function (response) {
            $('#' + DivID).empty();
            $('#' + DivID).append($(response).find('#ParentContainer')); 

        });
    }

second aspx page code

<div id = "ParentContainer">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers ="true" UpdateMode ="Conditional">
    <ContentTemplate>
    <asp:GridView ID="gvParent" runat="server" SkinID="gvParent" AutoGenerateColumns="False"
        AllowSorting="true" AllowPaging="true" PageSize="10" OnPageIndexChanging="gvParent_PageIndexChanging">
        <Columns>
            <asp:TemplateField HeaderText="Customer ID" SortExpression="CustomerID">
                <ItemTemplate>
                    <asp:Label ID="lblCustomerID" runat="server" Text='<%# Eval("CustomerID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="First Name" SortExpression="Fname">
                <ItemTemplate>
                    <asp:Label ID="lblFname" runat="server" Text='<%# Eval("Fname") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </ContentTemplate>
    </asp:UpdatePanel>
</div>

plz help thanks in advance


原文:https://stackoverflow.com/questions/13991293
更新时间:2023-12-25 11:12

最满意答案

你在#hide#show等之间完全混淆了。你需要的是每种语言和一个标志(可选)的一个class

  1. 有一个语言课程enes并有它的项目。
  2. 使用.show() .hide().show()隐藏和显示。
  3. 加载时,隐藏其中一种语言。
  4. 不要重复id值。 这是 HTML中的犯罪 。 改用类。
  5. 使用<li>上的语言班而不是孩子。

$(function() {
  $('.Magyar').hide();
  $('#hu').click(function() {
    $('.English').hide();
    $('.Magyar').show();
  });
  $('#en').click(function() {
    $('.English').show();
    $('.Magyar').hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English" />
<input class="translate" type="button" id="hu" value="Magyar" />

<ul>
  <li class="current Magyar">
    <div><a href=index.html>Főoldal</a></div>
  </li>
  <li class="Magyar">
    <div><a href=oneletrajz.html>Önéletrajz</a></div>
  </li>
  <li class="Magyar">
    <div><a href=kapcsolat.html>Kapcsolat</a></div>
  </li>
  <li class="current English">
    <div><a href=index.html>Home</a></div>
  </li>
  <li class="English">
    <div><a href=oneletrajz.html>About US</a></div>
  </li>
  <li class="English">
    <div><a href=kapcsolat.html>Contact Us</a></div>
  </li>
</ul>


You have totally confused between the #hide, #show, etc. What you need is a class for each language and a flag (optional).

  1. Have a language class en or es and have items on it.
  2. Use .hide() and .show() for hiding and showing.
  3. On loading, hide one of the languages.
  4. Don't ever duplicate id values. It's a crime in HTML. Use classes instead.
  5. Use the language classes on the <li> than the child.

$(function() {
  $('.Magyar').hide();
  $('#hu').click(function() {
    $('.English').hide();
    $('.Magyar').show();
  });
  $('#en').click(function() {
    $('.English').show();
    $('.Magyar').hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English" />
<input class="translate" type="button" id="hu" value="Magyar" />

<ul>
  <li class="current Magyar">
    <div><a href=index.html>Főoldal</a></div>
  </li>
  <li class="Magyar">
    <div><a href=oneletrajz.html>Önéletrajz</a></div>
  </li>
  <li class="Magyar">
    <div><a href=kapcsolat.html>Kapcsolat</a></div>
  </li>
  <li class="current English">
    <div><a href=index.html>Home</a></div>
  </li>
  <li class="English">
    <div><a href=oneletrajz.html>About US</a></div>
  </li>
  <li class="English">
    <div><a href=kapcsolat.html>Contact Us</a></div>
  </li>
</ul>

相关问答

更多
  • 这是尝试访问元素但尚不存在的代码的典型示例。 您就是使用getElementById获取元素,但该元素仅在所有JavaScript代码之后定义。 你应该使用$(document).ready 。 此外,jQuery具有.show和.show因此您不需要getElementById和style.display : echo '