I have the following views:
class ArticleVideoCreate(CreateView):
model = ArticleVideo
fields = ['article', 'video', 'video_url']
and this url:
path('', CatalogListView.as_view()),
path('video/<int:article_id>/create', ArticleVideoCreate.as_view(), name='video-create')
I'm in the ListView page. and I have a button to add an article Video:
<ion-icon name="videocam"></ion-icon>
In my articlevideo_form.html (for create the article video, is the modal):
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My problem is that when I click the button to add an ArticleVideo, django redirects me to video//create with only the modal shown. Which is the best way to show the modal of the CreateView, in the same page, using Django? And clicking create and doing all in the same page?
Related
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order Completed</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% if accepted_order %}
<div class="collapse" id="collapseAcceptedCreatorOrders">
<div class="card card-body">
<h1>Buyer: {{ accepted_order }}</h1>
<a href="{% url 'dashboard' %}">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Mark As Bought
</button>
</a>
<button>Withdraw</button>
</div>
</div>
{% endif %}
I am trying to show a modal when a user clicks a button, inside this if statement. The only issue is when the button is clicked, the modal pops up for a split second and then disappears. When I use the button outside of the if statement it works fine, but I need to use it in the if statement. How can I do this?
After some trial and error, I figured it out. When the {% url ... %} command in the template is run, apparently, that refreshes the page, which I didn't know. So, all I did was add that portion in the modal. Basically, instead of encasing the button that opens the modal (that says "Mark as Bought") in a link that runs the logic. I just put a button in the if statement that then opens the modal, and inside the modal is where the logic is run.
I am trying to open a remote modal window using Bootstrap. The page that opens the modal has the following code.
<a class="test" href="" data-toggle="modal" data-target="#myModal">Test</a>
<div class="modal-container"></div>
<script type="text/javascript">
$(document).ready(function () {
$('.test').click(function () {
$('.modal-container').load(url, function (result) {
$('#myModal').modal('show');
});
});
});
</script>
The remote page has the following code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
... remote
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
The problem that I have is that the first time the modal is called remotely it opens and closes normally but if I want to open it again, it does not close. If the modal (same code) is defined locally it works fine.
Please help
I think that you must close the first div and change role attribute on
<div class="modal-dialog">
try it!
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
... remote
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
sample.html: In this page I had a button as below as
<button data-toggle="modal" class="btn btn-info" onclick="location.href='home.html'" data-target="#testModal">button</button>
on click on the above button open a modal named home.cfm and its content as below as
home.html:
<div id="testModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
but no modal is opening.please help
You have to just need to call a modal-contant data from the home.html file , so put below code in to your sample.html file.
<button class="btn btn-info" onclick="show_modal('home.html','Home page','')">button</button>
<div class="modal fade bs-modal-sm" id="modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog animated bounceIn">
<div class="modal-content">
</div>
</div>
</div>
Add one function in to the js file and add reference of that js file in to the sample.html.
function show_modal(target, title, size) {
jQuery('#modal').removeData('bs.modal');
jQuery('.modal-content').html('');
jQuery('.modal-dialog').removeClass('modal-lg');
jQuery('#modal').removeClass('create_event_task');
jQuery('.modal-dialog').addClass(size);
var newTarget = target.indexOf("?") >= 0 ? target + '&modal-title=' + title : target + '?modal-title=' + title;
jQuery('#modal').modal({remote: encodeURI(newTarget)});
}
Add below code in home.html file.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
I hope this will help full to you.
I am having two Bootstrap modal. On returning back to previous modal from second modal it is not visible.Second modal has a file field. On changing the value of file field the second modal should hide and the first modal should be displayed. Can anyone help me out? Following is my try:
<html lang="en">
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal123" data-dismiss="modal">Open Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal123" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.123</p>
<form action="demo_form.asp">
Select a file: <input type="file" name="img" id="File">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$("#File").change(function(){
$("#myModal123").hide();
$("#myModal").show();
alert("Hello");
})
</script>
</body>
</html>
Thank you in advance.
Please replace your JQuery code to below
$("#File").change(function () {
$("#myModal123").modal("hide");
$("#myModal").modal("show");
})
I've added bootstrap modal to my website, but it's not working. Someone help me fix it. Thanks.
<button type="button" class="btn btn-info btn-lg">Update</button>
<!-- Modal -->
<div class="modal fade" id="myupdate" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Update </h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Missing your data-toggle and target
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myupdate">Open Small Modal</button>
You need to set data-target as target id of your modal and data-toggle = "modal" to the button on which you want to activate the modal
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" data-target="#myupdate" data-toggle="modal" class="btn btn-info btn-lg">Update</button>
<!-- Modal -->
<div class="modal fade" id="myupdate" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Update </h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>