I want to create dropdown list in django forms.
One way is to get the options and pass it to the template from views.py
Other way is via forms.py but i'm not sure how to do that.Although the code to do that is available,it's not usable for me as i want to generate options depending on the user that it logged in(that means using request parameter).Can you suggest how to do that?
The first method of passing via views.py works to the extent of generating a dropdown but i'm not able to get the value of selected option from request.It gives a null value.
Here's my code:
Template
<script type="text/javascript">
$(document).ready(function() {
$('#remove_form').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: '/remove/', // the file to call
success: function(response) { // on success..
$('#test').html("<p style='color:green;margin-left:40%;margin-right:40%;'>Submitted!</p>"); // update the DIV
},
error: function(e, x, r) { // on error..
$('#err').html(e); // update the DIV
}
});
return false;
});
});
</script>
......
......
<form method="POST" id="remove_form" action="">{% csrf_token %}
<select id="remove">
{% for i,p in dropdown %}
<option value="{{i}}">{{p}}</option>
{% endfor %}
</select>
{{remove|crispy}}
<input class="btn btn-primary" type="submit" value="Remove">
</form>
Also note that i'm rendering this form from one view but the data goes into another view for processing via ajax call.
<select id="remove">
The select tag takes a name attribute.
<select name="remove" id="remove">
Then your form works. http://codepen.io/C14L/pen/dMKqPE
Related
I have a form with an input of type file hidden. An image tag works as the clickable trigger to select the file itself, with js to trigger it (that works), but I want to automatically make a PUT request as one chooses an image instead of having to click a submit button on the form, every time the image is changed on the input field. I'm using ajax for that, but at the controller endpoint that processes the request, I don't seem to have any file. If I put other fields such as textual they seem to pass into the controller through the request just fine, though.
My route:
Route::put('/coins/image/{key}', [CoinController::class, 'image'])->name("coins.image");
My controller (no actual image-updating code yet; just what I'm doing to check for the file):
public function image(int $key)
{
dump(request()->file('file'));
dump(request()->file);
dump(request());
}
My HTML and JS in the following snippet:
function promptImageForUpload(elemId)
{
$('#' + elemId).click();
}
function uploadImage(event, imgId, key)
{
event.preventDefault();
var inputElem = event.target;
var imageFile = inputElem.files[0];
var imgElem = $('#' + imgId);
var form = $(inputElem).parent();
var formData = new FormData(form[0]);
formData.append('file', imageFile);
$.ajax({
url: "/coins/image/" + key,
type: "PUT",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: formData,
enctype: 'multipart/form-data',
processData: false,
contentType: false,
success: function(response) {
var reader = new FileReader();
reader.onload = function(e) {
imgElem.attr("src", e.target.result);
};
reader.readAsDataURL(imageFile); // convert to base64 string
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
<form data-key="0" id="coin-header-0_form" method="POST" action="#" enctype="multipart/form-data">
<input type="file" name="file" id="coin-header-0_file" style="z-index:-1; width: 100%; height: 100%; display: none;" onchange="uploadImage(event, 'coin-header-0_preview', 0)">
<input type="hidden" name="_method" value="PUT">
<meta name="csrf-token" content="7c3s2NmosdK9qzrS10xGAB0rYXw5g41azRjcmPQC">
<img src="http://snapbuilder.com/code_snippet_generator/image_placeholder_generator/60x40/007730/DDDDDD/this%20pict" width="50px" height="50px" alt="icon" id="coin-header-0_preview" onclick="promptImageForUpload('coin-header-0_file');">
</form>
</div>
For now, I am force-updating the preview of the image on the ajax success instead of retrieving it from the updated entity upon successful update, to avoid a second query.
I have the method set to PUT for spoofing in the ajax request and the xsrf token set the headers as well.
Enctype is set to multipart/form-data for files too. I have no clue as to why I don't see the uploaded file anywhere in the request.
Using Laravel Framework 8.25.0, jquery 3.5.1.
Please let me know if any more info is needed, anyone.
I couldn't find any solution on any stackoverflow entry or elsewhere that regards this subject.
Any help is greatly appreciated since I don't really how else to look at this in a debugging approach.
HTML forms do not support PUT, PATCH or DELETE actions. So, when defining PUT, PATCH or DELETE routes that are called from an HTML form, you will need to add a hidden _method field to the form. The value sent with the _method field will be used as the HTTP request method:
<form action="/foo/bar" method="POST">
<input type="hidden" name="_method" value="PUT">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</form>
You may use the method_field helper to generate the _method input:
{{ method_field('PUT') }}
In the same way, this check may also affect ajax forms. Then in your form switch to the POST method and set the PUT parameter for it to work.
i wrote some code to view my all showing events details using bootstrap modal popup when click read more button. but when i click read more button every response repeats same id.
this is my laravel code
#if(!empty($event))
#foreach($event as $value)
<!-- Single Blog Post -->
<div class="single-blog-post d-flex" id="event_tag">
<div class="post-thumbnail">
<img src="{{asset('images/'.$value->image)}}" alt="">
</div>
<div class="post-content">
<a class="post-title">
#if(strlen($value->title) <= 35)
{{$value->title}}
#else
{{substr($value->title, 0, 35) . '...'}}
#endif
</a>
<div class="post-meta d-flex justify-content-between">
<center><button id="event_button" class="post-cata cata-sm cata-success text_white" data-toggle="modal" data-target="#myModal">Read More</button></center>
</div>
</div>
<input type="hidden" name="event_id" id="event_id" value="{{$value->id}}"></div>
#endforeach
#endif
and this is javascript code to get id and show every id detail.
<script>
$(document).on("click", "#event_button", function() {
var id = $("event_id").val();
console.log(id);
$.ajax({
url: "/event/" + id + "/show",
dataType: "json",
success: function(html) {
$("#event_title").html(html.data.title);
}
});
})
</script>
every time repeats id no 2 when click each event read more button. how can i fix this?
Your code has some mistakes in html too. For example, has fixes ids in html.
'event_id'
'event_button'...
Try this...
<button id="event_button-{!! $value->id !!}" data-target="event_id-{!! $value->id !!}"
<input type="hidden" name="event_id" id="event_id-{!! $value->id !!}"
The code above will fixed the id issue.
Now let's to the JS code... Change the click event:
$(document).on("click", "button.post-cata", function() {
var id = $("#" . $(this).data("target").val();
...
Do you need to associate tags to work with the right value. Avoid to put fixes ids inside a php loop. The html id element must be unique in document.
So, has many ways to do this. In this case, the input hidden fild is not necessary. you can put the id in a attribute in the button tag too.
<button data-id="{!! $value->id !!}...
So in the jquery click event do:
var id = $(this).data('id');
It's more ease and clean.
give class name to button and add attribute to button
<button class="event_button post-cata cata-sm cata-success text_white" data-eventid="{{$value->id}}">Read More</button>
so no need to use hidden input id
now using jQuery :
$(document).on('click','.event_button',function(){
var event_id = $(this).attr("data-eventid");
$("#myModal").modal("show");
$.ajax({
url: "/event/" + event_id+ "/show",
dataType: "json",
success: function(html) {
$("#event_title").html(html.data.title);
}
});
});
Play framework 2.4.x. A button is pressed on my home page that executes some code via Ajax, and returns its results beneath the button without loading a new page. The results wait for a user to input some text in a field and press "submit". Those results Look like this:
<li class="item">
<div>
<h3>Email: </h3>
<a>#email.tail.init</a>
<h3>Name: </h3>
<a>#name</a>
</div>
<div>
<h3>Linkedin: </h3>
<form class="linkedinForm" action="#routes.Application.createLinkedin" method="POST">
<input type="number" class="id" name="id" value="#id" readonly>
<input type="text" class="email" name="email" value="#email" />
<input type="text" class="emailsecondary" name="emailsecondary" value="" />
<input type="text" class="name" name="email" value="#name" />
<input type="text" class="linkedin" name="linkedin" value="" />
<input type="submit" value="submit" class="hideme"/>
</form>
</div>
<div>
<form action="#routes.Application.delete(id)" method="POST">
<input type="submit" value="delete" />
</form>
</div>
</li>
Along with some jquery that slides up a li after submission:
$(document).ready(function(){
$(".hideme").click(function(){
$(this).closest('li.item').slideUp();
});
});
However, since a form POST goes inside an Action that must a return an Ok(...) or Redirect(...) I can't get the page to not reload or redirect. Right now my Action looks like this (which doesn't compile):
newLinkedinForm.bindFromRequest.fold(
errors => {
Ok("didnt work" +errors)
},
linkedin => {
addLinkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
if (checkURL(linkedin.url)) {
linkedinParse ! Linkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name)
Ok(views.html.index)
}else{
Ok(views.html.index)
}
}
)
Is it possible to return Ok(...) without redirecting or reloading? If not how would you do a form POST while staying on the same page?
EDIT: Here is my attempt at handling form submission with jquery so far:
$(document).ready(function(){
$(".linkedinForm").submit(function( event ) {
var formData = {
'id' : $('input[name=id]').val(),
'name' : $('input[name=name]').val(),
'email' : $('input[name=email']).val(),
'emailsecondary' : $('input[name=emailsecondary]').val(),
'url' : $('input[name=url]').val()
};
jsRoutes.controllers.Application.createLinkedin.ajax({
type :'POST',
data : formData
})
.done(function(data) {
console.log(data);
});
.fail(function(data) {
console.log(data);
});
event.preventDefault();
};
});
This is an issue with the browser's behavior on form submission, not any of Play's doing. You can get around it by changing the behavior of the form when the user clicks submit.
You will first want to attach a listener to the form's submission. You can use jQuery for this. Then, in that handler, post the data yourself and call .preventDefault() on the event. Since your javascript is now in charge of the POST, you can process the data yourself and update your page's HTML rather than reloading the page.
What you need is use ajax to submit a form, check this: Submitting HTML form using Jquery AJAX
In your case, you can get the form object via var form = $(this), and then start a ajax with data from the form by form.serialize()
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
alert('ok');
}
});
In order to accomplish this task, i had to use play's javascriptRouting
This question's answer helped a lot.
I'm not experienced with jquery so writing that correctly was difficult. For those that find this, here is my final jquery that worked:
$(document).ready(function(){
$("div#results").on("click", ".hideme", function(event) {
var $form = $(this).closest("form");
var id = $form.find("input[name='id']").val();
var name = $form.find("input[name='name']").val();
var email = $form.find("input[name='email']").val();
var emailsecondary = $form.find("input[name='emailsecondary']").val();
var url = $form.find("input[name='url']").val();
$.ajax(jsRoutes.controllers.Application.createLinkedin(id, name, email, emailsecondary, url))
.done(function(data) {
console.log(data);
$form.closest('li.item').slideUp()
})
.fail(function(data) {
console.log(data);
});
});
});
Note that my submit button was class="hideme", the div that gets filled with results from the DB was div#results and the forms were contained within li's that were class="item". So what this jquery is doing is attaching a listener to the static div that is always there:
<div id="results">
It waits for an element with class="hideme" to get clicked. When it gets clicked it grabs the data from the closest form element then sends that data to my controller via ajax. If the send is successful, it takes that form, looks for the closest li and does a .slideUp()
Hope this helps
I am creating a 9-step proposal form using django form wizard. All is well, until I wanted to use ajax to load the next step. I'm having a hard time configuring the ajax call in jquery because django forms don't have action url included in the form tag. Why is it like that anyway? A win-win situation for me is to have a loading screen for next step and if there is an upload file process in the step, show percentage loading for the uploaded file. Thanks!
I'm using this code, and It's working for me. I don't put any action inside the form, as you can see. I use the jquery 'on' function when the form is submited because all the form is reloading and changing inside the div#creation. Then the ajax url must be the one that displays your form.
In my case, the first step of the form is rendered also through ajax with get, when I click on some button. That's why there's isn't any form in the div at first. (I'm using bootstrap's modals).
<div id="creation">
<!-- form to be display through ajax -->
</div>
The template that is reload in the FormWizard Class in views is the following html:
template_name = 'creation_form.html'
Code por creation_form.html:
<form id="creation-form" action="#" method="post">
{% csrf_token %}
<table>
{{ wizard.management_form }}
{{ wizard.form }}
</table>
{% if wizard.steps.prev %}
<button name="wizard_goto_step" class="btn btn-primary" aria- hidden="true" type="submit" value="{{ wizard.steps.first}}">First</button>
<button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}">Previous</button>
{% endif %}
<input id="create-submit" class="btn btn-primary" type="submit" value="submit" />
</form>
Here is my ajax call:
$('#creation').on('submit', '#creation-form' , function(e){
e.preventDefault();
var fd = new FormData($('#creation-form').get(0));
$.ajax({
url: '/create/',
data: fd,
type: "POST",
success: function(data){
$('#creation').html(data);
},
processData: false,
contentType: false
});
});
Hope this is a proper response for your answer.
I'm currently having a hard time going to the first/previous step, if you figure it out please tell me how.
This is what you're looking for?
Here's what I did-
Created separate model forms for each step.This helped in easy server side validation.
Made ajax calls for each step to validate form on the server side and on success render the next form and hide the previous form.
On submit of last form async POST the data for persistence and processing and render the response asynchronously below the last step.
Also maintained a progress bar for each step.
This is how I created my async form wizard using django forms. Not neat but works! :)
I have a post form, I want the submit to be done in an AJAX way but I don't want the page URL to change.
For example:
<form action="/countries/change_country" data-ajax="true" method="post">
<select name="country_code">
<option value="FR" selected="selected">France</option>
<option value="DE">Germany</option>
</select>
<input type="submit" value="change country" />
</form>
When I click in the change country button the form is sent through AJAX what is nice but the page URL is changed to /countries/change_country what is not nice because this URL doesn't exist in my server which is very picky with HTTP verbs.
I know it is possible to change this default behavior for the whole application but I would like to deactivate the changePage() only for this form.
Submit the form through Javascript/jQuery instead.
First: Disable the default submit-behaviour
$('#form').on('submit', function (e) {
if (e.preventDefault) e.preventDefault();
return false;
});
Second: Serialize the form data with jQuery
var serializedFormData = $('#form').serialize();
Third: Post your form with $.ajax();
$.ajax({
url: '/countries/change_country',
type: 'POST',
data: serializedFormData
});