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>
Related
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!
The following code successfully dynamically loads the "remote" page (data-remote="/booking-app-1") within the modal-body. However, this target page just contains a < script > which loads an IFrame (for an external payment application). This script does not execute. Is there a way to fix this, or a better way to just inject the booking applications's script via its URL directly into the modal-body?
I've also tried swapping the data-remote URL to my page with the URL direct to the booking app's script but this did not work.
<button type="button" class="btn" data-toggle="modal" data-target="#bookingApp-1" data-remote="/booking-app-1" >
BUY THING 1
</button>
<!-- Modal -->
<div class="modal fade" id="bookingApp-1" tabindex="-1" role="dialog" aria-labelledby="bookingApp-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
(CONTENT LOADS HERE)
</div>
</div>
</div>
<script> // I will have multiple modals with different scripts on the page
$('body').on('click.modal.data-api',
'[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-body').load($(this).data('remote')); });
</script>
/booking-app.php:
<script type="text/javascript" src="https://bookeo.com/widget.js?a=12345&type=1234_not_the_actual_url"></script>
I am fairly new to web development. I have this problem.. It is probably something simple but I can't seem to work it out.
I solved how to use a link to run some javascript. The javascript is supposed to open a modal but the script doesn't work.
To call my script I am using this: (I confirmed this works because I had placed an 'alert()' in the script to test if it went through)
<li>
<a data-toggle="modal" href="javascript:void(0)" onclick="showBugForm()">
<i class="fa fa-fw fa-bug"></i> Report a Bug
</a>
</li>
The script being called is:
function showBugForm(){
$('#repBug').modal('show');}
The main structure of my modal is shown below. I know the modal doesn't have any problems since I was able to load modal from a button, but I can't seem do it properly from an element. For the sake of context: I was able to load the modal by adding 'data-toggle="modal" data-target="#repBug"' to my button attributes, but I can't do the same with html link tag.)
<div class="modal fade" id="repBug" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Here's my Code -->
<div>
<div>
<div>
Any clues?
<a data-target="#repBug" data-toggle="modal" href="#repBug"><i class="fa fa-fw fa-bug"></i> Report a Bug</a>
Try this, it will solve your problem .Calling any function is not required here. Your modal will open directly on click of this anchor tag.
The issue I was having was because I missed to add:
<?php include_once('bug-form.php'); ?>
To my index.php file .. Because I had the code written in different php file named 'bug-form.
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.
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