我在一页上有两个模态。单击按钮Add Providers
时,将弹出一个模态。当我单击Add Hospital
时,应弹出另一个模式。但是,无论我只单击“提供者”模式上的哪个按钮,都显示出来?不知道为什么。
模态1是从渲染部分provider_access_modal
发生的,模态1假定是在渲染部分sites_access_modal
<%= render :partial => 'provider_access_modal' %> ##Modal 1
<%= render :partial => 'shared/side_menu' %>
<div id="profiles" class="container-main">
<%= render :partial => 'patients/top_bar' %>
<div class="top-space"></div>
<div class="flash">
<%- flash.each do |name, msg| -%>
<%= content_tag :div, msg, :class => "flash_#{name}" if msg.is_a?(String) %>
<%- end -%>
</div>
<div class="content-container your-sites">
<div class="header">
<div class="icon-circle"><div class="icon"><%= image_tag "my-providers-2x.png" %></div></div>
<div class="title">Your Providers</div>
<div class="button-wrapper">
<%= button_tag "Add Provider", class:"add-button", id: 'add-provider-modal' %>
<div class="push"></div>
</div><!--button-wrapper-->
</div><!--header-->
<div class="body">
<div class="no-records">
<%= image_tag "icon-no-records", class: "image" %>
<div class="text">You have no providers.</div>
</div>
</div>
</div>
<%= render :partial => 'sites_access_modal' %> ##Modal 2
<div class="content-container your-sites">
<div class="header">
<div class="icon-circle"><div class="icon"><%= image_tag "hospitalizations-icon-2x.png" %></div></div>
<div class="title">Your Hospitals</div>
<div class="button-wrapper">
<%= button_tag "Add Hospital", class:"add-button", id: 'add-site-modal' %>
<div class="push"></div>
</div><!--button-wrapper-->
</div><!--header-->
<div class="body">
<% if @active_memberships.count > 0 %>
<table>
<thead>
<tr>
<th>Hospital Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% @active_memberships.each do |membership| %>
<tr>
<td><%= membership.site.name %></td>
<td>
<%= link_to patient_remove_membership_path(id: current_user.id, membership_id: membership.id), method: :put, :data => {:confirm => 'Are you sure you want to leave this site?'}, class: "btn" do %>Leave Hospital<% end %>
</td>
</tr>
<% end %>
</tbody>
</table>
<% else %>
<div class="no-records">
<%= image_tag "icon-no-records", class: "image" %>
<div class="text">You have no sites.</div>
</div>
<% end %>
</div>
</div>
</div>
这是我的provider-select.js代码
function providerSearch(input) {
if (input.val()) {
var params = {
"provider_search": {
"query": input.val()
}
}
$.post("/providers/search", params, function(data, status) {
$(".auto-complete-modal-list .content").html(data)
if (data.length == 0) {
var notFound = $('<div>', {
'text': 'No provider found, please invite a provider below',
'class': 'item'
});
$(".auto-complete-modal-list .content").empty().append(notFound)
}
}, "html");
} else {
$(".auto-complete-modal-list .content").empty()
}
}
function providerSelection(event) {
let targetProvider = null;
if ($(event.target).is('button')) {
targetProvider = $(event.target);
}
if (targetProvider != null) {
let providerEmail = targetProvider.closest('.item').data("email")
let providerName = targetProvider.closest('.item').data("name")
$('#provider-selection .item').removeAttr('style').find('button').text("Select");
targetProvider.text("Selected")
targetProvider.closest('.item').css({
"background-color": "rgb(86, 116, 204, .8)"
})
$("#invite-label").fadeOut(function() {
$(this).text(`You are inviting ${providerName} to sign this document`).fadeIn(100);
});
$('#invite_email').val(providerEmail)
}
}
$(document).on('turbolinks:load', function() {
$("#provider-select .input-search").on("keyup", function(e) {
providerSearch($(this));
});
$("#provider-selection").on("click", function(e) {
providerSelection(e);
});
$('#invite_email').blur(function() {
let cantFindText = "Can't find your provider? Invite them via email below"
if (!$.trim(this.value).length) {
if ($('label').text() != cantFindText) {
$("#invite-label").fadeOut(function() {
$(this).text(cantFindText).fadeIn(40);
});
}
}
});
// for add provider access
$('#add-provider-modal').click(function(){
$('#modal').show()
})
});
然后这是我的site-select.js代码
function siteSearch(input) {
if (input.val()) {
var params = {
"sites_search": {
"query": input.val()
}
}
$.post("/sites/search", params, function(data, status) {
$(".auto-complete-modal-list .content").html(data)
if (data.length == 0) {
var notFound = $('<div>', {
'text': 'No sites found',
'class': 'item'
});
$(".auto-complete-modal-list .content").empty().append(notFound)
}
}, "html");
} else {
$(".auto-complete-modal-list .content").empty()
}
}
function siteSelection(event) {
let targetSite = null;
if ($(event.target).is('button')) {
targetSite = $(event.target);
}
if (targetSite != null) {
let siteId = targetSite.closest('.item').data("id")
$('#site-selection .item').removeAttr('style').find('button').text("Add");
targetSite.text("Added")
targetSite.closest('.item').css({
"background-color": "rgb(86, 116, 204, .8)"
})
}
}
$(document).on('turbolinks:load', function() {
$("#site-select .input-search").on("keyup", function(e) {
siteSearch($(this));
});
$("#site-selection").on("click", function(e) {
siteSelection(e);
});
$('#add-site-modal').click(function(){
$('#modal').show()
})
});
答案 0 :(得分:1)
在您的两个JavaScript代码段中,我都能看到该行
SELECT SomeColumn FROM SomeTable
有:
$('#modal').show();
和
$('#add-provider-modal').click(function(){
$('#modal').show()
})
因此,当您单击“添加提供程序模式”或“添加站点模型”按钮时,将显示ID为“模式”的相同模型。
在您提供的代码中,我找不到ID为“ modal”的元素,因此该元素必须位于未提供的部分中。我建议更改局部变量,以便为不同的模态赋予它们不同的ID,然后更新您的点击处理程序,以便在正确的时间打开正确的窗口。