Javascript 使用Ruby on Rails 5以更新地址栏中url的模式打开显示页面，如instagram示例所示

我正试图在我的RubyonRails5项目中实现附加的行为

单击“在索引中发布”将打开模式而不是链接到显示页面，但也会使用发布url更新浏览器的地址栏

对于模式，我使用的是jquery模式， 不使用引导程序

下面是我的示例代码↓

---

目前我有下面的代码。模式工作正常，但不更新url

index.html.erb

<%= link_to image_tag(post.image_url.to_s), post_path(post), remote: true %>

<div id="post-modal" class="modal fade" role="dialog">

  <div class="modal-dialog modal-lg">
    <div class="modal-content flex flex-wrap items-start w-100 postmodal">

      <div class="w-75-l">
        <a href="#close" rel="modal:close" title="Close"><%= image_tag @post.image_url.to_s %></a>
      </div>

      <div class="w-25-l">

        <a href="#close" rel="modal:close" title="Close" class="btn-closemodal">X</a>

        <h1><%= @post.title %></h1>

      </div>
    </div>
  </div>
</div>

  def show

    @post = Post.friendly.find(params[:id])

    respond_to do |format|
      format.js
    end
  end

$('#post-content').html("<%= j render 'post_modal', post: @post %>");
$('#post-modal').modal('show');

show.js.erb

<%= link_to image_tag(post.image_url.to_s), post_path(post), remote: true %>

<div id="post-modal" class="modal fade" role="dialog">

  <div class="modal-dialog modal-lg">
    <div class="modal-content flex flex-wrap items-start w-100 postmodal">

      <div class="w-75-l">
        <a href="#close" rel="modal:close" title="Close"><%= image_tag @post.image_url.to_s %></a>
      </div>

      <div class="w-25-l">

        <a href="#close" rel="modal:close" title="Close" class="btn-closemodal">X</a>

        <h1><%= @post.title %></h1>

      </div>
    </div>
  </div>
</div>

  def show

    @post = Post.friendly.find(params[:id])

    respond_to do |format|
      format.js
    end
  end

$('#post-content').html("<%= j render 'post_modal', post: @post %>");
$('#post-modal').modal('show');

$（'#post content'）.html（“”）；
$（'后模态'）.model（'显示'）；

---

我在节目页面上看到了这个错误

---

关于ajax：成功检索模式部分，您可以使用

function editURL(page, title, url) {
  window.history.pushState(page, title, url);
}

大概是

$("#get-show").on("ajax:success", function(e) {
   editURL("pagename", "pagetitle", "url")
})

编辑

如果希望“后退”按钮在浏览器中工作，则必须在“文档准备就绪”中添加以下代码

window.addEventListener("popstate", function(e) {
   window.location.href = location.href;
});

---

在ajax上：成功检索模式部分后，可以使用

function editURL(page, title, url) {
  window.history.pushState(page, title, url);
}

大概是

$("#get-show").on("ajax:success", function(e) {
   editURL("pagename", "pagetitle", "url")
})

编辑

如果希望“后退”按钮在浏览器中工作，则必须在“文档准备就绪”中添加以下代码

window.addEventListener("popstate", function(e) {
   window.location.href = location.href;
});

---

将这一行添加到show.js.erb解决了这个问题

history.replaceState({}, "<%= @post.title %>", "<%= request.original_url %>");

history.replaceState（{}，“，”）；

将这一行添加到show.js.erb解决了这个问题

history.replaceState({}, "<%= @post.title %>", "<%= request.original_url %>");

history.replaceState（{}，“，”）；

谢谢，这对我很有用。但是当我退出模式时，url不会恢复。有什么办法解决这个问题吗？谢谢这对我很有效。但是当我退出模式时，url不会恢复。有没有办法解决这个问题？