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..
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 have a view with Tuple model. I'm loading 4 partial views in this main view as below
1.
<div class="tab-pane fade" >
#Html.Partial("~/Views/Partial/_Tab1Input.cshtml", Model.Item1.Tab1Input)
</div>
2.
<div class="tab-pane fade" id="_Pump">
#Html.Partial("~/Views/Partial/_Tab2Input.cshtml", Model.Item1.Tab2Input)
</div>
3.
<div class="tab-pane fade" >
#Html.Partial("~/Views/Partial/_Tab3Input.cshtml", Model.Item1.Tab3Input)
</div>
4.
<div class="tab-pane fade in active" id="_TDH">
#Html.Partial("~/Views/Partial/_Tab4Input.cshtml", Model.Item1.Tab4Input)
</div>
I'm loading these partial views on tab click. On click of submit, only active Tab is getting validated. Means if I'm in tab 2 partial view and clicked on submit, then required field validation will happen, but tab 1 partial view's validation will be ignored, and the form is getting Posted.
Please assist me so that on click of submit, all 4 partial views required field validation should happen.
My website has a payment form in a modal. All I want is (for some specific customers) to pass them a link and when they click on it to move to the website with the modal already be open.
Is that possible?
You must facilitate the feature yourself. Lets say you have normal bootstrap modal like this :
<div class="modal fade" id="payment">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
and you want to invoke the modal on page load in a link sent to some users :
http://www.example.com#payment
Then add this code snippet to your page :
$(document).ready(function() {
var modals = ['#payment', '#anotherModal'];
if (window.location.hash && ~modals.indexOf(window.location.hash)) {
$(window.location.hash).modal();
}
})
This is of course by far the most simple way to do it.
Using MVC 4 framework, I have a Parent and Child View (put Child in Html.Partial). I used Jquery dialog in showing the Child View. In my Child View, I have a Submit button. I want the data that I inputted in the Parent View to be retained upon posting back the Child View. Is it possible to access the Model object of the Parent View, so that I can still pass the Parent Model Object in the HttpPost method of the Child View?
Here's my sample code for ParentView:
#model Model.PurchaseOrderModel
#using (Html.BeginForm())
{
<div>Parent</div>
<div id="ItemDialog" style="display: none;">
#Html.Partial("ChildView")
</div>
}
Here's my sample code for ChildView:
<div>
<div>Child</div>
<div>
<input type="submit" id="btnSaveItems" text="Save" value="Save Items" />
</div>
</div>
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?