2

我正在使用这个 jQuery 插件
http://www.asual.com/jquery/address/
因为我有一个完整的 ajax 站点被黑，Rails 3.1.0但我的操作/方法也响应 html 请求。

所以如果我有链接

<%=link_to "my link",{:controller=>"my_controller",:action=>"my_action"},:remote=>true%>

它会进行调用，但 URL 将保持不变，如果我共享 URL，您将始终查看根页面/页面，但是使用此插件，我可以调用远程方法my_controller并更改显示 url

var elemetns = $("a.addressPlugin");
 $.address.crawlable(1).state('/').init(function(){
    elemetns.address();
 });

我的新链接

<%=link_to "my link",{:controller=>"my_controller",:action=>"my_action"},:class=>"addressPlugin",:remote=>true%>

现在我的网址看起来像

http://localhost:3000/my_controller/my_action

但是当我回击浏览器时，页面保持不变

然后我想这样做

var elemetns = $("a.addressPlugin");
 $.address.crawlable(1).state('/').init(function(){
    elemetns.address();
 }).change(function(e){
        $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
 });

所以现在它可以前后移动，但是....

当我单击链接时，它会进行两次远程调用....一次用于链接本身，一次用于.change(...方法....但是当我向后退时它可以完美运行，它只在.change(...方法上调用一次....所以

如何防止$.ajax仅在浏览器上向后和向前而不是在单击链接时进行调用，因为他们已经自己进行了调用？

<< -- 更新 -- >>
在 Safari 和 Chrome 浏览器中，当我从主页退一步进入历史记录，然后使用浏览器的按钮向前导航时，我得到一个完整的白屏，仅显示加载我的main/index视图的 javascript 函数通过ajax，但只有在浏览器中

Javascript函数显示而不是网页

<< -- 更新 -->

基本上这就是我想要复制的，但是在 Rails 上使用 ruby​​ 和他们的remote links

http://www.asual.com/jquery/address/samples/state/

4

3 回答 3

0

使后退按钮在单个页面界面上正常工作的一种方法是在 URL 中使用哈希。Twitter是一个这样做的网站。

哈希告诉浏览器我们只是移动到当前页面上的锚点，因此页面不会重新加载，但 URL 会添加到浏览器历史记录中。这意味着，如果您使用 Javascript 正确处理 URL 并根据 URL 片段（哈希后的部分）加载您想要的内容，那么后退按钮应该仍然可以正常工作。

我无法详细说明如何将其集成到您的应用程序中，但如果您可以使用/my_controller#my_action而不是/my_controller/my_action，您应该能够完成这项工作。Javascript 需要使用基于 URL 片段的 AJAX 加载页面内容。

以下是一些可能对您有所帮助的链接：

于 2011-10-24T15:55:32.933 回答
0

为什么要使用.change事件绑定器？尝试改用.click事件绑定器。另外，return false;为了防止默认操作，请这样做。

var elemetns = $("a.addressPlugin");
$.address.crawlable(1).state('/').init(function(){
    elemetns.address();
}).click(function(e){
    $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
    return false;
});
于 2011-10-25T00:08:16.373 回答
0

我会尝试让链接执行一个检查全局标志的事件处理程序。然后在change地址的情况下，我会检查那个标志，只有在它没有设置的情况下才执行操作。

例如：

var throughNormalLink = false;

$.address.crawlable(1).state('/').init(function(){
    elemetns.address();
}).change(function(e){
    if(!throughNormalLink)
        $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
    else // Update: reset the flag
        throughNormalLink = false;
});

$("a").click(function() {throughNormalLink = true; .../* the rest of your code */});
于 2011-10-25T16:20:48.063 回答