I have multiple modals in one html file for my Rails application and 2 modals have tabs in them. The issue I am facing is that for one of the modals the tabs do not change content when I click through them. I know its not a modal specific problem as I realized that if I move the code around (put one modal before the other), the tabs work, only for one modal at a time though.
Specifically, the problem is in showModal and addStudent, if I put anything before addStudent, the tabs for that modal work, but addStudent tabs dont work. Same vice versa if I put the modal after. I can't seem to figure out how to to fix this or why it is happening. Here is a collapsed version of the code:
<!-- Birthday Modal -->
<div class="modal fade" id="birthday" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- Reports Modal -->
<div class="modal fade" id="reports" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- addStudent modal -->
<div class="modal fade" id="addStudent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- Show Modal -->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- Support Modal -->
<div class="modal fade" id="support" role="dialog">
Are you able to make a codepen or jsfiddle for your problem? It really helps to customize the answer for you.
Related
I have a controller in my Rails application which calls a js partial when a certain condition is met:
my_controller
if false == validation_result
render :partial => 'my/show_modal.js.erb'
end
_show_modal.js.erb
$("#modal_content").html("<%= escape_javascript(render 'my/show_modal') %>");
$("#notify").modal('show');
The html.erb called from above code renders a modal as shown below:
_show_modal.html.erb
<div class="modal fade" tabindex="-1" id="notify" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width:1000px;margin-left:-285px !important;">
<div class="modal-body">
<h3 class="modal-title">Please review</h3>
<span style="float: right">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</span>
</div>
</div>
</div>
</div>
The modal renders fine; but when I click on Ok button on the modal, the modal dismisses fine as well but leaves behind a light gray scheme on the entire webpage (the webpage seems to loose focus and I have to refresh the page to be able to use it again)!
What am I doing wrong here? How do I dismiss the modal completely so that the webpage could be used again?
UPDATE:
I tried almost all the approaches suggested in how to destroy bootstrap modal window completely? but NONE of them work for me.
I even posted comments on a few approaches listed on the above page stating the backdrop still does not go away for me.
Maybe this is a very ancient-minded-approach but it supposed to work. Assign hideModal() function on click event and see the result.
function hideModal() {
$("#notify").css("display", "none"); // Removing modal container
$(".modal-backdrop").css("display", "none"); // Removing semi-transparent black background
$(".modal-open").css("overflow-y", "auto"); // Enabling vertical scrolling back
}
I am developing an MVC Bootstrap Application.
I have a Parent View, that calls a Modal Bootstrap Partial View. That Partial View is loaded when User clicks a buttom.
The Partial View calls Controller Method that goes to the server.
Here is my example. In my Parent View a have this call.
<div class="modal fade" id="myModalRecomendIt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
#Html.Partial("~/Views/UploadSearch/_RecomendIt.cshtml");
</div>
Inside the Partial View I have something like this.
<div class="modal-body">
<div class="col-md-10">
#Html.Action("GetUsers", "Users")
</div>
</div>
It Works fine...
The problem I found is that The Controller Method I call in Partial View is called when Parent View is loaded. So it takes too long to render.
What I need is to call those methods when Partial View is called.
Is it posible?
Thanks..
I am using a bootstrap modal in the header - layout page for the entire site
e.g. original code from bootstap
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Login demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Login information
</div>
</div>
</div>
</div>
The above code does work.
I modified the button code to link
Launch login demo modal 2
When user clicks on the link the code works, but now the user has access to the url link and could open in a new window/new tab
When user right clicks on the link and choose "open in a new tab" it would fail because this page does not open.e.g.
http://example.com/account/login#myModal
http://example.com/blog#myModal
Question : Is it possible if user opens in a new tab the url, redirect to
http://example.com/account/login page
a live example fiverr.com (click on join a modal opens) and can also access direct link fiverr.com/join I am using MVC, maybe using a route configurations?
You cat do it with JavaScript. Just get the part of URL after hash and check if it is what you are expected, and then open modal manually:
if(window.location.hash) {
var hash = window.location.hash.substring(1);
if (hash == "myModel"){
$('#myModal').modal('show');
}
}
Make sure, that code is being executed after page is loaded.
I have the following weird problem in my rails app. I am using bootstrap modal to edit student information in my student model.
<td><%= link_to t('edit'), edit_student_path(student),
{remote: true, 'data-toggle' => "modal",
'data-target' => '#modal-window'} %>
</td>
div class="modal fade modal8" id="modal-window" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The modal works as written above but does not work if I change the data-target and id of the modal from 'modal-window' to anything else. What is going on?
data-target in anchor should be css selector and in modal div you should have that selector.
you are changing either one of them so it is not working,
I am working on a Rails site that uses twitter bootstrap.
When a user click on a link, the site sends a ajax call to a controller and the controller render a partial(the modal).
.js file:
$ ->
$('#play').click (e) ->
e.preventDefault()
$.post "/hype", (data) ->
$("#hhh").html data //a dummy div to put the data (I dont use this)
items controller:
def hype_modal
#item = Item.where(:end => Time.zone.now .. '2040-12-28 08:08:00').order("launch ASC").limit(1).first #Item.find_by_rank(1)
render "items/partial/_hypemodal"
end
The partial(modal) (items/partial/_hypemodal.html.erb)
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="tr">
<div class="modal-body"><%= raw #item.link %></div>
</div>
The link works just fine (I can click it, and the modal opens). The problem is that it won't close if I click outside the modal (this is normal behaviour, so it should work...). The other problem is that the background won't dim (get darker).
Any suggestions?
Try this
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="tr">
<div class="modal-body"><%= raw #item.link %></div>
For the closing issue, are you getting any errors from the console?