I am writing a simple AJAX site using a Django back-end where you can create articles. Each article has an edit button, which can be used to modify that pre-existing article on the page. This button pops up an edit form (the issue at hand) in a Bootstrap Modal.
The edit form has only 3 fields: headline, subheading, and a date (for now). Whatever the field inputs are, they are not sent back to Django properly and the is_valid() method returns False every single time. This is what form.errors gives me as output every single time:
<ul class="errorlist"><li>headline<ul class="errorlist">
<li>This field is required.</li>
</ul>
</li>
<li>subheading<ul class="errorlist">
<li>This field is required.</li></ul></li>
<li>date<ul class="errorlist"><li>This field is required.</li></ul></li></ul>
The "This field is required" is likely because the model does not have blank=True, so the form must be sending empty fields.
Below is all my code in question, including the form in HTML, the AJAX call, and the Django form.
views.py:
# Handles editing articles
class ArticleEdit(View):
def post(self, request, id):
editForm = ArticleForm(request.POST)
if editForm.is_valid():
print("Debug: Form is valid")
# No Logic here yet
return JsonResponse({'edited' : 'OK'}, status=200)
else:
print(editForm.errors)
return JsonResponse({'edited' : 'FAIL'}, status=200)
forms.py
class ArticleForm(ModelForm):
class Meta:
model = Article
fields = ['headline', 'subheading', 'date']
widgets = {
'headline' : forms.TextInput(attrs={'class': 'form-control'}),
'subheading' : forms.TextInput(attrs={'class': 'form-control'}),
'date' : forms.TextInput(attrs={'class': 'form-control'}),
}
articles.html
<!-- Bootstrap Modal -->
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Article</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!-- Edit Form -->
<form class="form-group" method="post" id="editArticleForm">
{% csrf_token %}
{{ editForm }}
<button type="button" class = "btn btn-outline-success my-3" id="finishEditButton">Finish</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
articles.js
function finishEdit()
{
editData = $('#editArticleForm').serialize();
console.log(editData);
$.ajax
({
url: '/' + currentlyEditing.data('id') + '/edited/',
data: {csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), data: editData, id: currentlyEditing.data('id')},
type: 'post',
success: function(data)
{
if (data.edited == "OK")
{
console.log("EDIT::RESPONSE OK");
}
else
{
console.log("EDIT::RESPONSE FAIL");
}
}
});
I've tried deleting the modal, and having the form as a simple element instead. I've also tried to rewrite my Ajax request but that hasn't worked either. Plus, the serialized data created from the form displays the information typed into the input fields, but it doesn't end up in Django.
In conclusion, my whatever my data is in my form in articles.html is not sent properly to Django, no matter what I type, and I cannot seem to figure out the problem. I would really appreciate some help with this.
Thank you all in advance.
Related
I have a page where I load 2 files. After a click to the load button, this page reload to display a major part of the data, allowing the user to modified it. After a click to lunch button, I want to launch the process and I want to send to another page the path of results files to allow the user to download it.
My problem is after clicking on lunch button and send data to the other page. I have 2 versions :
The first one, send data to the result page, but I do not find a way to take back in the view the data modified by the user, the ajax seems to be ignored because of the type "summit" for the button launch :
<body>
<section class="bg-light py-5 border-bottom">
<div class="container px-5 my-5 px-5">
<div>
<h1 class="display-5 fw-bolder mb-2"> Convert to Dose </h1>
<br>
</div>
<form id="formCTD" action="{% url 'json:convertToDose' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
##here some fields to modified one of them following
<div class="row gx-5 justify-content-center">
<div class="col-lg-4 col-xl-4">
{% if factors %}
<input name="img_path" readonly
class="form-control" {{ pathAnalyseForm.img_path }}>
{% else %}
<input id="btn-submit-form-jsonfile"
class="btn btn-lg" {{ formImgFile.imgFile }}>
{% endif %}
</div>
</div>
<div class="text-center">
<div class="d-grid">
{% if factors %}
<button class="btn btn-primary btn-lg" id="launchButton" type="submit">
Launch
</button>
{% else %}
<button class="btn btn-primary btn-lg" id="submitButton" type="submit">
Load
</button>
{% endif %}
/div>
</div>
</form>
</div>
</section>
</body>
And the js block :
<script type="text/javascript">
$(document).ready(function () {
$("#launchButton").on('submit', function(e) {
e.preventDefault();
var form = $("#formCTD").get(0) //recup en html
// Est-ce que le formulaire est valide ?
console.log("valid? ")
if (form.checkValidity()) {
console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ")
nam = $("input[name='img_path']").val()
json = $("input[name='json_path']").val()
console.log(nam)
data = {"img_path" : nam,
"json_path": json}
console.log("bef ajax")
$.ajax({
url: "/filmchromique/convertToDose/",
type: "POST",
data: data,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", $('input[name="csrfmiddlewaretoken"]').val());
},
success: function (response) {
console.log("ok")
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
})
console.log("after ajax")
}
});
});
</script>
And the view :
def launchCtd(request):
if request.method == 'POST':
#2 after click load
if bool(request.FILES.get('calibrationFile', False)) == True and bool(request.FILES.get('imgFile', False)) == True :
#do some test ok
context = {
'factors': True,
'factorsCalib': factorsCalib,
'formCtd': formCtd,
'formJsonFile': formJsonFile,
'formImgFile': formImgFile,
'pathAnalyseForm': pathAnalyseForm,
'doseRect': doseRect,
'ctrlRect': ctrlRect,
}
return render(request, 'convertToDose.html', context)
after click lunch
else:
if request.is_ajax:
print ("here")#check
img_path = request.POST.get("img_path")
doseRectStr = request.POST.getlist('form[]')
json_pactrlRectth = request.POST.get("json_path")
method = request.POST.get("analyse_type")
if method == 'rb':
#init var
if method == 'multi':
#init var
img_out_path, json_pactrlRectth = functionTOLaunch()
context = {
'filename': img_out_path,
'protocol_file': json_pactrlRectth,
}
return render(request, 'result.html', context)
#1 load init
else:
formCtd = CtdForm()
formJsonFile = JsonFileForm()
formImgFile = ImgFileForm()
context = {
'factors': False,
'formCtd': formCtd,
'formJsonFile': formJsonFile,
'formImgFile' : formImgFile,
}
return render(request, 'convertToDose.html', context)
and the result page is a basic TemplateView.
In this first case, console.log in the ajax are not printed, I do not understand why and I supposed the function is not called (and so the ajax part)
in the second version, views are identical but I modified this on the html :
<button class="btn btn-primary btn-lg" id="launchButton" type="button">
Launch</button>
and this in the js part :
$("#launchButton").on('click', function(e) {....}
Data are sended to the view, I can read it but when I do the render to display the result page with out process data, nothing append... I supposed I have to implement something in the succes ajax part, but I do not understand what I have to do. I supposed I have to implement a new ajax request, to send the new context to the result page but how I take back the context sended by the render in the success ajax ... I'am totaly new and lost on this tech
Thanks for reading :)
I have books retrieved from database in the Index view. Each one has a button below. When you click them a modal box should pop up with the corresponding book details (book img, name title, decsription, price etc) printed on it.
Index View:
<!-- language: lang-html -->
#model AuthorTest.Models.HomeModel
<!--razor codes where book properties are called-->
#foreach(var book in Model.Bestsales)
{
<a class="first__img" href="single-product.html"><img src="~/Uploads/img/#(book.Id + " .jpg ")"</a>
<h4>product.html">#book.Name</a></h4>
<ul class="prize d-flex">
<li>#book.Price</li>
</ul>
<!--modal-box pop-up button-->
<a data-toggle="modal" title="Quick View" data-id="#book.Id" class="modal-open" href="#productmodal"><i class="bi bi-search"></i></a>
}
I'm trying to pass a book id using ajax
<!-- language: lang-js-->
#section scripts{
<script>
$(".modal-open").click(function () {
var id = $(this).data("id");
$.ajax({
type: "POST",
url: "/Home/Details/" + id
});
});
</script>
}
into the "Details" action that retrieves related book and returns it to a view where modal box content is placed.
<!-- language: lang-cs-->
[HttpPost]
public ActionResult Details(int id)
{
HomeModel model = new HomeModel();
var book = db.Books.Where(b => b.Id == id).Include(b => b.Author).SingleOrDefault();
if (book == null)
{
HttpNotFound();
}
book.DisplayNumber++;
db.SaveChanges();
model.bookDetails = book;
return view( model);
}
This is the HomeModel class that I use to keep two models 1)list property of type Book to loop through my books in the Index view
2)property of Book type to call model-related book datas in "Details" view:
<!-- language: lang-cs-->
public class HomeModel
{
public List<Book> BestSales { get; set; }
public Book bookDetails { get; set; }
}
a view where modal box content is placed:
<-- language: lang-html-->
#model AuthorTest.Models.HomeModel
div id="quickview-wrapper">
<!-- Modal -->
<div class="modal fade" id="productmodal" tabindex="-1" role="dialog">
<div class="modal-dialog modal__container" role="document">
<div class="modal-content">
<div class="modal-header modal__header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="modal-product">
<!-- Start product images -->
<div class="product-images">
<div class="main-image images">
<img alt="big images" src="~/Uploads/img/#(Model.bookDetails.Id + ".jpg")">
</div>
</div>
<!-- end product images -->
<div class="product-info">
<h1>#Model.bookDetails.Name</h1>
<div class="rating__and__review">
</div>
<div class="price-box-3">
<div class="s-price-box">
<span class="new-price">#Model.bookDetails.Price</span>
<span class="old-price">$34.00</span>
</div>
</div>
<div class="quick-desc">
#Model.bookDetails.Description
</div>
<div class="addtocart-btn">
Add to cart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When I click modal-open button the id gets passed to the "Details" action, corresponding book is retrieved and takes me to the view. But it seems like modal box pops up before ajax runs action and therefore the data is not printed. Where do I make mistake? How to pass the book details into the modal-box correctly?
An Ajax call is asynchronous, so you must get in this mindset: when you work in a non sync way, you shall manage async calls with callbacks. jQuery offers different types of callback for the $.ajax() method, such as "success","error".... on and on. If the ajax call results in a server exception for instance, the HTTP result will be 500 and you can manage it in the "error" callback subscribing the callback with a your custom method that will be raised by jQuery. On the other way, the success callback must be subscribed by a method that accepts parameters where will be the server response (in this case, an html response). So, if the result is a success (HTTP Status code 200), you will have the HTML in that parameter, and you can use it to append in your modal (always with jQuery methods... or even in simple javascript if you like more)
Take a look to callbacks subscriptions:http://api.jquery.com/jquery.ajax/ in the "Callback Function Queues" section. You will find out that I gave you just a real basic explanation and there's a lot of more to learn!
So I have this update view:
class UpdateRules(UpdateView):
model = BlackList
form_class = AddRules
template_name= 'blacklist_form.html'
success_url = reverse_lazy('posts:list')
which displays this template blacklist_form.html:
<form class="well contact-form" method="post" action="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Editing Number</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{form.as_p}}
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
</div>
</form>
Then in the template where the modal is called/rendered I have this link for each object to be edited:
<a class="contact" href="#" data-form="{% url 'posts:update_rules' obj.pk %}"
title="Edit">
And this div to display the modal:
<div class="modal" id="contactModal">
</div>
Lastly, the jQuery:
$(document).ready(function() {
$(".contact").click(function(ev) { // for each edit contact url
ev.preventDefault(); // prevent navigation
var url = $(this).data("form"); // get the contact form url
console.log(url);
$("#contactModal").load(url, function() { // load the url into the modal
$(this).modal('show'); // display the modal on url load
});
return false; // prevent the click propagation
});
$('.contact-form').on('submit',function() {
$.ajax({
type: $(this).attr('method'),
url: this.action,
data: $(this).serialize(),
context: this,
success: function(data, status) {
$('#contactModal').html(data);
}
});
return false;
});
});
My problem is this: I'm able to get the update view form to display in the modal when I click the edit link for each object, but the submit button doesn't do anything. When I save the form from the actual updateview template, it works just fine, so I'm thinking it must be something wrong with the jQuery. I'm not getting any errors, the modal just disappears and the page doesn't reload. Any pointers on what going on?
I'm making a CRUD application for a school project, where there is a list of 'lesson groups', which you can add or remove.
I have a bootstrap modal that looks like this, where you can input a lesson group name and press a button to submit it:
<div class="modal fade" id="lessonGroupAddModal" tabindex="-1" role="dialog"
aria-labelledby="lessonGroupAddModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="lessonGroupAddModalLabel">Les groep toevoegen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="addLessonGroupForm" role="form">
<div class="form-group">
<label for="lessonGroupName-input" class="col-2 col-form-label">Naam</label>
<div class="col-10">
<input class="form-control" type="text" value="" id="lessonGroupName-input">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sluiten</button>
<button id="addLessonGroupButton" type="button" class="btn btn-primary">Toevoegen</button>
</div>
</div>
</div>
</div>
The button works by a JavaScript AJAX post request, this looks like this:
$("#addLessonGroupButton").on("click", function() {
if($("input[type=text]#lessonGroupName-input").val()) {
$.ajax({
type: 'POST',
url:'lessongroup/add.action',
dataType: 'json',
data : "lessonGroupName="+$("input[type=text]#lessonGroupName-input").val(),
});
}
location.reload();
});
The action method i'm using for this looks like this:
public String addLessonGroup() {
if (this.lessonGroupName == null || this.lessonGroupName.equals("")) {
return ERROR;
}
LessonGroup previousLessonGroup = this.getLessonGroups().last();
TestDAOLessonGroup.getInstance().create(new LessonGroup(previousLessonGroup.getId() + 1, lessonGroupName));
System.out.println("added lesson group with name " + lessonGroupName);
return SUCCESS;
}
The TestDAOLessonGroup is a singleton which saves that objects, i'm 100% sure the object is only getting made once.
The execute method of the controller looks like this:
public String execute() {
if (lessonGroups == null) {
lessonGroups = new TreeSet<>();
}
lessonGroups.clear();
lessonGroups.addAll(TestDAOLessonGroup.getInstance().getLessongroups());
return SUCCESS;
}
This puts the most recent lesson groups into the variable, which i am getting in the view.
My struts.xml action mapping looks like this:
<action name="lessongroup" class="employeemanagement.LessonGroupListingAction"
method="execute">
<result name="success">index.jsp</result>
</action>
I'm 100% sure this mapping works, and the lesson grouups are getting loaded in the view.
The problem is that when you add a new lesson group to the DAO via the post request, and it reloads the page by the location.reload(); statement, it doesn't call up the action the first time. When I add another lesson group, it works just fine.
How can I make it so that the Action would get called on the first page refresh? Am I using the right approach for this?
The url is not mapped to the action. You should add
<action name="add" class="employeemanagement.LessonGroupListingAction"
method="add">
<result type="json"/>
</action>
The json plugin is required to return json type result.
This action should be mapped to the url in ajax call
$("#addLessonGroupButton").on("click", function() {
if($("input[type=text]#lessonGroupName-input").val()) {
$.ajax({
type: 'POST',
url:'add.action',
dataType: 'json',
data : "lessonGroupName="+$("input[type=text]#lessonGroupName-input").val(),
success: function(data) {
console.log(JSON.stringify(data));
}
});
}
});
I was looking to using the Twitter Bootstrap Modal windows as a partial view. However, I do not really think that it was designed to be used in this fashion; it seems like it was meant to be used in a fairly static fashion. Nevertheless, I think it'd be cool to be able to use it as a partial view.
So for example, let's say I have a list of Games. Upon clicking on a link for a given game, I'd like to request data from the server and then display information about that game in a modal window "over the top of" the present page.
I've done a little bit of research and found this post which is similar but not quite the same.
Has anyone tried this with success or failure? Anyone have something on jsFiddle or some source they'd be willing to share?
Thanks for your help.
Yes we have done this.
In your Index.cshtml you'll have something like..
<div id='gameModal' class='modal hide fade in' data-url='#Url.Action("GetGameListing")'>
<div id='gameContainer'>
</div>
</div>
<button id='showGame'>Show Game Listing</button>
Then in JS for the same page (inlined or in a separate file you'll have something like this..
$(document).ready(function() {
$('#showGame').click(function() {
var url = $('#gameModal').data('url');
$.get(url, function(data) {
$('#gameContainer').html(data);
$('#gameModal').modal('show');
});
});
});
With a method on your controller that looks like this..
[HttpGet]
public ActionResult GetGameListing()
{
var model = // do whatever you need to get your model
return PartialView(model);
}
You will of course need a view called GetGameListing.cshtml inside of your Views folder..
I do this with mustache.js and templates (you could use any JavaScript templating library).
In my view, I have something like this:
<script type="text/x-mustache-template" id="modalTemplate">
<%Html.RenderPartial("Modal");%>
</script>
...which lets me keep my templates in a partial view called Modal.ascx:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>{{Name}}</h3>
</div>
<div class="modal-body">
<table class="table table-striped table-condensed">
<tbody>
<tr><td>ID</td><td>{{Id}}</td></tr>
<tr><td>Name</td><td>{{Name}}</td></tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
I create placeholders for each modal in my view:
<%foreach (var item in Model) {%>
<div data-id="<%=Html.Encode(item.Id)%>"
id="modelModal<%=Html.Encode(item.Id)%>"
class="modal hide fade">
</div>
<%}%>
...and make ajax calls with jQuery:
<script type="text/javascript">
var modalTemplate = $("#modalTemplate").html()
$(".modal[data-id]").each(function() {
var $this = $(this)
var id = $this.attr("data-id")
$this.on("show", function() {
if ($this.html()) return
$.ajax({
type: "POST",
url: "<%=Url.Action("SomeAction")%>",
data: { id: id },
success: function(data) {
$this.append(Mustache.to_html(modalTemplate, data))
}
})
})
})
</script>
Then, you just need a trigger somewhere:
<%foreach (var item in Model) {%>
<a data-toggle="modal" href="#modelModal<%=Html.Encode(item.Id)%>">
<%=Html.Encode(item.DutModel.Name)%>
</a>
<%}%>
I have achieved this by using one nice example i have found here.
I have replaced the jquery dialog used in that example with the Twitter Bootstrap Modal windows.
Complete and clear example project
http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals
It displays create, edit and delete entity operation modals with bootstrap and also includes code to handle result returned from those entity operations (c#, JSON, javascript)
I use AJAX to do this. You have your partial with your typical twitter modal template html:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="LocationNumberModal" 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">
Serial Numbers
</h4>
</div>
<div class="modal-body">
<span id="test"></span>
<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>
</div>
Then you have your controller method, I use JSON and have a custom class that rendors the view to a string. I do this so I can perform multiple ajax updates on the screen with one ajax call. Reference here: Example but you can use an PartialViewResult/ActionResult on return if you are just doing the one call. I will show it using JSON..
And the JSON Method in Controller:
public JsonResult LocationNumberModal(string partNumber = "")
{
//Business Layer/DAL to get information
return Json(new {
LocationModal = ViewUtility.RenderRazorViewToString(this.ControllerContext, "LocationNumberModal.cshtml", new SomeModelObject())
},
JsonRequestBehavior.AllowGet
);
}
And then, in the view using your modal: You can package the AJAX in your partial and call #{Html.RenderPartial... Or you can have a placeholder with a div:
<div id="LocationNumberModalContainer"></div>
then your ajax:
function LocationNumberModal() {
var partNumber = "1234";
var src = '#Url.Action("LocationNumberModal", "Home", new { area = "Part" })'
+ '?partNumber='' + partNumber;
$.ajax({
type: "GET",
url: src,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
$("#LocationNumberModalContainer").html(data.LocationModal);
$('#LocationNumberModal').modal('show');
}
});
};
Then the button to your modal:
<button type="button" id="GetLocBtn" class="btn btn-default" onclick="LocationNumberModal()">Get</button>
Put the modal and javascript into the partial view. Then call the partial view in your page.
This will handle form submission too.
Partial View
<div id="confirmDialog" class="modal fade" data-backdrop="false">
<div class="modal-dialog" data-backdrop="false">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Missing Service Order</h4>
</div>
<div class="modal-body">
<p>You have not entered a Service Order. Do you want to continue?</p>
</div>
<div class="modal-footer">
<input id="btnSubmit" type="submit" class="btn btn-primary"
value="Submit" href="javascript:"
onClick="document.getElementById('Coordinate').submit()" />
<button type="button" class="btn btn-default" data-
dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Coordinate").on('submit',
function (e) {
if ($("#ServiceOrder").val() == '') {
e.preventDefault();
$('#confirmDialog').modal('show');
}
});
});
</script>
Then just call your partial inside the form of your page.
Create.cshtml
#using (Html.BeginForm("Edit","Home",FormMethod.Post, new {id ="Coordinate"}))
{
//Form Code
#Html.Partial("ConfirmDialog")
}