Develop Reference

How to update each div element with Ajax function using JQuery

I am new to JQuery and I have an Ajax function to update the select options. The Ajax is working fine on my first Div. But when I clone the div and run the Ajax call it again update the first Div element only not the element of cloned one. I new to closet... etc. Please help me so when I call the Ajax it will update the cloned div(current div) element.
this is my ajax function:
function acct_dbox() {
{#var that = $(this)#}
$.ajax(
{
type: "GET",
url: "/waccounts/getaccounts",
dataType: "json",
data: {
{#'acctlevel': $(this).val(),#}
'csrfmiddlewaretoken': '{{csrf_token}}'
},
success: function (data) {
$.each(data, function(index, item) {
if (item.length > 0){
console.log('test', item[0].AcctCode);
console.log('test', item[0].AcctName);
{#$("#id_accountcode option").remove();#}
$.each(item, function(index1, item1) {
console.log(item1.id);
console.log(item1.AcctCode);
console.log(item1.AcctName);
$("#id_accountcode").append($('<option/>',{
{#$("#id_accountcode").append($('<option/>', {#}
value: item1.AcctCode,
text: item1.AcctName
}));
})
$( document ).ready(function() {
acct_dbox();
var original_external_int_div = document.getElementById('account_list');
//Div to Clone
var clone = original_external_int_div.cloneNode(true); // "deep" clone
original_external_int_div.parentNode.append(clone);
acct_dbox(); # (it is updating the first div again - not cloned one)
});
My html is:
{% extends 'wstore_base_generic.html' %}
{% block content %}
<form action="" method="post" class="w-auto" id="new_trans_form"
xmlns:width="http://www.w3.org/1999/xhtml">
<div class="row mt-1 mb-4" >
<div class="col-md-12">
<div>
<div class="headerctr">
<h3>JV</h3>
<!-- <div> -->
<!-- <h3 > -->
<!-- </h3> -->
</div>
<div class="card-body" >
{% csrf_token %}
<div 38rem class="row style= width:18">
<div class="col">
<label>Transaction Date</label>
<input type="date" class="form-control" name="
{{form.fh_dt.name}}" value="{{current_date}}"
readonly>
{% if form.fh_dt.errors %}
{% for error in form.fh_dt.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col-sm" >
<label>Transaction Number</label>
<input type="number" class="form-control" name="
{{form.fh_no.name}}"
value="{{transaction_number}}" readonly>
{% if form.fh_no.errors %}
{% for error in form.fh_no.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<input type="hidden" class="form-control" name="
{{form.fh_type.name}}" required readonly
value="JV">
{% if form.fh_type.errors %}
{% for error in form.fh_type.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
<label>Transaction Ref.</label>
<input type="text" class="form-control" name="
{{form.fh_ref.name}}" required
value="Ref.">
{% if form.fh_ref.errors %}
{% for error in form.fh_ref.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
<div class="row mt-0">
<div class="col">
<label>Transaction Code</label>
<input type="text" class="form-control" name="
{{form.fh_code.name}}" required readonly
value="JV">
{% if form.fh_code.errors %}
{% for error in form.fh_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction Detail</label>
<input type="text" class="form-control" name="
{{form.fh_detail.name}}" required
value="Detail">
{% if form.fh_detail.errors %}
{% for error in form.fh_detail.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction UserCode</label>
<input type="text" class="form-control" name="
{{form.fh_user_code.name}}" required
value="{% if form.fh_user_code.value %}
{{form.fh_user_code.value}}{% else %}{{request.user.username}}{% endif %}">
{% if form.fh_user_code.errors %}
{% for error in fh_user_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-0">
<div class="card shadow">
<div class="card-header text-center">
<h3 class="headerctr">
Item Details
</h3>
</div>
<div class="card-body">
{% csrf_token %}
<table class="">
<thead class="thead-light">
<tr>
<th>Code</th>
<th class = "text-danger">Account</th>
<th class = "text-danger">Debits</th>
<th class="text-success">Credits</th>
<th class = "text-warning">Description</th>
<th class = "text-warning">Tax</th>
</tr>
</thead>
<tbody id="account_list" style="margin-bottom: 0">
<tr>
<td>
<select name="acct_code" class="form-control
fh_code" id="id_accountcode">
<option value="SELECT"
selected="selected">---SELECT---</option>
required></select>
</td>
<td>
<input type="text" name="acct_name"
class="form-control fh_name"
placeholder="Acct Code" readonly>
</td>
<td>
<input type="number" name="acct_debit"
class="form-control fh_debit"
placeholder=" " >
</td>
<td>
<input type="number" class="form-control
fh_credit" name="acct_credit"
placeholder=" ">
</td>
<td>
<input type="text" class="form-control
fh_detail" placeholder="Description"
name="acct_descript" >
</td>
<td>
<input type="number" class="form-control
fh_tax" name="acct_tax"
placeholder=" ">
</td>
<td>
<div class="btn-group">
<button type="button" id="btnadd"
class="btn add_new_row" title="Add">
<i class="fas fa-plus-square"></i>
</button>
<button type="button" class="btn
delete_row" title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class = "text-success">Total Quantity:
<strong id="final_quantity">0</strong></td>
<td></td>
<td class = "text-success"> Total Price: <strong
id="final_price">0</strong></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12 mb-1">
<div class="btn-group">
<a href="{% url 'transactions' transtype='INV'
posted='ALL' %}" class="btn btn-info mr-2" >Cancel</a>
<input type="submit" class="btn btn-info submit_form"
name="save_next" value="Save&Print">
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}

{#$("#id_accountcode").append($('<option/>', {#}
value: item1.AcctCode,
text: item1.AcctName
I made a change like:
$("table tbody select[name=acct_code]").append($('<option/>',
the all div selects get updated with option -Thanks to swathi.

Use a button in a forms to append variables to an url which has variables from another forms

I have a site with a search bar and some checkboxes, these add variables to the url:
term = "test"
variable1=1
url/search?term=test&variable1=1
Then, after that search is complete I have another forms to the left of the page with some other checkboxes and another search button. I want that button, when clicked, to run another search with the old search term and variables but with the new ones added
othervariable=1
url/search?term=test&variable1=1&othervariable=1
I have tried some suggestions from other threads but the second search button appears to only add the variable to the url
url/othervariable=1
which does not work for this
first forms:
<form id="search_form" method="get" name="search">
<div class="input-group row" style="width: 40vw ">
{% if termo %}
<input style="border-radius: 0; background-color: rgba(255,255,255,0.8);" type="text" maxlength="1800" id="input_text" name="termo_busca" class="form-control" value="{{ termo }}"/>
{% else %}
<input style="border-radius: 0; background-color: rgba(255,255,255,0.8);" type="text" name="termo_busca" class="form-control" placeholder="Digite o termo que deseja pesquisar"/>
{% endif %}
<div class="input-group-btn">
<button style="background-color: #4A9FFF; border-color: #4A9FFF; cursor: pointer; border-radius: 0; padding: 0.85rem 1.05rem; font-size: 1.5rem; line-height: 1.25;" onclick="changeFlag()" type="submit" class="btn btn-primary btn-md" value="Buscar">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="input-group row" style="width: 44vw">
<!-- <label style="font-size: 12px;">Cortes :</label> -->
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="recursal" value="1" {% if "recursal" in courts %} checked {% else %} {% endif %}> Recursal
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="constitucional" value="1" {% if "constitucional" in courts %} checked {% else %} {% endif %} > Constitucional
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="reclamacao" value="1" {% if "reclamacao" in courts %} checked {% else %} {% endif %} > Reclamacao
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="habeas_corpus" value="1" {% if "habeas_corpus" in courts %} checked {% else %} {% endif %} > Habeas Corpus
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="mandado_seguranca" value="1" {% if "mandado_seguranca" in courts %} checked {% else %} {% endif %} > Mandado Seguranca
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="penal_original" value="1" {% if "penal_original" in courts %} checked {% else %} {% endif %} > Penal Original
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="outros" value="1" {% if "outros" in courts %} checked {% else %} {% endif %} > Outros
</label>
<!-- <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="todos" value="1" {% if todos == None %} {% else %} checked {% endif %} checked> Todos
</label> -->
</div>
{% if total %}
<strong style="font-size: 13px;"></strong>
{% elif termo %}
<strong style="font-size: 13px;">Não foram encontradas decisões relacionadas ao termo {{ termo }}.</strong> <br/><br/>
{% endif %}
</form>
second forms:
<form id="diogo_form" method="get" name="search" ; background-color: rgba(255,255,255,0.0);">
<div class="dropdown" data-control="checkbox-dropdown">
<label class="dropdown-option">
<input type="checkbox" name="selecone" value="1" {% if "selecone" in decision_results %} checked {% else %} {% endif %}/>
selecone
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Two" value="1" {% if "Selection Two" in decision_results %} checked {% else %} {% endif %}/>
Selection Two
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Three" value="1" {% if "Selection Three" in decision_results %} checked {% else %} {% endif %}/>
Selection Three
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Four" value="1" {% if "Selection Four" in decision_results %} checked {% else %} {% endif %}/>
Selection Four
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Five" value="1" {% if "Selection Five" in decision_results %} checked {% else %} {% endif %}/>
Selection Five
</label>
</div>
<div class="input-group-btn">
<button style="background-color: #4A9FFF; border-color: #4A9FFF; cursor: pointer; border-radius: 0; padding: 0.85rem 1.05rem; font-size: 1.5rem; line-height: 1.25;" onclick="changeFlag()" type="submit" class="btn btn-primary btn-md" value="Buscar">
<i class="fa fa-search"></i>
</button>
</div>
</form>

The form will only submit the fields that belong to it (i.e. inside the <form>). If you want to repeat the search with the new form inputs added, you can add an <input type="hidden"> with the value that you get from the GET request to the side form (second one).
So let's say you get the termo_busca from the URL, then you can add:
<input type="hidden" value="{{termo}}" name="termo_busca" />
to your second form. And so on, for the other search parameters you want to repeat.
You should only add an <input type="hidden"> for each parameter you want to repeat in the second search as-is (i.e. the user won't modify it).
If you want the user to be able to modify it in the diogo_form, then you should add the corresponding input with the correct type (e.g. checkbox).
So if you want to repeat the recursal checkbox in the second form, you would add this line from the first form:
<input type="checkbox" name="recursal" value="1" {% if "recursal" in params %} checked {% endif %}> Recursal
Note that you would check for recursal in the GET parameters.
Also, note that I removed the {% else %} since it wasn't doing anything there.
UPDATE:
Like I said, the form will only submit the values that it contains. If you don't want to repeat the checkboxes then you need a javascript solution that will "add" these values to your second form on submit or will mirror them.
Here is a solution using jQuery and adding them before you submit:
$('#diogo_form').on('submit', function(e) {
e.preventDefault();
let recursal_val = $('#search_form input[name="recursal"]').is(':checked') ? 1 : 0;
$('#diogo_form').append(`<input type="hidden" name="recursal" value="${recursal_val}" />`);
// ... do the same for all other values you want to copy
// you could potentially also copy them all if you want them all
// $('#search_form input[type="checkbox"]').each(function(i, e) {
// let name = $(e).attr('name');
// let checked = $(e).is(':checked');
// if(checked) {
// // add to diogo_form (see above)
// }
// });
$('#diogo_form').submit();
});

Rating star PHP/JS

I need to implement a rating star in my project but my js don't work. Can anyone help me?
Javascript code:
let $star_rating = $('.list-group-item .fa');
let SetRatingStar = function() {
return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
return $(this).removeClass('fa-star-o').addClass('fa-star');
} else {
return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};
$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
SetRatingStar();
$(document).ready(function() {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is my view:
<div class="d-inline-flex">
<input type="checkbox" id="checkAll" onclick="toggle(this);">
<p class="mt-3 mb-0 ml-1">Tous vus</p>
</div>
{% for episode in episodes %}
<li class="list-group-item bgt">
{% if episode.hasSeen == 0 %}
<input type="checkbox" id="{{ episode.id }}" name="hasSeen" onclick="processForm(this)">
{% else %}
<input type="checkbox" id="{{ episode.id }}" name="hasSeen" checked="checked" onclick="processForm(this)">
{% endif %}
{{ "E%02d" | format (episode.number) }} - {{ episode.title }}
{% for i in 1..5 %}
<span id ="starRating" class="fa fa-star-o" data-rating="{{ i }}" ></span>
<input type="hidden" name="whatever1" class="rating-value" value="{{ episode.note }}">
{% endfor %}
</li>
{% endfor %}

Chosen.js not return selected options in php

I installed on my dev chosen.js library. My php code :
$this->form_add_offer = new Form\Form(
new Form\Field\Text('name', '', true),
new Form\Field\Select('orders','',true, $a_offer_group)
);
if ($this->getRequest()->isPostMethod() && $this->form_add_offer->bind($_POST)) {
print_r($this->form_add_offer->orders->getValue())
}
My view :
<form id="form_add_offer" action="{{ 'route'|url_route }}" method="post" >
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label" for="" style="display: block;font-size: 100%;margin: 0;width: 12em;padding: 5px;">Nom : </label>
<input type="text" id="{{ form_add_offer.name.name }}" name="{{ form_add_offer.name.name }}" value="{{ form_add_offer.name.value }}" required="required" placeholder="Nom" class="form-control" style="display: block;font-size: 100%;margin: 0;padding-left: 5px;"/>
</div>
<div class="form-group">
<label class="control-label" for="{{ form_add_offer.orders.name }}" >Type : </label>
<div>
<select data-placeholder=""
style="width:350px;"
class="chosen-select form-control {{ form_add_offer.orders.name }}" multiple
tabindex="6"
id="{{ form_add_offer.orders.name }}">
{% for key,optogroup in form_add_offer.orders.choices %}
<optgroup label="{{ key }}">
{% for k,v in optogroup %}
<option value="{{ key }}"
{% if k == form_add_offer.orders.value %}selected="selected"{% endif %}>
{{ v }}
</option>
{% endfor %}
</optgroup>
{% endfor %}
</select>
</div>
</div>
The .js inside the view :
<script>
$(document).ready(function() {
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
console.log(config);
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
</script>
The multiselect box works fine, the problem is when I submit the form, for example if I do $this->form_add_offer->name->getValue() I get the value from input text name. If I do $this->form_add_offer->orders->getValue() so I get null array, but the multiple select box in the view is not empty. Can you help me please ? Thx in advance and sorry for my english

How to make first radio button selected by default in a list built with a for in loop using twig?

I'm using twig to make a list of radio buttons with Database values. It's something like:
{% for usermembershiptype in usermembershiptypes %}
<div class="ms_type noline">
<p>{{ usermembershiptype.description}}</p>
<label class="ms_price ms_odd">${{ usermembershiptype.price }}<span>/year</span><input name="membership-type" type="radio" value="{{ usermembershiptype.id }}"/></label>
<div class="clearfix"></div>
</div>
{% endfor %}
I want the first radio button to be selected by default but when using a for in loop, I'm not sure about how to refer to the first radio button.
Any advices? Javascript and Jquery Solutions are also welcome.

You can use the loop.index and if condition like
{% for usermembershiptype in usermembershiptypes %}
<div class="ms_type noline">
<p>{{ usermembershiptype.description}}</p>
<label class="ms_price ms_odd">${{ usermembershiptype.price }}<span>/year</span>
{% if loop.index == 1 %}
<input name="membership-type" type="radio" value="{{ usermembershiptype.id }}" checked/>
{% else %}
<input name="membership-type" type="radio" value="{{ usermembershiptype.id }}"/>
{% endif %}
</label>
<div class="clearfix"></div>
</div>
{% endfor %}
Note: not tested
Using loop.first
{% for usermembershiptype in usermembershiptypes %}
<div class="ms_type noline">
<p>{{ usermembershiptype.description}}</p>
<label class="ms_price ms_odd">${{ usermembershiptype.price }}<span>/year</span>
{% if loop.first %}
<input name="membership-type" type="radio" value="{{ usermembershiptype.id }}" checked/>
{% else %}
<input name="membership-type" type="radio" value="{{ usermembershiptype.id }}"/>
{% endif %}
</label>
<div class="clearfix"></div>
</div>
{% endfor %}