Ajax in Django is creating duplicate elements - javascript

I have a form which when submitted creates a graph using Plotly. I am trying to use Ajax to submit the form without page refresh. While the form is submitted successfully, the form div is duplicated on the screen. I am not sure how to rectify this problem. I am using the Django web framework. Here is my code.
template
<form action="{% url 'home' %}" method='post' id='year-form'>
{% csrf_token %}
<select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
name="year">
<option selected>Select Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<div class="d-grid gap-2">
<button class="btn btn-primary btn-lg" type="submit">Button</button>
</div>
</form>
<div id="message"></div>
<div class="graph center" id='graph'>
{% if graph %}
{{ graph.0|safe }}
{% else %}
<p>No graph was provided.</p>
{% endif %}
</div>
ajax jQuery
<script type="text/javascript">
var frm = $('#year-form');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: $(this).serialize(),
success: function (data) {
$("#graph").html(data);
},
error: function (data) {
$("#message").html("Something went wrong!");
}
});
return false;
});
</script>
This is what the page looks like before the form submit
this is what it looks like after the form is submitted
I think I am not feeding the correct data in the success part of the Ajax call.

You should use a different endpoint/view to return the graph template. At the moment you are getting the current page and loading it again but with a graph this time.
Your home template should be:
<form action="{% url 'home' %}" method='post' id='year-form'>
{% csrf_token %}
<select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
name="year">
<option selected>Select Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<div class="d-grid gap-2">
<button class="btn btn-primary btn-lg" type="submit">Button</button>
</div>
</form>
<div id="message"></div>
<div class="graph center" id='graph'>
<p>No graph was provided.</p>
</div>
Then you have a second template used at a different view which you get via ajax to get the graph like so:
{% if graph %}
{{ graph.0|safe }}
{% else %}
<p>No graph was provided.</p>
{% endif %}

Related

Loading Screen for a Form

I am trying to make a loading screen when submitting a form. When I submit a form the page starts to load until the backend responds by downloading an excel file. The idea is to have the effect of "load screen" only until the file manages to download.
html:
<form action="{% url 'downloadStatusPickingCustomerByCollection' %}" method="POST">{% csrf_token %}
<div class="pnl-collection">
<div>
<div class="tituloPnl">
<h3>Estado Ordenes de Venta por Colección</h3>
</div>
<div class="btnExport">
<button onclick="loadDisplay()" class="btn btn-light" type="submit">Exportar</button>
</div>
</div>
<div class="filtro">
<div>
<div class="title-select"><span>Colección</span></div>
</div>
<div>
<select class="form-select form-select-sm form-down-report" name="collection-StatusCustomer-name" id="" required>
<option value="">- SELECCIONE COLECCIÓN -</option>
{% if collections %}
{% for collection in collections%}
<option value="{{collection.Name}}">{{collection.Name}}</option>
{% endfor %}
{% endif %}
</select>
</div>
</div>
</div>
</form>
javascript:
function loadDisplay() {
if (document.querySelector(".form-down-report").value != "") {
document.getElementById("preloader-camion").style.display = 'block';
jquery(window).load(
function () {
document.getElementById("preloader-camion").style.display = 'none';
});
}
}
I have the bakcend developed in django so in the form route you can see a django "url tag".

How can I trigger the removal button when I create a new one by a clone method in jQuery?

