call Action twice in same view - javascript

enter image description hereHi I have an action that returns partial view I want to call it partial twice from view after once inside a modal and once outside the modal to fit the site to mobile. I use #html.action what actually happens is that there are events on click in partial and the js always listens only to the first and the one I put second inside a modal for example does not work. If I change their order on the page it will be reversed. Looking for a solution how to call that partial.
my code:
#Html.ActionLink("Search", "Cars")
<div class="modal fade carDetielsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<button class="close" aria-label="Close" data-dismiss="modal">
#*<span aria-hidden="true">×</span>*#
<img src="~/images/icon_X (1).png" />
</button>
</div>
<div class="modal-content">
#Html.Action("Search", "Cars")
</div>
</div>
</div>
</div>
#Html.ActionLink("Search", "Cars")

Related

links inside modal appearing before opening the modal and messing up the page interface

I have a modal which appears when a button is clicked but the links present inside the modal appears before even opening the modal, they are invisible though but they are present because if a user clicks on the page the link inside the modal gets clicked.
To see it, open filemile.ga and hover your mouse over the logo.
<button type="button" class="btn btn-info btn-sm " data-toggle="modal" data-target="#myModal">more</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Top Searches</h2>
</div>
<div class="modal-body">
lots of links here
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Replace <div class="modal fade" id="myModal" role="dialog" > with <div class="modal fade hide" id="myModal" role="dialog" >
This hide class will set your modal inaccessible, bootstrap will take it off when you click the button.
This site you commented uses Bootstrap 2.3 link to documentation. If you edit it, this site will help you.
I just and a CSS style that seems to resolve.
On the first div of the Modal, whose the id is myModal just add the flolowing:
<div class="modal fade" id="myModal" role="dialog" style="display:none;">

HTML frame - Prevent bootstrap popup to disappear when user click body

I am using bootstrap modal popup to show a a message. When I am using the below statement inside a html frame then modal dialog is getting disappear when user click anywhere in the body . My requirement is to prevent this popup to disappear.
$('#testModel').modal({backdrop: 'static', keyboard: false});
<div class="modal fade" id="testModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body err-cnct">
<h2><i class="demo-icon fa-lg icon-cancel"></i></h2>
<p> <h4 class="modal-title">Connection Error!</h4>
Connection to the Hub has been lost. <br/>Please check power and Ethernet connections. </p>
</div>
</div>
</div>
</div>
Thanks.
See the documentation here. Set a data attribute as such:
data-backdrop="static"

Bootstrap modal issue (not able to show the second modal)

So I have two modals which are triggered depending on the button I click
The first one is trigeered like this:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
And it is built this way
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
An the second one is called using a button:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
And it is built the same way:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
When I open the first one, I have no issue.
But when I want to open the second one, it disappear as soon as it has appeared.
I know that:
I have to include only one js bootstrap file
My scripts have to be at the end (for the sake of page rapidity loading)
Do I miss something?
As says comment of Ubiquitous Developers Bootstrap modal issue (not able to show the second modal) you should give button type as button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
This is an old question, but I had the same issue and found this.
In your first modal, your div with class modal-header isn’t closed - you’re missing a </div>.
This means that the second modal will sort of be inside the first, which causes issues.
I found the issue by looking in the Elements tab of Chrome’s F12 tools, which shows issues like this well.

Photo gallery not showing images when clicked on

The issue is on here. The tabs are working just great, but when I click on the last tab: "Vincents Apartment", the images don't show when clicked on.
It's a thumbnail gallery and it worked before on other pages.
It supposed to be working this way: when you click on an image, it should show and you then can click next to see the next image.
I have this js file: photo-gallery.js - I think the problem is here, with the code.
you should add this code in services.html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<div class="modal-body"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
You missed to add some html code in services.html page. That is id="myModal" block code. The code is available in gallery.html page. Copy & paste in services.html page. it will work.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-abelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
your click handler was not registered since the element was injected later, hence not part of the DOM.
if you are using jquery for example. you would replace your usual img or anchor click handler to something like
$('body').on('click', 'your img or anchor selector here', function () {
}

Shaded bootbox dialog

I'm using bootbox to create bootstrap modals. Here is how I'm creating a sample one:
bootbox.dialog({message: "hello"});
My problem is that the rendered dialog is kind of disabled (all screen is shaded), I can't click on it and even ESC cannot make the modal disappear!
When I inspect the dialog element in the browser this is what I see:
<div class="bootbox modal fade in" tabindex="-1" role="dialog" style="display: block;" aria-hidden="false">
<div class="modal-backdrop fade in" style="height: 321px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">×</button>
<div class="bootbox-body">hello</div>
</div>
</div>
</div>
</div>
I checked with bootbox examples and it looks like it's the same CSS classes that have been used. So what's wrong here?
I've to to add the following CSS to fix the problem:
.modal-backdrop.fade.in {
z-index: 0;
}

Categories