所以目前我有一个使用 bootstrap 的按钮下拉列表,并且根据从下拉列表中选择的项目,javascript 用于显示或隐藏部分内容。这些部分实际上显示在 Bootstrap 模式窗口中。
问题在于,JavaScript 根据选择的按钮下拉列表一次向用户“显示”一个部分,但所有部分都在模式中呈现,它们只是隐藏在 View 中。
我认为,不要在模式中呈现所有部分并隐藏它们,而是仅在用户从下拉列表中选择一个时才调用它们,这会是更好的性能。
我不确定如何完成从按钮下拉列表中调用部分内容。也许我只需要一条使用 link_to 调用的部分路径并删除所有 javascript?类似 <li><%= link_to "test", my_partial_path(@user) %></li>
这是我的按钮下拉菜单和 JavaScript
<div class="col-xs-6 text-right">
<!-- Button dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add <span class="caret"></span>
</button>
<ul id="select_id" class="dropdown-menu pull-right">
<li id="cert0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Certification</a></li>
<li id="course0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Course</a></li>
<li id="award0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Award or Honor</a></li>
<li id="language0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Language</a></li>
<li id="patent0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Patent</a></li>
<li id="publication0" class="dropdown-item"><a href="#achievementModal0" data-toggle="modal">Publication</a></li>
</ul>
</div>
</div><!-- ./col-xs-6 -->
<!-- renders different partials within the modal based off user selection -->
<script>
$('li.dropdown-item').click(function ()
{
//alert(this.id);
if (this.id == "cert0")
$("div#cert").show();
else
$("div#cert").hide();
if (this.id == "course0")
$("div#course").show();
else
$("div#course").hide();
if (this.id == "award0")
$("div#award").show();
else
$("div#award").hide();
if (this.id == "language0")
$("div#language").show();
else
$("div#language").hide();
if (this.id == "patent0")
$("div#patent").show();
else
$("div#patent").hide();
if (this.id == "publication0")
$("div#publication").show();
else
$("div#publication").hide();
});
</script>
这是模态主体,其中所有部分都被渲染,但一次只显示一个,其余部分被隐藏。
<div class="modal-body">
<!-- a partial is shown based on the user dropdown selection, other partials hidden -->
<div id="award">
<%= render partial: "awards/new_award_modal" %>
</div>
<div id="cert">
<%= render partial: "certifications/new_certification_modal" %>
</div>
<div id="course">
<%= render partial: "courses/new_course_modal" %>
</div>
<div id="language">
<%= render partial: "languages/new_language_modal" %>
</div>
<div id="patent">
<%= render partial: "patents/new_patent_modal" %>
</div>
<div id="publication">
<%= render partial: "publications/new_publication_modal" %>
</div>
</div><!-- modal body -->
最佳答案
我认为该任务有两种替代方案:
- 渲染所有部分内容并在用户点击相应链接时显示。
- 当用户单击链接时,创建一个 ajax 请求,该请求从服务器请求部分正文并呈现它。
您已经在实现第一个。然而,哪种方法的性能更好取决于使用情况。如果您希望用户在 session 中仅单击几个链接,那么请使用 ajax 方法。
如果您希望用户点击几乎所有部分或多次重新访问某些部分,那么您当前的方法会更好。这是因为,使用 ajax 方法,每次用户单击链接时,您都必须向服务器请求部分内容。但是,您可以通过在本地缓存主体来优化该方法(如果您不希望它随每个请求而改变)。
ajax 方法使用远程链接。当用户单击链接时,会发出 ajax 请求。服务器返回一段 JavaScript 代码作为响应,该代码在浏览器上运行以呈现部分内容。这是一个例子。假设您的模态对话框有一个用于创建新奖项的部分,并且要呈现的模态是 awards/new_award_modal
<%= link_to "New Award", controller: "awards", action: :new, :remote => true %>
在奖励 Controller 中
def new
@new_award = Award.new
respond_to do |format|
format.js
end
end
首先给模态容器一个id:
<div class="modal-body" id="my-modal">
</div>
创建一个views/awards/new.js.erb。在这里,您将编写 javascript 代码来呈现部分
#views/awards/new.js.erb
$("#my-modal").html("<%= escape_javascript(render partial: 'awards/new_award_modal', locals: { award: @new_award } ) %>");
关于javascript - 如何仅在用户单击相应链接时呈现部分内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47165715/