The mission is when I click on the plus button to add a new search input it has to add a new field with a plus button and removal button (it calls times-btn).
Everything works fine but when I click on the removal button the first one has created is removed only but when I click on any button else it doesn't work. so, How can I trigger the removal button that?
This screenshot explains the intended task.
search.html
<!-- Search formsets -->
<div class="search-field">
<h2 class="show"></h2>
<form method="get" id="main_search">
<div id="first_search_group" class="form-group row search_repeated search_group">
<div class="col-lg-2 d-inline p-2 word_repeated">
<label style="font-size: large; padding-top: 5px">Sentence or Word</label>
</div>
<!-- Filter -->
<div class="col-lg-2 d-inline p-2">
<select name="formsets_option" id="formsets_option" class="form-control">
{% if formsets_option == 'contains' %}
<option id="contains" value="contains" selected>contains</option>
{% else %}
<option id="contains" value="contains">contains</option>
{% endif %}
{% if formsets_option == 'start_with' %}
<option id="start_with" value="start_with" selected>start with</option>
{% else %}
<option id="start_with" value="start_with">start with</option>
{% endif %}
{% if formsets_option == 'is' %}
<option id="is" value="is" selected>is</option>
{% else %}
<option id="is" value="is">is</option>
{% endif %}
{% if formsets_option == 'end_with' %}
<option id="end_with" value="end_with" selected>end with</option>
{% else %}
<option id="end_with" value="end_with">end with</option>
{% endif %}
</select>
</div>
<div class="col-lg-4 d-inline p-2">
<input id="search_btn" type="text" class="form-control"
onkeyup="if (this.value != ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}"
placeholder="search" name="query" value="{{ request.GET.query }}">
</div>
<div class="col-lg-2 d-inline p-2">
<select name="verb_option" id="verb_option" class="form-control">
{% if verb_option == '' %}
<option value="" selected>Any POS</option>
{% else %}
<option value="">Any POS</option>
{% endif %}
{% if verb_option == 'Adj' %}
<option value="Adj" selected>Adjective</option>
{% else %}
<option value="Adj">Adjective</option>
{% endif %}
{% if verb_option == 'Adv' %}
<option value="Adv" selected>Adverb</option>
{% else %}
<option value="Adv">Adverb</option>
{% endif %}
{% if verb_option == 'Asp' %}
<option value="Asp" selected>Aspect Marker</option>
{% else %}
<option value="Asp">Aspect Marker</option>
{% endif %}
{% if verb_option == 'Cl' %}
<option value="Cl" selected>Classifier</option>
{% else %}
<option value="Cl">Classifier</option>
{% endif %}
{% if verb_option == 'Conj' %}
<option value="Conj" selected>Conjunction</option>
{% else %}
<option value="Conj">Conjunction</option>
{% endif %}
{% if verb_option == 'Det' %}
<option value="Det" selected>Determiner</option>
{% else %}
<option value="Det">Determiner</option>
{% endif %}
{% if verb_option == 'Idiom' %}
<option value="Idiom" selected>Idiom</option>
{% else %}
<option value="Idiom">Idiom</option>
{% endif %}
{% if verb_option == 'Intj' %}
<option value="Intj" selected>Interjection</option>
{% else %}
<option value="Intj">Interjection</option>
{% endif %}
{% if verb_option == 'Noun' %}
<option value="Noun" selected>Noun</option>
{% else %}
<option value="Noun">Noun</option>
{% endif %}
{% if verb_option == 'Num' %}
<option value="Num" selected>Number</option>
{% else %}
<option value="Num">Number</option>
{% endif %}
{% if verb_option == 'Ono' %}
<option value="Ono" selected>Onomatopoeia</option>
{% else %}
<option value="Ono">Onomatopoeia</option>
{% endif %}
{% if verb_option == 'Part' %}
<option value="Part" selected>Particle</option>
{% else %}
<option value="Part">Particle</option>
{% endif %}
{% if verb_option == 'Prep' %}
<option value="Prep" selected>Preposition</option>
{% else %}
<option value="Prep">Preposition</option>
{% endif %}
{% if verb_option == 'Pro' %}
<option value="Pro" selected>Pronoun</option>
{% else %}
<option value="Pro">Pronoun</option>
{% endif %}
{% if verb_option == 'Pu' %}
<option value="Pu" selected>Punctuation</option>
{% else %}
<option value="Pu">Punctuation</option>
{% endif %}
{% if verb_option == 'SFP' %}
<option value="SFP" selected>Sentence-Final Particle</option>
{% else %}
<option value="SFP">Sentence-Final Particle</option>
{% endif %}
{% if verb_option == 'Verb' %}
<option value="Verb" selected>Verb</option>
{% else %}
<option value="Verb">Verb</option>
{% endif %}
{% if verb_option == 'X' %}
<option value="X" selected>Unclassified</option>
{% else %}
<option value="X">Unclassified</option>
{% endif %}
</select>
</div>
<div style="align-self: center;font-size: 14px;color: #2f855a;" class="btn-plus col-lg-1 d-inline">
<div class="fa fa-plus d-inline"></div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<input type="submit" name="main_search" value="Search" class="btn btn-primary">
<a href="{% url 'search:search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a>
</div>
</div>
</form>
</div>
search.html
<script type="text/javascript">
$(document).ready(function()
{
let btn_plus = $(".btn-plus");
let search_group = $(".search_group")
let search_form = $("#main_search")
let create_times_parent = document.createElement("div")
create_times_parent.classList.add("btn-times", "col-lg-1", "d-inline")
let create_times = document.createElement("div")
create_times.classList.add("fa", "fa-times", "d-inline")
create_times_parent.appendChild(create_times)
function add_inc()
{
btn_plus.click(function ()
{
$("div.search_group:first-of-type").after(search_group.clone(true, true));
search_group.addClass('created')
search_group.append(create_times_parent)
if ($(this).data('clicked', true)) {
create_times_parent.onclick = function ()
{
$(this).parent('.created').remove()
console.log("clicked")
}
}
});
}
add_inc()
});
</script>
Your divs are dynamically generated so just bind it with static elements which are already present inside your DOM.
Also , I have move whole remove event outside function and then have use $(document).on("click", ".remove", function() {.. this will trigger your remove button then use .closest(".created").remove() to remove whole div.
Demo Code :
$(document).ready(function() {
let search_group = $(".search_group")
let search_form = $("#main_search")
let create_times_parent = document.createElement("div")
create_times_parent.classList.add("btn-times", "col-lg-1", "d-inline")
let create_times = document.createElement("div")
//added on extra class here..
create_times.classList.add("fa", "fa-times", "d-inline", "remove")
create_times_parent.appendChild(create_times)
$(document).on('click', '.btn-plus', function() {
$("div.search_group:first-of-type").after(search_group.clone(true, true));
search_group.addClass('created')
search_group.append(create_times_parent)
});
//onclick of remove..
$(document).on("click", ".remove", function() {
$(this).closest('.created').remove() //get closest outer div
console.log("clicked")
})
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-field">
<h2 class="show"></h2>
<form method="get" id="main_search">
<div id="first_search_group" class="form-group row search_repeated search_group">
<div class="col-lg-2 d-inline p-2 word_repeated">
<label style="font-size: large; padding-top: 5px">Sentence or Word</label>
</div>
<!-- Filter -->
<div class="col-lg-2 d-inline p-2">
<select name="formsets_option" id="formsets_option" class="form-control">
<option id="contains" value="contains" selected>contains</option>
<option id="start_with" value="start_with" selected>start with</option>
<option id="is" value="is" selected>is</option>
<option id="end_with" value="end_with" selected>end with</option>
</select>
</div>
<div class="col-lg-4 d-inline p-2">
<input id="search_btn" type="text" class="form-control" onkeyup="if (this.value != ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}" placeholder="search" name="query" value="{{ request.GET.query }}">
</div>
<div class="col-lg-2 d-inline p-2">
<select name="verb_option" id="verb_option" class="form-control">
<option value="" selected>Any POS</option>
</select>
</div>
<div style="align-self: center;font-size: 14px;color: #2f855a;" class="btn-plus col-lg-1 d-inline">
<div class="fa fa-plus d-inline"></div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<input type="submit" name="main_search" value="Search" class="btn btn-primary">
<a href="{% url 'search:search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a>
</div>
</div>
</form>
</div>

Submit button not working in form - laravel

Here I used laravel 5.6. In my project I appended a form using ajax by rendering form. But here submit form not working. When I press submit button it does not make any action. It is acting like
my ajax code is
$.ajax({
url:"/add-form-content",
type: 'GET',
data: {
},
success: function (response) {
$('#cat_C_EEL_content').empty();
$('#cat_C_EEL_content').append(response);
}
})
blade
<form class="form form-horizontal" action="{{ url('set-reward') }}" method="POST" >
{{ csrf_field() }}
<td>
<input type="hidden" name="category_name" value="C-EEL">
<select name="reward" class="form-control" required>
<option value="">Select</option>
<option value="gold">gold</option>
<option value="silver">silver</option>
<option value="bronze">bronze</option>
</select>
</td>
<td>
<input type="submit" class="btn btn-outline-primary">
</td>
</form>

Select2 not getting loaded in template. [Meteor + Blaze]

Before marking question duplicate, I want to make clear that I have already tried all the ways possible (e.g. here) to simply load a select2 dropdown on a simple page in Meteor.
Below is simple code to understand my select2 application procedure.
ManageRoles.js
Template.ManageRoles.onRendered(function() {
$(".roleSelect").select2();
});
ManageRoles.html
<form class="assignRoleForm">
<div class="row">
<div class="col-sm-12">
<label>Roles</label>
<select class="roleSelect form-control" multiple="multiple" required>
<option value="">Select Option</option>
<option value="1">ADMIN</option>
<option value="2">MANAGER</option>
</select>
</div>
</div>
<br/>
<div class="text-center">
<button type="submit" class="btn btn-success"> Assign </button>
<button type="button" class="btn btn-danger"> Close </button>
</div>
</form>
select2 Import structure
root\client\vendor\select2\select2-bootstrap.css
root\client\vendor\select2\select2.js
root\client\vendor\select2\style\select2.css
Below is the snapshot of the current output.
****************** Updated *******************
Upon doing this console.log($('.roleSelect').get(0)); I get below in console log
<select class="roleSelect form-control" multiple="multiple" required="">
<option value="">Select Option</option>
<option value="fov9sPjiXtbRdJccR">ADMIN</option>
<option value="ga4p3FwQ76LH4Nq8y">MANAGER</option>
</select>
I would try the following:
Template.ManageRoles.onRendered(function() {
this.$(".roleSelect").select2({
placeholder: 'Select Option'
});
});
And then in the HTML leave the first option blank:
<option value=""></option>

Django language selection does not work with Firefox

I'm trying to set up a language selector using the Framework Django.
I used this code:
<form action="/i18n/setlang/" method="post">
{% csrf_token %}
<input name="next" type="hidden" value=""/>
<select class="select-style" name="language" onchange="this.form.submit();" style="width:100px">
{% for lang in LANGUAGES %}
<option value="{{ lang.0 }}" {% if lang.0 == LANGUAGE_CODE %} selected="selected"{% endif %}>{{ lang.1 }}</option>
{% endfor %}
</select>
</form>
It works well with Chrome and Safari but not Firefox.
The 1st language (English) is not displayed in the drop-down menu.
/ setting.py /
LANGUAGES = (
('en', gettext('English')),
('fr', gettext('French')),
('nl', gettext('Dutch')),
('it', gettext('Italian')),
('es', gettext('Spanish')),
('th', gettext('Thai')),
)
Thanks
EDIT
I've finally fixed my problem adding a selected=selected field option which is displayed only in Chrome and Safari but at least all languages are displayed in FF.
<form action="/i18n/setlang/" method="post">
{% csrf_token %}
<input name="next" type="hidden" value=""/>
<select class="select-style" name="language" onchange="this.form.submit();" style="width:100px;font-size:12px;">
<option selected="selected" disabled="disabled">Select your language</option>
{% for lang in LANGUAGES %}
<option value="{{ lang.0 }}" {% if lang.0 == LANGUAGE_CODE %} selected="selected"{% endif %}>{{lang.1|title}}</option>
{% endfor %}
</select>
</form>

Categories