We Keep Coding

Django dynamic formset with Jquery Ui autocomplete

Hi there I am fairly new to django and need to add dynamic formsets with autocomplete functions for every from. I am not entirely sure what I am doing wrong i have tried a few approaches and this is my most recent!
I have function called AutoproductComplete which receives the id of the current formset form input that i want to add the auto complete to. It doesnt work, no errors, not sure why. I also did it after the after method so assume the form has been added to the DOM?'
'html'
<form class="form-horizontal" method="POST" action="">
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<div class="row form-row spacer">
<div class="input-group" style="padding:5px;">
{{form.productName}}
{{form.orderQuantity}}
<div class="input-group-append">
<button class="btn btn-success add-form-row"
style="margin:5px;">+</button>
</div>
</div>
</div>
{% endfor %}
<br>
<div class="row spacer">
<div class="col-12 offset-9">
<button type="submit" class="btn btn-block btn-
dark">Create Order</button>
</div>
</div>
</form>
JavaScript
'''
function AutoproductComplete(id){
const products = [];
console.log("This is working")
console.log(id)
{% for instance in products %}
products.push("{{instance.product_name}}")
{% endfor %}
$(id).autocomplete({
classes: {"ui-autocomplete-input": "highlight"},
source: products,
minLength: 1,
});
};
AutoproductComplete("id_form-0-productName" )
function cloneMore(selector, prefix) {
var newElement = $(selector).clone(true);
var id = ""
var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
`enter code here`newElement.find(
':input:not([type=button]):not([type=submit]):not([type=reset])')
.each(function() {
if ($(this).attr('name')){
var name = $(this).attr('name').replace('-' + (total-1) + '-', '-
' + total + '-');
id = 'id_' + name;
$(this).attr({'name': name, 'id':
id}).val('').removeAttr('checked');
}
});
total++;
$('#id_' + prefix + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
var conditionRow = $('.form-row:not(:last)');
conditionRow.find('.btn.add-form-row')
.removeClass('btn-success').addClass('btn-danger')
.removeClass('add-form-row').addClass('remove-form-row')
.html('<span class="glyphicon glyphicon-minus" aria-hidden="true" > -
</span>')
AutoproductComplete(id)
return false;
}
$(document).on('click', '.add-form-row', function(e){
e.preventDefault();
cloneMore('.form-row:last', 'form');
return false;
});
'''

You can use DAL
django-autocomplete-light
As it says, its quite lightweight and IMHO easily and highly configurable.
You can find the docs here:
https://django-autocomplete-light.readthedocs.io/en/master/

Dynamically display list of checked checkboxes values js/jquery

I would like to display dynamically a list of the chosen options using javascript or jQuery when the user changes his options.
PS: I'm using Django + Python to generate the options and bootstrap to style them.
Here is my code:
{% for option in options %}
<div class="input-group" style="margin-bottom: 7px;">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="checks[]" aria-label="Radio button for following text input" class="option_choice" class="ipad_pro" value="{{ option.name }}">
</div>
</div>
<input style="background-color: #fff;" type="text" class="form-control" disabled=True value="{{ option.name }} {{ option.price }}€" aria-label="Text input with radio button">
</div>
{% endfor %}
<ul id='options_display'></ul>
Here's what I've attempted:
var getChecked= function() {
var n = $("input:checked");
var options_display = $("#options_list")
console.log(n)
if (n.length != 0) {
$.each(n, function(index, value) {
options_display.append("<li>" + value.defaultValue + "</li>")
});
}
else {
options_display.html("<h3 class'text-center'>No Options</h3>")
}
};
getChecked()
$( "input[type=checkbox]" ).on( "click", getChecked);
The problem with that is that it doesn't reset the content of the <ul> which means that I get elements twice when I select a new one.
Please help me if you know the answer to my problem.

You can empty options_display on each click like
$("#options_list").empty();
before the condition.

Trigger the form submit button from $().html()

