实施＆QUOT;后退按钮＆QUOT; jQuery的Ajax调用 [英] Implementing "Back button" on jquery ajax calls

问题描述

我想实现后退按钮在这个充满AJAX网站..我试过的jQuery插件的历史，但我敢肯定，我乱七八糟的东西，作为散列显示正常，但后面的按钮将不会加载原始内容背面。

这是我的菜单如下：

 ＆LT; D​​IV ID =导航类=ajaxload菜单＆GT;
            ＆LT; UL＆GT;
                ＆LT;李＆GT;＆LT; A HREF =home.aspx＆GT;首页＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;李＆GT;＆LT; A HREF =about.aspx＆gt;关于美国和LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;李＆GT;＆LT; A HREF =contact.aspx＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ＆LT; / DIV＆GT;
 

和Ajax调用：

  $（函数（）{
            变量$内容= $（'＃内容）;
            $（'。ajaxload李一）。点击（函数（）{

                $ content.html（'＆LT; D​​IV ID =装载机＆GT;＆LT; / DIV＆GT;'）;

                VAR URL = $（本）.attr（HREF'）;
                $获得（URL，功能（数据）{
                    $ content.hide（）HTML（数据）.fadeIn（慢，函数（）{$（＃装载机）淡出（快）。}）;
                }）;
                返回false;
            }）;
        }）;
 

解决方案

我猜，当你使用历史插件，您可能没有初始化它。当你初始化，你通过它来处理哈希的变化，所以你可以再次加载内容的回调。因此，例如，而不是做这样的事情：

  $（'A'）。点击（函数clickedLink（）{
    VAR HREF = $（本）.attr（HREF'）;
    $ .history.load（HREF）;
    doSomeAJAXRequest（HREF）;
    返回false;
}）;
 

您不得不做这样的事情：

  $。history.init（功能hashChanged（散）{
    doSomeAJAXRequest（HREF）;
}）;
$（'A'）。点击（函数clickedLink（）{
    VAR HREF = $（本）.attr（HREF'）;
    $ .history.load（HREF）;
    返回false;
}）;
 

I'm trying to implement back button on this full ajax website.. I tried jquery history plugin but I'm sure I messed something, as the hash appears OK but the back button won't load the original content back..

This is what my menu looks like:

       <div id="nav" class="ajaxload menu">
            <ul>
                <li><a href="home.aspx">Home</a></li>
                <li><a href="about.aspx">About Us</a></li>
                <li><a href="contact.aspx">Contact</a></li>
            </ul>
        </div>    

And the ajax calls:

     $(function() {
            var $content = $('#content');
            $('.ajaxload li a').click(function() {

                $content.html('<div id="loader"></div>');

                var url = $(this).attr('href');
                $.get(url, function(data) {
                    $content.hide().html(data).fadeIn("slow", function() { $("#loader").fadeOut("fast") });
                });
                return false;
            });
        });

解决方案

I'm guessing that when you were using the history plugin you may not have initialized it. When you initialize it, you pass it a callback that handles the hash changes so you can load the content again. So, for example, rather than doing something like this:

$('a').click(function clickedLink() {
    var href=$(this).attr('href');
    $.history.load(href);
    doSomeAJAXRequest(href);
    return false;
});

You'd have to do something like this:

$.history.init(function hashChanged(hash) {
    doSomeAJAXRequest(href);
});
$('a').click(function clickedLink() {
    var href=$(this).attr('href');
    $.history.load(href);
    return false;
});

这篇关于实施＆QUOT;后退按钮＆QUOT; jQuery的Ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！