如何在没有重新加载页面的情况下打开.load jquery页面内的链接

I have the jquery code below which updates the query when I click on a checkbox, everything works great my only problem is the page I have loaded has a pagination and when I click next or one of the pagination links they refresh the page and lose the search. I was wondering if there was a way to open the links inside the page without the page reloading. if not what would be the best way to go about paginating the data. Thanks

我在下面的jquery代码更新了查询,当我点击一个复选框时,一切都很好我唯一的问题是我加载的页面有一个分页,当我点击下一个或其中一个分页链接时,他们刷新页面并丢失搜索。我想知道是否有办法在没有页面重新加载的情况下打开页面内的链接。如果不是什么是分页数据的最佳方式。谢谢

here is my jquery code:

这是我的jquery代码:

$(document).ready(function () {
    $(".remember_cb").click(function () {
        var action = $("#criteria").attr('action');
        var form_data = $('#criteria').serialize();
        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            beforeSend: function () {
                $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast');
            },
            success: function (data) {
                $("#loading").fadeIn('fast');
                $('#exercise_list').html(data).fadeIn('slow');
                $("#loading").fadeOut('slow');
            }
        });
    });
    return false;
});

If you need me to include any other code please let me know. Any help would be much appreciated.

如果您需要我包含任何其他代码,请告诉我。任何帮助将非常感激。

1 个解决方案

#1

When a normal link is clicked, it triggers navigation to whatever URL is in its href. You're going to have to prevent the navigation behavior, but still trigger some JS that will re-populate your search results with the next page of data. You can do both in the button's click event handler:

单击普通链接时,会触发导航到其href中的任何URL。您将不得不阻止导航行为,但仍会触发一些JS,它将使用下一页数据重新填充搜索结果。您可以在按钮的单击事件处理程序中执行这两项操作:

var page = 1; //the page number we're currently on

$('a.nextPage').click(function(e) {
    e.preventDefault(); //stops navigation to the URL in the link

    var input = $('#criteria input[name="page"]'); 
    if (!input.length) {
       input = $('<input>', {type:'hidden', name:'page'}).appendTo("#criteria");
    }

    input.val(++page);

    var action = $("#criteria").attr('action');
    var form_data = $("#criteria").serialize();

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        beforeSend: function () {
            $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast');
        },
        success: function (data) {
            $('#exercise_list').html(data).fadeIn('slow');
            $("#loading").fadeOut('slow');
        }
    });
});

This code is just an example, but hopefully you get the idea. I'd also get rid of this line from your success function:

这段代码只是一个例子,但希望你能得到这个想法。我也会从你的成功函数中删除这一行:

$("#loading").fadeIn('fast');

That will probably produce a weird visual effect, since your loading indicator is already visible. Also, small detail, but the <center> tag has been deprecated for a while. Just use a center-aligned div.

这可能会产生奇怪的视觉效果,因为您的加载指示器已经可见。此外,小细节,但

标签已被弃用了一段时间。只需使用中心对齐的div。