I have such a template when the user clicks the edit glyphicon, it will prompt a form for further editing:
<div class="post-menu pull-left">
<a class="editCommentLink" href="#">
<span id="{{ comment.id }}" class="glyphicon glyphicon-edit" aria-hidden="true">edit </span>
</a> &nbsp
<a class="delCommentLink" id="{{ comment.id }}" href="#">
<span id="{{ comment.id }}" class="glyphicon glyphicon-trash" aria-hidden="true">delete</span>
</a>
</div>
I employed ajax to send the get request and update the content with $commentNew.html(commentEditForm);
<script>
$(document).ready(function(){$(".editCommentLink").on("click", function(e) {
e.preventDefault()
var comment_id= $(e.target).attr("id")
// Retrieve the top node of comment-right
var $commentRight= $(e.target).closest(".comment-right")
$.ajax({
type: "GET",
url: `/ article/comment/edit /${comment_id}`,
success: function(data){
var ret=JSON.parse(data)
var body=ret['body']
var commentEditForm= `
<form action="#" method="post" > {% csrf_token % }
< div class="form-group" >
< textarea class="form-control" name="comment" id="editComment${comment_id}" >${body} < /textarea >
< button class="btn btn-primary" id="editSubmitBtn" > Save Edits < /button >
<a href="#" > cancel < /a >
< / div >
< /form >
`
var $commentNew= $commentRight.find(".post-text");
$commentNew.html(commentEditForm);
}, // success
});//end of ajax
})//end edit click
</script>
However, there's no feedbacks when I am triggering button id="editCommentBtn" to submit the form data,
});//end of ajax
})//end edit click
$(document).ready(function (e) {
//still in edit click event
$("#editCommentBtn").on("click", function (e) {
e.preventDefault();
alert('button clicked');
...
});//submit click event
})
I experiment to solve the problem, what confused me is that if I change $(".editCommentBtn") to its grandparent $(".post-text"), the browser alert me ('button clicked'),
I attempted to break the bulk of var commentEditForm= to single elements like:
$newForm = $('<form action="#" method="post" > {% csrf_token % } < /form >');
$newFormGroup = $('< div class="form - group" >< / div >');
$newText = $('< textarea class="form-control" name="comment" id="editComment${comment_id}" >${body} < /textarea >');
$newSubmit = $('< button class="btn btn-primary" id="editCommentBtn" > Save Edits < /button >')
$(.post-text).append($newForm);
$newForm.append($newFormGroup);
$newFormGroup.append($newText);
$newText.after($newSubmit);
There are many manual labors,
How to solve the problem elegantly?

I don't see element with Id #editCommentBtn in your unrendered code. But test this:
$(document).on("click","#editCommentBtn",function (e) {
e.preventDefault();
alert('button clicked');
});
With this way all elements that you inject them to your document (and have this id), will respond to this click function.

Using Ajax change state of a clicked button

I am building a page in a Django project which has multiple comments each of which can be liked/unliked with a button next to the text. So the page has multiple like/unlike buttons.
The buttons display fine when the page is loaded, and I can use Ajax to send data to Django and update my database which works fine, and I can return data back to the Ajax success function.
What I can't work out is - how can I update the status of the actual button which was clicked. I am able to update the status of all of the buttons together on the page as per the code below (pointless I know!), but can't see how I reference the clicked button. I've tried passing and then returning the button id which I can display in an alert, but not sure if this is what I should be using or where I go from here?
HTML Template
{% for comments in comments_page %}
<p>
<b>{{ comments.created_at }} ({{ comments.user_type }})</b>
{% if comments.comment_liked is False %}
<button class="comment btn btn-primary btn-xs"
id={{ forloop.counter0 }}
data-surveyid="{{ comments.id }}"
data-commentliked="True"
type="button">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
{% else %}
<button class="comment btn btn-success btn-xs"
id={{ forloop.counter0 }}
data-surveyid="{{ comments.id }}"
data-commentliked="False"
type="button">
<span class="glyphicon glyphicon-star"></span>
</button>
{% endif %}
</p>
<p>{{ comments.comments }}</p>
<br>
{% endfor %}
Javascript / Ajax
{% block javascript %}
<script type="text/javascript">
$(function() {
$('.comment').click(function() {
var surveyid, commentliked, buttonid;
surveyid = $(this).attr('data-surveyid');
commentliked = $(this).attr('data-commentliked');
buttonid = $(this).attr('id');
$.ajax({
url: '/evaluations/validate_username/',
data: {
'surveyid': surveyid,
'commentliked': commentliked,
'buttonid': buttonid
},
dataType: 'json',
type: 'get',
success: function (data) {
alert(data.buttonid);
$(".comment").removeClass('comment btn btn-primary btn-xs').addClass('comment btn btn-success btn-xs');
}
});
});
});
</script>
{% endblock %}

