fancybox не работает для страниц aspxgridview, кроме первой страницы - PullRequest
Новая
       96

fancybox не работает для страниц aspxgridview, кроме первой страницы

1 голос
/ 12 октября 2019

Я использую fancybox на своей странице в Aspxgridview. На первой странице сетки он работает правильно. Когда я нажимаю на другие страницы сетки, fancybox не работает, и URL открывается в новой вкладке. Я хочу открыть гиперссылки в fancybox popup. В чем может быть проблема? 

<script type="text/javascript">        
    $(document).ready(function () {
        $('.fancybox').fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            showCloseButton: true,
            titleShow: true,
            transitionIn: 'elastic',
            transitionOut: 'elastic',
            width: '80%',
            heigh: '80%',
            autoScale: true,
            type: 'iframe',
            onClosed: function() {
                location.reload();
                return;
            }
        });
    });
</script>

... 

    <dx:ASPxGridView ID="gridDX" ClientInstanceName="grid" runat="server" KeyFieldName="ID" OnDataBinding="gridDX_DataBinding" AutoGenerateColumns="False" OnPageIndexChanged="gridDX_PageIndexChanged">
      <Columns>
        <dx:GridViewDataColumn FieldName="Edit" Caption="View" VisibleIndex="1">
          <DataItemTemplate>
            <dx:ASPxHyperLink CssClass="fancybox" ID="hypShowEdit" ClientInstanceName="hypShowEdit" runat="server" ImageUrl="~/img/edit.png" Text="Show/Edit" NavigateUrl="Documents.aspx">
            </dx:ASPxHyperLink>                   
          </DataItemTemplate>
        </dx:GridViewDataColumn>
      </Columns>
    </dx:ASPxGridView>

Кроме того, у меня есть метод индекса страницы: 

protected void gridDX_PageIndexChanged(object sender, EventArgs e)
    {
        var view = sender as ASPxGridView;
        if (view == null) return;
        var pageIndex = view.PageIndex;
        gridDX.PageIndex = pageIndex;
    }

Ответы [ 2 ]

1 голос
/ 12 октября 2019

Извлеките инициализацию fancybox в отдельный метод и вызовите его в событиях ASPxClientGridView.Init (не в jQuery document.ready) и EndCallback.

Извлечение Использование библиотек пользовательского интерфейса jQuery / jQuery с DevExpressASP.NET Controls / MVC Extensions руководство по этому вопросу. 

//$(document).ready(function () {
function InitFancyBox() {
    $('.fancybox').fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        showCloseButton: true,
        titleShow: true,
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        width: '80%',
        heigh: '80%',
        autoScale: true,
        type: 'iframe',
        onClosed: function() {
            location.reload();
            return;
        }
    });
}
//});

<dx:ASPxGridView ...>
  <Columns>
    <dx:GridViewDataColumn ...>
      <DataItemTemplate>
        <dx:ASPxHyperLink CssClass="fancybox" ...>
        </dx:ASPxHyperLink>
      </DataItemTemplate>
    </dx:GridViewDataColumn>
  </Columns>
  <ClientSideEvents Init="InitFancyBox" EndCallback="InitFancyBox" />
</dx:ASPxGridView>
0 голосов
/ 12 октября 2019

Вы должны понимать, что когда вы пишете код, подобный $('.your selector').fancybox(), вы присоединяете событие клика, которое запускает fancybox на существующих в данный момент элементах на странице, соответствующей вашему селектору. Это означает, что если вы перезагрузите страницу (или части вашей страницы), чтобы текущие элементы были заменены новыми, вам придется снова вызывать .fancybox().

...