dynamic data target bootstrap modal -Django - javascript

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!

Related

Creating Custom dialog/pop up box HTML

I am learning how to create custom dialog box in HTML by following tutorials but haven't been able to quite understand how I can create them the way i want. I want to achieve something like below:
The first one I want to create contains a listview.
The second one is dialog box that has textbox to enter in keyword and add to database by clicking create.
I have followed tutorials but being a beginner, I haven't be able to full understand how to go about create, therefore any help would be nice.
Through searching online, I have been able to create using modals to come up with: http://jsfiddle.net/jLs8myoa/9/
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="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">×</button>
<h4 class="modal-title" id="myModalLabel">Input Form</h4>
</div>
<div class="modal-body">
enter keyword <input type="textbox" id="textbox1"> </input><br>
<button type="button">Search</button>
<div> Listview </div>
</div>
</div>
</div>
</div
Few tutorials i have followed
https://www.w3schools.com/howto/howto_css_signup_form.asp
https://www.youtube.com/watch?v=-RLE2Q7OzME
In your code modal opens properly, I can't see any problem over there.
You just need to advance a bit in HTML, and CSS.
Start with W3 schools, they have awesome and easy tutorials for HTML5 and CSS. I think you will be able to make what you want once your basic will be clear. There are many ways to design the modal you are making.
Follow this...
CSS Tutorials...
Custom modal without Bootstrap...
CSS modal...

Opening bootstrap modal view in Django for editing a post

I am learning basic Django development and am creating a simple blog app with several posts that I create. My home page includes this code that iterates through all posts and displays them.
{% for post in all_posts %}
<div class="post-card">
{{post.title}}
{{post.description}}
<a data-toggle="modal" data-target="#postEditModal">
Edit Post
</a>
</div>
{% endfor %}
I have a #postEditModal which links to the Bootstrap data-target method and shows the following
<div id=#postEditModal class="modal fade" style="overflow: scroll;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
{{editpostform}}
</div>
My goal is to be able to click on the "Edit Post" link for each individual post, which should redirect to the slug for the post and open the modal all on top of the same page, and from there I should be able to edit the post using my {{editpostform}}. Clicking outside of the modal area should revert back to the same page.
I have tried many things like post.get_absolute_url and {% url 'single_post' post.id %}, but nothing so far has worked properly. I am assuming there is some level of Javascript/AJAX involved but I am not sure where to start with that.
You are creating several modals with the same id, and all your links point (data-target) to the same modal, which is not unique.
An easy solution is to add the post ID to the modal and the link. Try this:
<div id="#postEditModal{{ post.id }}" class="modal fade" style="overflow: scroll;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
{{editpostform}}
</div>
And modify the links like this:
<a data-toggle="modal" data-target="#postEditModal{{ post.id }}">Edit Post</a>

Bootstrap Modal ajax content, animation loading

I use the Bootstrap Modal by loading content from another page and that data is so complicated (multi query/dynamic form), so when open the modal, it will have a little bit stuck.
I want some animation or indicator to show that modal has not been crashed... please wait.
I have to search and try many ways but doesn't work, in some solution the .gif is stuck too when modal load. I use this method for remote content. http://jsfiddle.net/cp67J/1994/
<!-- Link trigger modal -->
<a href="remote_content.php?id=1" data-toggle="modal" data-target="#myModal" >
Launch Modal content 1
</a>
<a href="remote_content.php?id=2" data-toggle="modal" data-target="#myModal" >
Launch Modal content 2
</a>
<!--MODAL SECTION-->
<div class="modal fade" id="myModal" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
Dont know if bootstrap modal supports this. But simple solution would be.
Show normal modal with loading animation.
Load your content with ajax in background.
Replace loader with loaded data.
P.S. you can also experiment with $.fn.load and allow jQuery to do 2. and 3. steps for you.

Modal not being called on bootstrap 3

I have this following code:
<div class="btn slick-slide slick-active" data-toggle="modal" data-target="#photo-carousel-modal" data-slick-index="0" aria-hidden="false" style="width: 234px;">
<img class="img-holder img-thumbnail" src="image/path.jpg">
</div>
That was supposed to call for this modal here:
<div class="modal fade bs-example-modal-lg" id="photo-carousel-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
{{-- Modal's content --}}
</div>
</div>
</div>
It simply not triggers anything! Am I doing some stupidity and not realizing it?
P.S.: YES! The Bootstrap does work properly. I'm using it in other parts of the code and it works like a charm!
Make sure your bootstrap.js file is called AFTER your jQuery file like this:
<script src="path/to/jquery-file.js"></script>
<script src="path/to/bootstrap.js"></script>
(Also, remove any other bootstrap js file like bootstrap-modal.js, etc as bootstrap.js has everything in it already)
If the above is already done and it still is not showing, please post the codes from your <head....</head and the footer of your webpage on your question.
P.S. Check your browser console for errors so you can get a better idea on what is going on.
I found out later that my code had 3 call for jQuery library. one of them was after the bootstrap call. That's where I messed up!
(As a matter of fact, it was the other guy who works here.)
So, kids: DO NOT PLACE YOUR JQUERY CALL AFTER THE BOOTSTRAP CALL! It will make you go nuts!

Bootstrap Modal doesn't inject content in Ajax

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

Categories