Just target the clicked button in your success function:
{% block javascript %}
<script type="text/javascript">
$(function() {
$('.comment').click(function() {
// the button instance that was clicked
var clickedBtn = $(this);
var surveyid, commentliked, buttonid;
// also, you can use data-* to get the data attributes
// surveyid = clickedBtn.attr('data-surveyid');
// commentliked = clickedBtn.attr('data-commentliked');
surveyid = clickedBtn.data('surveyid');
commentliked = clickedBtn.data('commentliked');
buttonid = clickedBtn.attr('id');
$.ajax({
url: '/evaluations/validate_username/',
data: {
'surveyid': surveyid,
'commentliked': commentliked,
'buttonid': buttonid
},
dataType: 'json',
type: 'get',
success: function (data) {
alert(data.buttonid);
clickedBtn.removeClass('comment btn btn-primary btn-xs')
.addClass('comment btn btn-success btn-xs');
}
});
});
});
</script>
{% endblock %}

How to always get new checkboxes array, every time a different button is clicked

I'm developing an app about quizzes.
IMG1: [The added comments in this picture applies for the IMG2 too]
IMG2:
Description:
[IMG1] When one or more .js-answer-check checkbox are checked, I save the values in a js array. Then, when the #save-response button is clicked, the respective array is send to the server, to be saved in the db.
[IMG2] Then I click another question of the quiz, identified by .quiz-questions class, and when one or more .js-answer-check checkboxes of this new question are checked, the values are saved in the same js array.
The problem is that the previous checkboxes values, from the previous answers, are still present in the array, due to that answers.push(answerID).
How can I only grab the values of the respective question answers in the array each time a .quiz-questions button is clicked?
Expected values:
clicking the checkbox with label "2" in the first question => array should be [ 2 ] (the data-id="2" attribute in that checkbox)
clicking the checkboxes with label "1+3" and "8/2" in the second question => array should be [4, 5] as those checkboxes have data-id="4" and data-id="5" attributes.
Actual result: [2, 4, 5]
I tried out this code:
//if one|more options are checked...
var answers = [];
$(document).on('click', '.js-answer-check', function(){
if ($(this).is(':checked')){
var answerID = $(this).data('id');
answers.push(answerID);
} else {
var removeItem = $(this).data('id');
answers = $.grep(answers, function(value){
return value != removeItem;
});
}
});
$('#save-response').on('click', function(e){
e.preventDefault();
$.ajax({
method: 'POST',
url: Routing.generate('save_answer'),
data: { answers: answers },
success: function(resp) {
if (resp.success) {
var answersBack = resp.answers;
for (var ans in answersBack) {
console.log('answerID = ', answersBack[ans]);
}
}
//answers = [];
}
});
});
And I thought that if I do answers = [] will reset the initial array, but it didn't.
Any help is welcomed. Thanks.
LATER EDIT
<div class="row margin-top-ten">
<div class="col-6">
<input type="hidden" id="quiz-id" data-quiz="{{ quiz.id }}"/>
<div class="row question-content">{# the content (question-text + checkboxes) is coming from an AJAX request because I need to present everytime a new content based on `quiz-questions` buttons #}
</div>
</div>
</row>
<div class="row margin-top-ten">
<div class="col-12">
<button class="btn btn-primary btn-sm" type="button" id="save-response">Salveaza</button>
</div>
</div>
<div class="row margin-top-fifty">
<div class="col-12">
{% set i = 1 %}
<p>Navigator intrebari:</p>
{% for question in quiz.questions %}
<a href="" class="btn btn-info btn-sm quiz-question"
data-id="{{ question.id }}" data-quiz="{{ quiz.id }}">
{{ i }}
</a>
{% set i = i + 1 %}
{% endfor %}
</div>
</div>
The AJAX request for bringing new content for each quiz-questions buttons is:
<div class="col-12">
<div class="row">
<div class="col-12 question-text" data-question="{{ question.id }}">{{ question.content|raw }}</div>
</div>
<div class="row">
{% for answer in question.answers %}
<div class="col-12 question-answers">
<span style="display: inline-block">
<label for="">
<input type="checkbox" name="user-responses[]" class="js-answer-check" data-question="{{ question.id }}" data-id="{{ answer.id }}">
</label>
</span>
<span style="display:inline-block">{{ answer.answer|raw }}</span>
</div>
{% endfor %}
</div>
</div>
The save_answer php functionality is just returning the sent-data, for debug purposes. Nothing fancy.