Bootstrap Modal doesn't inject content in Ajax - javascript

I've an problem with modal box in Bootstrap3.
My code:
<a data-remote="{{ path('popup_pages', {'page': 'cgu'}) }}" data-toggle="modal" data-target="#MyModal">Try</a></p>
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
The link is OK, I can retrieve the content without modal.
Now, I want to inject in the modal-content my page at the link {{ path('popup_pages', {'page': 'cgu'}) }} (don't take care about syntaxe, I use Twig, but an good link is generate).
For the moment, when I click on the link, it remove my html and only display a mailto (weird...) without changing page.
If I remove the data-remote and hard code content in modal-content, this work.
Any idea?
Thanks for help

Related

call Action twice in same view

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")

dynamic data target bootstrap modal -Django

I have a bunch of posts to show on a page. After clicking to read more, a bootstrap modal will come where the post will be showed. Also I am using django.
The thing is that I want to iterate through my queryset of all posts with a for loop.
My html looks like:
{% for post in posts %}
<!-- Modal -->
<div class="modal fade" id="post1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Button trigger modal -->
<p> {{ post.content|truncatewords:10 }}
<a data-toggle="modal" data-target="#post1">Post 1</a></p>
</div>
</div>
</div>
</div>
{% endfor %}
As you can see, here, in the trigger for showing the modal, data-target="#post1" is there and in the modal, there is also id="post1".
Now it's okay for one modal. But I have like 10-12 blog posts. So I can't hardcode each of it's data-target. So what can I do? I don't know javascript, so a complete bootstrap solution maybe helpful. Nevertheless any solution or idea what can I do?
Like post1 will get the id1 and then post2 should get the id2.
So can you please help me with this or give any other solution? It will be extremely helpful.
I have tried this post: how to dynamically change bootstrap modal data-target click but that didn't help.
So it was fairly simple, what I needed to do was to change the modal-target to #modal{{post.id}}" and the id of modal to modal{{post.id}} and voila!

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 3 Modal won't pop up when triggering from anchor tag

Looking at some video tutorials I follow what has been done but don't seem to get to modal of the register link to trigger.
Here is the link I want to trigger:
<li>Register</li>
Here is the modal that should be triggering
<!-- Register Modal -->
<div class="modal fade" id="#register-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
</div>
</div>
</div>
I assume that there should be jQuery to be implemented after looking at other answers but i do not see how come if the jQuery comes from the bootstrap. The Bootstrap 3 documentation seems to do the same as I did http://getbootstrap.com/javascript/#modals-examples
The id attribute shouldn't have a hashtag.
Change
<div class="modal fade" id="#register-modal" role="dialog"></div>
to:
<div class="modal fade" id="register-modal" role="dialog"></div>
Working Example

Bootstrap Modal - Set remote path and open programmatically

I'm using bootstrap 3 modals using the remote path option as follows.
view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--- content from mystuff.htm will appear here --->
</div>
</div>
</div>
This works fine, but instead of clicking the link I want to open the modal programmatically!
I'm trying to avoid triggering a click() event on the link if possible.
As of 3.2.1 the remote option is deprecated and will be removed in future versions. It is advisable to load the content explicitly and then call the show method to open the modal:
$('#modCurIssue').find('.modal-content').load( 'mystuff.htm', function() {
$('#modCurIssue').modal( 'show' );
});
According to the methods section on http://getbootstrap.com/javascript/#modals it's quite easy:
$('#modCurIssue').modal('show')
view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="mystuff.htm"></iframe>
</div>
</div>
</div>

Categories