如何更新ajax页面加载的导航

所以我有一个rails应用程序有两个不同的导航标题。一个用于大多数页面和另一个仅用于几页的导航标题。此外，由于导航是在application.html.erb页面中加载的（在应用程序的所有页面之间共享），所以导航html永远不会从服务器刷新，除非用户刷新页面。并且由于每个页面通过ajax（使用pjax）加载，这意味着当我在需要不同导航标题的页面之间移动时，导航标题不会更新。如何更新ajax页面加载的导航

我有几个可能的解决方案，但我不喜欢它们，因为我不想为每个视图都添加代码。主要的解决方案是将导航标题移动到视图中（而不是全局application.html.erb），或者将javascript添加到每个页面，以检查导航是否正确，并且是否将其替换。但是，为了替换它，我不知道如何加载这是一个部分的HTML，并包含模型的数据。

注意：直接访问每个网址工作正常。

我觉得我错过了一些简单的方法，因为这感觉应该是一个相当普遍的问题，但我无法找到任何东西，而搜索。

编辑：和我使用jQuery的

来源

2012-07-21 Jason Axelson

由于您只有两个导航，因此在您的布局中生成它们并隐藏它们。

<div id="nav"> 
    <div id="nav1" class="nav" style="display: none"><a href="#">Nav1</a></div> 
    <div id="nav2" class="nav" style="display: none"><a href="#">Nav2</a></div> 
</div>

在你的页面的JS中，创建一个函数来显示你想要的。当你通过pjax更新页面时，你需要传入一些JS来执行，用你想要的那个调用chooseNav。

<script type="text/javascript"> 
    function chooseNav(sel) { 
    $('#nav .nav').hide(); 
    $('#nav' + sel).show(); 
    } 

    $(function() { 
    chooseNav(1); // Default nav to load when page loads 
    }); 
</script>

来源

2012-08-07 03:21:42 aceofspades

哇，这是一个非常好的和简单的解决方案。我已经开始开发一个带有额外控制器和服务器生成的JavaScript的解决方案，每次需要导航更改时都会执行该解决方案。现在就试试这个。 – 2012-08-07 03:49:23

经过一些快速原型设计后，这很好地工作，虽然我需要做一些事情来获得按下后退按钮时运行的JavaScript，可能需要听取pjax事件。谢谢您的帮助！ – 2012-08-07 04:46:19

如果你想用适当的局部更换导航先走，你可以把你的Ajax响应以下（假设你正在使用jQuery）：

$('#navigation').html('<%= escape_javascript(render 'partial') %>');

来源

2012-08-01 00:28:53 cdesrosiers

嗯，看起来很有前途，我会试试 – 2012-08-01 18:54:51

Jason，我假设您正在寻找一种方法来更改活动选项卡的颜色。

如果AJAX页面渲染是一个展示视图中添加以下的show.js.erb：

因为，你有没有包括的代码，我想提出两个假设。

假设1：我猜想它看起来是这样的，如果第二页是活动：

<div class="top_menu_bar"> 
<a class="menu_link controller_1" href="/controller_1">The First Controller</a> 
<a class="menu_link controller_2 highlighted" href="/controller_2">The Second Controller</a> 
<a class="menu_link controller_3" href="/controller_3">The Third Controller</a> 
</div>

请注意，如果你没有为你的锚标签类控制器的名字，你可以很容易地添加这些。它会简化你的JQuery。但是，解决方案的关键部分是遵循我简要概述的两个步骤。您可以随时根据您的代码修改JQuery选择器。

假设2：我假设你有一个CSS高亮的CSS规则，这将使突出显示的类的任何锚点从其他中脱颖而出。

现在，让我们谈谈改变导航的两步式解决方案，当您单击使用Ajax请求加载的页面上的链接或按钮时，请将与该选项卡关联的show view controller_3。

你需要做以下两件事情：通过增加您的show.js.以下

Step 1: Remove the "highlighted" class from the anchor of 
     controller_2 
Step 2: Add the "highlighted" class to the anchor of controller 3.

你可以这样做ERB文件：

$('.highlighted').removeClass("highlighted"); 
$('.<%= controller_name %>').addClass("highlighted);

正如你可以看到，我们是动态插入CONTROLLER_NAME时show.js.erb得到服务。请注意，您仍然需要句点前缀。

我相信应该这样做。上述代码中可能存在语法错误，因此请采取整体概念并将其应用于您的情况。为了您的方便，我在jsfiddle上放置了一个小样本来演示代码的JavaScript部分。查看http://jsfiddle.net/593ce/4/。

我希望这对你有效，你会发现这个答案可以接受。

来源

2012-08-04 03:06:50 Tabrez

如何更新ajax页面加载的导航

回答

相关问题