I have a form in a url.
I want to load it in an existing page.
I'm following this tutorial https://www.abidibo.net/blog/2014/05/26/how-implement-modal-popup-django-forms-bootstrap/
This is the form template
{% load i18n widget_tweaks %}
<div class="modal-dialog modal-lg" role="document">
<form action="{% url 'flag_post' %}" method="post" id="flag-form" class="form">{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Report Post</h4>
</div>
<div class="modal-body">
{{ form.media }}
{% render_field form.reason class="form-control" %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save changes" />
</div>
</div><!-- /.modal-content -->
</form>
</div><!-- /.modal-dialog -->
<script>
var form_options = { target: '#modal', success: function(response) {} };
$('#flag-form').ajaxForm(form_options);
</script>
This is my link that is supposed to load the form
<a class="fa fa-pencil" data-toggle="modal" href="{% url 'flag_post' node.uid %}" data-target="#modal" title="edit item" data-tooltip></a> |
I have the following script tag embedded
<script src="http://malsup.github.com/jquery.form.js"></script>
When I call the url directly the form is displayed, but when I try clicking the button form is not loaded.
What is wrong with my code?
Is this the right way to load a form from an external URL?
I didn't have a modal placeholder.
Now I have
Report
Then at the bottom of the page
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
And it works! No JS and no other problems.
Now all I need to do is ajaxify my form submission.
Thanks #Sumeet Kumar
This link helped me
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url
Related
I have that html code:
<form id="my-form" method="POST" action="{% url 'my_view' %}">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="md-form mb-1">
<textarea id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-1">
<textarea id="message_then" name="message_then" rows="2" class="form-control md-textarea"></textarea>
</div>
</div>
</div>
<div class="text-center text-md-left">
<a class="btn btn-primary" onclick="document.getElementById('my-form').submit();" style="width: 78px;" name="name1">Click1</a>
</div>
<div class="text-center text-md-left">
<a class="btn btn-primary" onclick="document.getElementById('my-form').submit();" style="width: 78px;" name="name2">Click2</a>
</div>
</form>
Now I would like to get to know which "button" was clicked. Unfortunately request.POST doesn't have that information.
You should add another field to specify which button has been clicked.
Exp:
Add this to your form
then update your "a" elements onclick event code like this:
<a class="btn btn-primary" onclick="update_form(this)" style="width: 78px;">Click1</a>
And finally some js code to update the form
<script>
function update_form(button){
document.getElementById("id_button").value = document.getElementById(button).innerText;
document.getElementById('my-form').submit();
}
</script>
In your django view use this to get the selected button:
request.POST['id_button']
I want to delete users with modals in django. I have a deletion function which I don't know how I should return to template.
views.py:
#login_required(login_url='admin_signin')
#admin_only
def admin_profiles_deletion(request, username):
context = {}
account = Account.objects.get(username=username)
account.delete()
messages.success(request, "User deleted!")
context['account'] = account
return render(request, 'HOW SHOULD I REFER MODALS HERE?', context)
And my urls.py looks:
path('admin/profile/<str:username>/delete', views.admin_profiles_deletion, name='admin_profiles_deletion'),
And finally my template is:
<td class="text-center td-actions">
<i class="la la-eye view"></i>
<i class="la la-edit edit"></i>
<a href="{% url 'admin_profiles_deletion' account.username %}" data-toggle="modal" data-target="#deleteaccount">
<i class="la la-close delete"></i>
</a>
<!-- Modal -->
<div class="modal fade" id="deleteaccount" tabindex="-1" role="dialog" aria-labelledby="deleteaccountTitle" 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="deleteaccountTitle">Delete confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Do you want to delete?</h5>
</div>
<div class="modal-footer">
<div class="col-6 text-left">
<div class="previous">
<form method="POST">
{% csrf_token %}
<input class="btn btn-danger btn-sm btn-block" type="submit" name="submit" value="Yes">
</form>
</div>
</div>
<div class="col-6 text-left">
<div class="next">
<a class="btn btn-info btn-sm btn-block" href="{% url 'accounts' %}">No</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
In modal I want to hit YES and then delete specific account. but I don't know how to do it while I am using modals.
Try this one.
from django.shortcuts import redirect
...
def admin_profiles_deletion(request, username):
...
return redirect("/admin/profile/")
# or to return to same (previous) page:
return redirect(request.META['HTTP_REFERER'])
In your template add action attribute to your form
<form method="POST" action="{% url 'admin_profiles_deletion' account.username %}">
{% csrf_token %}
<input class="btn btn-danger btn-sm btn-block" type="submit" name="submit" value="Yes">
</form>
OR to update action attribute dynamically
<a href="#" data-url="{% url 'admin_profiles_deletion' account.username %}" class="deleteaccount">
<i class="la la-close delete"></i>
</a>
and than with jQuery
<script>
$(document).ready(function() {
$('a.deleteaccount').on( "click", function() {
event.preventDefault();
$('#deleteaccount form').attr('action', $(this).data("url"));
$('#deleteaccount').modal('show');
});
});
</script>
UPDATE - working example http://jsfiddle.net/cbzmewhq/1/
Add <span id="current_username"></span>? to your modal body.
Then with jQuery add your your desired text on click:
$('#deleteaccount #current_username').text($(this).data("username"));
BELOW IS AN EXAMPLE OF YOUR CODE
...<!-- YOUR TABLE -->
<td class="text-center td-actions">
<i class="la la-eye view"></i>
<i class="la la-edit edit"></i>
<a href="#" data-username="{{ account.username }}" data-url="{% url 'admin_profiles_deletion' account.username %}" class="deleteaccount">
<i class="la la-close delete"></i>
</a>
</td>
....<!-- YOUR TABLE -->
<!-- Modal OUT OF TABLE -->
<div class="modal fade" id="deleteaccount" tabindex="-1" role="dialog" aria-labelledby="deleteaccountTitle" 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="deleteaccountTitle">Delete confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- ADD SPAN TO ADD USERNAME dynamically -->
<h5>Do you want to delete <span id="current_username"></span>?</h5>
</div>
<div class="modal-footer">
<div class="col-6 text-left">
<div class="previous">
<form method="POST">
{% csrf_token %}
<input class="btn btn-danger btn-sm btn-block" type="submit" name="submit" value="Yes">
</form>
</div>
<div class="col-6 text-left">
<div class="next">
<a class="btn btn-info btn-sm btn-block" href="{% url 'accounts' %}">No</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ADD BELOW CODE TO THE BOTTOM OF BODY -->
<script>
$(document).ready(function() {
$('a.deleteaccount').on( "click", function() {
event.preventDefault();
$('#deleteaccount form').attr('action', $(this).data("url"));
$('#deleteaccount #current_username').text($(this).data("username"));
$('#deleteaccount').modal('show');
});
});
</script>
I need some help connecting a button which pops up a modal to submit form.
this is my html before the modal (works fine and another page is rendered after button is clicked)
<div class="container my-container">
<h3>
Let's get started
</h3>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data">
{%csrf_token%}
<input type="file" name="document"><br>
<button type="submit"> Submit</button>
</form>
</div>
</div>
I have added the modal but I now have a couple of issues
<div class="container my-container">
<div class="row my-row">
<h3>
Let's get started
</h3>
</div>
<div class="modal fade" id="demo123">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<div class="modal-header">
<h2 class="modal-title">
Confirm upload
</h2>
</div>
<div class="modal-body">
<p>this is the file name</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Confirm
</button>
</div>
</div>
</div>
</div>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns titled</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data">
{%csrf_token%}
<input type="file" name="document"><br>
<button class="btn btn-primary" data-toggle="modal" data-target="#demo123">
Submit
</button>
</form>
</div>
</div>
First issue I have is the "submit" button automatically makes the upload(renders to another page). How can I make so only if "confirm" button is the one which actually submits the form (if "x" then pop-up closes). Also how can I display the filename in the pop-up?
I use django with bootstrap 4
You have to use Javascript and since Bootstrap uses jQuery, you'll have to create that logic using Javascript and jQuery.
Handle the dialog confirm button click and only then trigger a form submit event.
Handle modal show event show.bs.modal and set the dialog filename element if there is a file selected and enable the confirm button; if there is no file selected, message the user about it using the same filename element and disable the confirm button so the user can't click it.
You can run the code snippet and test the whole functionality. On form submission we cancel the event and print a message in the console just for demonstration.
Please read inline comments
jQuery(function($) {
// Handle form submit.
// This won't be necessary unless you want some custom behavior.
// Here we just cancel the form submission and just display a message for demonstration
$('#uploadForm').on('submit', function(e) {
console.log('The form is submitting; preventing event for demonstration');
e.preventDefault();
});
// Handle dialog confirm button click.
$('#confirmUpload').on('click', function(e) {
// Submit the form and hide the dialog when confirm clicked
$('#demoModal123').modal('hide');
$('#uploadForm').submit();
});
// When the dialog is about to show, check if the user has selected a file.
// If they have, update dialog filename element and enabled the confirm button,
// else message user that there is no file and disable the confirm button
$('#demoModal123').on('show.bs.modal', function() {
let files = document.getElementById('documentFile').files;
let fileSelected = files && files[0];
if (fileSelected) {
$('#demoModal123 .filename').text(fileSelected.name);
$('#confirmUpload').prop('disabled', false);
} else {
$('#demoModal123 .filename').text('No file selected');
$('#confirmUpload').prop('disabled', true);
}
});
// Update file input group control label on file selection
$('#documentFile').on('change', function() {
$('#documentFileName').text(this.files[0].name);
});
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-container">
<h3>Let's get started</h3>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data" id="uploadForm">
<!-- {%csrf_token%} -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="documentFile" id="documentFile">
<label class="custom-file-label" id="documentFileName" for="documentFile">Choose file</label>
</div>
</div>
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#demoModal123">Submit</button>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="demoModal123">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">Confirm upload</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="filename">this is the file name</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirmUpload">Confirm</button>
</div>
</div>
</div>
</div>
To be able to act Confirm button as only submission, you'll have to add type="submit" in Confirm button and type="button" in Submit button. Like this:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo123">
Submit
</button>
<button type="submit" class="btn btn-secondary" data-dismiss="modal">
Confirm
</button>
I have rendered a form in my Flask web app. For my specific use case, I would like to add a modal dialog window to "confirm" the user's choice. I can get the modal to display, but I can't figure out how to map the "confirm" button (in the modal) to the form action. The examples on the bootstrap docs do not include button mapping in the examples.
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
<unrelated content>
...
</unrelated content>
...
<h4>Enter the email address of the employee receiving the unit</h4>
<div class="col-lg-3">
<div class="row">
<form class="form" id="emailForm" action="{{ url_for('main.transfer', serial=system.serial) }}" method="POST">
{{ mail_form.hidden_tag() }}
{{ mail_form.email }}
{{ mail_form.submit }}<!-- ###THIS IS WHAT I WANT THE MODAL CONFIRM TO TRIGGER -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Transfer
</button>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Unit Transfer</h5>
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
</div>
<div class="modal-body">
You are transferring a unit from {{ system.assignee.email }} to another user. Are you sure?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success success" type="submit" data-target="#emailForm.submit()">Confirm</button>
</div>
</div>
</div>
</div>
How do I tell the modal what I want to happen when the Submit button is clicked? All the documentation I can find talks about putting the entire form inside the modal, and that's not what I want.
Thanks in advance.
Make the following changes,
Change {{ mail_form.submit }} to {{ mail_form.submit(hidden='true', id='form-submit') }} to make the submit button hidden.
Change <button type="button" class="btn btn-success success" type="submit" data-target="#emailForm.submit()">Confirm</button> to <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
Add the below script after adding the jquery ,
<script>
$('#modal-confirm').click(function(){
// Perform the action after modal confirm button is clicked.
$('#form-submit').click(); // submitting the form
});
</script>
I hope this helps.
I have a WTF Form inside a Twitter Bootstrap 3 modal, which I need to validate. The problem is that the modal closes when the user submits the form, even if there are validation errors. If I click on the button that triggers the modal again, the validation error is displayed. So my question is, how do I get the modal to stay open when there are validation errors?
Thanks!
<button type="button" class="btn btn-default" data-toggle="modal" role="dialog" data-target="#save">
<span class="glyphicon glyphicon-flash"></span>
</button>
<div class="modal fade" id="save" 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>
<h3 class="modal-title" id="myModalLabel">Archive List and Start New</h3>
</div>
<form role="form_list" class="form form-medium" action="." method="post">
{{ form_save.csrf_token }}
<div class="modal-body">
<h4>Save list as: </h4>
{{ render_field(form_save.list_name, class="input-large") }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a href="#">
<button class="btn btn-success">Archive List</button></a>
</div>
</form>
</div><!-- modal content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
You should add some javascript to automatically open the modal when there are errors from the form.
Something like (with jQuery):
var formErrors = {% if form_errors %}true{% else %}false{% endif %};
$(document).ready(function() {
if (formErrors) {
$('.modal').modal('show');
}
});