We Keep Coding

AJAX - Show a <div> on a button click

As I am implementing AJAX, I would like this whole <div> to show up as a consequence of clicking the button in the script below :
<div class="col-12" id="deleteVote">
<div class="row mb-2" >
<div class="col-12">
{% for vote in proposal.votes %}
{% if app.user == vote.user %}
<a href="{{ path('vote_delete',{'slug' : slug, 'proposal' : proposal.id, 'vote' : vote.id}) }}" class="btn btn-light ml-1 btn-sm deleteVote" data-toggle="deleteConfirmation">
<i class="bi bi-trash"></i> {{ 'vote-delete' | trans }}
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
Here is the script, I don't really know why the .show is not working :
<script>
$(document).on('click', '.votedFullAgreement', function (){
$.ajax({
url: '{{ path('vote_add', {'slug' : slug, 'proposal' : proposal.id, 'userVote' : 'votedFullAgreement', 'user' : app.user.id }) }}',
type: 'POST',
dataType: 'html',
success: function (){
$('#deleteVote').show();
},
error: function (resultat, statut, erreur) {
}
});
return false;
});
</script>
Btw the script is probably not optimised at all but it's my first one and it's working and sending data...
Thank you !
EDIT 2 :
I don't understand why this if/else doesn't work. When there's a vote, the if works, the button is there when we come back/reload the page, but when there is no vote yet, the .show(); doesn't activate the else which is in display:none.
Is it because as soon as I vote, the if becomes true? (and .show(); needs something previously hidden to display but can't find any...)
{# Standard loop #}
{% if proposal.votedByUser(app.user) %}
<div class="col-12">
<div class="row mb-2">
<div class="col-12">
{% for vote in proposal.votes %}
{% if app.user == vote.user %}
<a href="{{ path('vote_delete',{'slug' : slug, 'proposal' : proposal.id, 'vote' : vote.id}) }}" class="btn btn-light ml-1 btn-sm" data-toggle="deleteConfirmation">
<i class="bi bi-trash"></i> {{ 'vote-delete' | trans }}
</a>
{% endfor %}
</div>
</div>
</div>
{% else %}
{# AJAX loop #}
<div class="col-12">
<div class="row mb-2">
<div class="col-12">
{% for vote in proposal.votes %}
{% if app.user == vote.user %}
{# ID deleteVote here, which has display:none in the CSS #}
<a href="{{ path('vote_delete',{'slug' : slug, 'proposal' : proposal.id, 'vote' : vote.id}) }}" id="deleteVote" class="btn btn-light ml-1 btn-sm" data-toggle="deleteConfirmation">
<i class="bi bi-trash"></i> {{ 'vote-delete' | trans }}
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
If I split both loops, the AJAX one works only when there is already a vote registered (and the button of the standard loop is already there)

best way to store checkbox values in session when paging

I work with Symfony and Twig. I currently have a twig page containing a list of products, I display them with a foreach loop and I put pagination to limit the display of products.
I have a form in this page with a checkbox as input and I need to keep my checkbox checked save in session when I go to the next page
I tried to do it with adding this code
there is some code, I added some comment in the pagination view and controller to explain what I tried.
view of my loop :
<form>
<div class="row" >
{% for annonce in annonces %}
<div class="col-12 col-md-6 col-lg-4">
<p class="text text--blue text--bold m-0 text--medium mt-2">
{{ annonce._source.titre }}
</p>
<p class="m-0">{{ 'Réf' }}: {{ annonce._source.reference }}</p>
<div class="d-flex mt-2 text--bold">
<div class="d-flex me-2">
{{ annonce._source.ville }}
</div>
</div>
<div>
<input type="checkbox" name="checkbox[]" id="checkbox_pdf" value="{{annonce._id}}" multiple/>
</div>
</div>
{% endfor %}
</div>
<input type="submit" id="pdf_submit" value="Create PDF" name="submit_pdf" class="btn btn-primary">
</form>
view of the pagination :
// I tried to add a onclick : onclick='document.forms["name"].submit(); return false;' on each pagination link combined with the save of the value in session with my controller but doesn't work
<div class="col d-flex justify-content-between align-items-center">
<div class="d-flex">
{% if page > 0 %}
<a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':0, 'type':'frontoffice'}) }}" data-target="pagination-target">
«
</a>
<a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':page-1, 'type':'frontoffice'}) }}" data-target="pagination-target">
{{ 'Précédent' }}
</a>
{% else %}
<a href="#" disabled="disabled" >
{{ 'Précédent' }}
</a>
{% endif %}
</div>
<div>
<ul class="list-unstyled pagination m-0">
{% for i in (page+1)..(page+4) %}
{% if i <= numberOfMaxPage %}
{% if i == (page+1) %}
<li>
<a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':(i-1), 'type':'frontoffice'}) }}" data-target="pagination-target">
{{ i }}
</a>
</li>
{% else %}
<li>
<a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':(i-1), 'type':'frontoffice'}) }}" data-target="pagination-target">
{{ i }}
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
<div class="d-flex">
{% if page < (numberOfMaxPage-1) %}
<a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':page+1, 'type':'frontoffice'}) }}" data-target="pagination-target">
{{ 'Suivant' }}
</a>
<a href="#" data-action="pagination" data-uri="{{ path('ajax_annonce_pagination',{'page':numberOfMaxPage-1, 'type':'frontoffice'}) }}" data-target="pagination-target">
»
</a>
{% endif %}
</div>
</div>
JS of the pagination :
$( document ).ready(function() {
$(document).on('click', 'a.pagination',function(e) {
e.preventDefault();
$.ajax({
url: $(this).data('uri'),
}).done(function(html) {
$('#pagination-target').html(html);
$('html,body').animate({scrollTop: $('#pagination-target').offset().top - 80}, 200);
var $scrollable = document.getElementById('pagination-target');
$scrollable.scrollIntoView();
});
});
});
In my controller I render my view like this :
public function search(Request $request, ?SecteurGeographique $secteurGeographique, AnnonceRepository $annonceRepository): Response
{
$selectId = $request->get('checkbox');
$selected = $annonceRepository->findById($selectId);
// I tried to add this code to save my values
if (isset($selectId))
{
$session = new Session();
$session->set('checkbox',$selectId);
}else{
echo 'false';
$session = new Session();
$session->clear();
}
return $this->render('front/annonce/list.html.twig', array(
'annonces' => $results['hits']['hits'],
'total' => $results['hits']['total']['value'],
'website' => $website,
'page' => $request->query->getInt('page')
));
}
It is better to do a save in session my php or in ajax ?
thanks you in advance

Actually, if I understood correctly your code, you don't really need to use session.
I assume that, when you submit the form, then you will need to post all the checkbox value at once to generate your PDF.
If that is try, you should only store the list of the checkboxes directly via Javascript and be sure to send everything when you submit your form.
In this theory, there could be you HTML main page :
<form>
<div class="row" >
{% for annonce in annonces %}
<div class="col-12 col-md-6 col-lg-4">
<p class="text text--blue text--bold m-0 text--medium mt-2">{{ annonce._source.titre }}</p>
<p class="m-0">{{ 'Réf' }}: {{ annonce._source.reference }}</p>
<div class="d-flex mt-2 text--bold">
<div class="d-flex me-2">
{{ annonce._source.ville }}
</div>
</div>
<p>
<input type="checkbox" name="checkbox[]" class="checkboxPDF" value="{{annonce._id}}"/>
</div>
{% endfor %}
</div>
<div id="savedCheckboxes" class="d-none"></div>
<input type="submit" id="pdf_submit" value="Create PDF" name="submit_pdf" class="btn btn-primary">
</form>
Here, you can see that I added the invisible div #savedCheckboxes. That will allow us to save all the checkboxes when you change your pages. I also corrected a little bit your HTML, but nothing major.
Then you should update your pagination javascript :
$(document).ready(function() {
$(document).on('click', 'a.pagination',function(e) {
e.preventDefault();
// Save all the selected checkboxes by moving them to #savedCheckboxes
$('.checkboxPDF:checked').appendTo($('#savedCheckboxes'))
// Do your pagination like you did
$.ajax({
url: $(this).data('uri'),
}).done(function(html) {
$('#pagination-target').html(html);
// If the user come to a previous page, verify if he did selected a checkbox
$('#pagination-target .checkboxPDF').each(function(i, element) {
// If the checkbox already exists in the #savedCheckboxes, then select this checkBox & remove it from #savedCheckboxes
var savedCheckbox = $('#savedCheckboxes .checkboxPDF[value="'+element.val()+'"]')
if(savedCheckbox.length > 0) {
element.click() // Select this checkbox
savedCheckbox.remove() // Remove it from the hidden selection
}
})
$('html,body').animate({scrollTop: $('#pagination-target').offset().top - 80}, 200);
var $scrollable = document.getElementById('pagination-target');
$scrollable.scrollIntoView();
});
});
});
And the magic is done ... When you will submit your form, you will always receive ALL the list of the selected Checkbox, even those that are not displayed anymore because of your pagination.

How to disable a input field according to another select field value in bootstrap/crispy?

I'm trying to deactivate existing_name fields based on values that selected on action field
I'm using crispy and rendering option for action field from models.py
action = models.CharField(max_length=30,
choices=[('add', 'Add'), ('delete', 'Delete'), ('modify', 'Modify'),
('rename', 'Rename')])
I had check all same question on Stackoverfllow and all suggested to deactivate it by script with changes happen action fields
{% extends "KPI_App/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<form action="" method="post" autocomplete="off" >
{% csrf_token %}
<div class="row">
<div class="col-md-4 id='1'">{{form.action|as_crispy_field}}</div>
</div>
<div class="row">
<div class="row id='existing_name' " >{{form.existing_name|as_crispy_field}}</div>
<div class="row">
<div class="col-md-8">
<button type="submit" class="btn btn-success btn-block btn-lg"><i class="fas fa-database"></i> Submit</button>
</div>
<div class="col-md-4">
<a href="{% url 'KPI_list' %}" class="btn btn-secondary btn-block btn-lg">
<i class="fas fa-stream"></i> Back to List
</a>
</div>
</div>
</form>
{% endblock content %}
<script>
$(document).ready(function(){
$("select[name='action']").on('change',function(){
if($(this).val()=='1'){
$("input[name='existing_name']").prop("disabled",false);
}else{
$("input[name='existing_name']").prop("disabled",true);
}
});
});
</script>
I can't assign id for these class and use it it script

Assuming your form input ids are the django default: id_action and id_existing_name.
function toggleAction() {
if ($('#id_action :selected').text() == "Modify") {
$('#id_existing_name').prop('disabled',false)
}
else {
$('#id_existing_name').prop('disabled',true)
}
}
$(document).on('click change', '#id_action', function() {
toggleAction()
})
$(document).ready(function() {
toggleAction();
});

How to hide and show button after page reload

I am learning jQuery and I have issues on how to hide and show a button during page reload. I tried my code below, it hides and shows the button on click, but when the page loads, the button changes back to former state. This is what I've tried:
Template:
<span class="load-requests-sections"> <!-- Load page if request sent in Ajax -->
<!-- Main -->
<main>
<!-- Container -->
<div class="container-fluid" id="suggested-people-cont" style="position:relative;top:170px;padding-bottom:100px;">
<!-- Row Grid Container -->
<div class="row d-flex justify-content-center">
<div class="col-lg-6 col-md-9 col-12">
{% if following %}
<h6 class="suggested-people-header mb-3" style="font-weight:500;">Following {{ following.count|human_format }}</h6>
{% endif %}
<div class="card news-card mb-2" id="suggested-people-card" style="width:700px;padding:13px;box-shadow:none;">
{% for data in profile_and_button_status %}
<!-- Copy and paste for another post below -->
<div class="row mb-3">
{% if data.0.to_user.profile.profile_pic %}
<a href="{% url 'site:profile-view' data.0.to_user.username %}">
<img src="{{ data.0.to_user.profile.profile_pic.url }}" class="rounded-circle avatar-img ml-4" height="50" width="50" style="border:none;padding:0px;position:relative;top:-1px;object-fit: cover;">
</a>
{% endif %}
<div class="suggestionfrndnamemutual-cont mt-1 ml-3">
<p class="dark-grey-text text-lowercase font-weight-bold">
<a href="{% url 'site:profile-view' data.0.to_user.username %}"><span class="suggestionfrnd-username username dark-grey-text text-truncate" style="">
{{ data.0.to_user.username }}</span></a>
</p>
<p class="card-text" style="position:relative;top:0px;">
<span class="suggestionfrnd-mutual text-muted" style="font-size:13px;">New to Pixmate</span>
</p>
</div>
{% if not data.0.to_user == request.user %}
<div class="mt-2" style="position:absolute;right:30px;">
{% if data.1 == 'not_friend' %}
<a href="{% url 'site:send_friend_request' data.0.to_user.id %}" class="friend-request">
<button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Follow</span>
</button>
</a>
{% elif data.1 == 'cancel_request_sent' %}
<a href="{% url 'site:cancel_friend_request' data.0.to_user.id %}" class="friend-request">
<button type="button" class="btn btn-amber btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Cancel</span>
</button>
</a>
{% elif data.1 == 'follow_back_request' %}
<!-- CLICK ON THIS BUTTON TO HIDE AND SHOW THE BELOW BUTTON -->
<a href="{% url 'site:accept_friend_request' data.0.to_user.id %}" class="friend-request followback-btn">
<button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Follow Back</span>
</button>
</a>
<!-- SHOW THIS BUTTON AFTER PAGE RELOAD -->
<a href="{% url 'site:remove_friend' data.0.to_user.id %}" class="friend-request following-btn" style="display:none;">
<button type="button" class="btn btn-sm btn-block border waves-effect text-capitalize font-weight-bold dark-grey-text p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Following</span>
</button>
</a>
{% endif %}
</div>
{% endif %}
</div>
<!-- Row Grid -->
{% empty %}
{% if owner_of_the_following %}
<div class="container text-center image-post mt-0">
<!-- <img src="{{ '/static/' }}images/photo-camera-img.png" class="mb-3" width="60" height="60"> -->
<p class="dark-grey-text" style="font-size: 28px;">People you're Following</p>
<p class="dark-grey-text">When you follow someone, it will show here.</p>
<a href="{% url 'site:people-suggested' %}" class="btn btn-primary btn-md waves-effect mx-auto my-4" style="box-shadow:none;border-radius:30px;">
<strong>Find People to Follow</strong></a>
</div>
{% else %}
<div class="container text-center image-post mt-0">
<p class="dark-grey-text"><strong>No users</strong></p>
</div>
{% endif %}
{% endfor %}
</div>
<!-- Card -->
</div>
<!-- Column Grid -->
</div>
<!-- Row Grid Container -->
</div>
<!-- Container -->
</main>
<!-- Main -->
</span>
Jquery:
//SEND FRIEND REQUESTS WITHOUT PAGE RELOAD THIS WORKED
$('.load-requests-sections').on('click', '.friend-request', function(event){
event.preventDefault();
var page = $(this).attr('href');
$('.load-requests-sections').load(page);
});
//HIDE AND SHOW BUTTON AFTER PAGE RELOAD RETURN BACK TO OLD STATE WHEN PAGE RELOAD
$('.followback-btn').on('click', function(event){
event.preventDefault();
$('.followback-btn').hide();
$('.following-btn').show();
})
I also tried using localstorage, to show the hidden button after the page reloads, but the old button clicked is still shown. How do I hide the old button after a page reload.
$(document).ready(function(){
var $hidden = $('.following-btn');
if (localStorage.getItem('show')) {
$hidden.show();
$('.followback-btn').hide();
}
$('.followback-btn').on('click', function() {
localStorage.setItem('show', true);
window.location.reload(false);
});
})

There seems to be a problem in how you test if the .followback-btn was pressed.
In your second jQuery example, try replacing this line:
localStorage.getItem('show') && $hidden.show();
With this:
if (localStorage.getItem('show')) {
$hidden.show();
$('.followback-btn').hide();
}
This means that if the show variable is set in the local storage, the .following-btn will be shown when the page loads, instead of the .followback-btn one.
Hope this helps.

DOM not loading

In the code below the DOM does not load at all and events are not fired when I include the $("body").on() functions. When I try the functions within the .ready() individually they still do not work, even the "alert("Hi!")" does not work. But when I take out all the functions and leave only the alert("Hi!") the alert gets fired, is there any known reason why including either or all of the $("body").on() functions stops the DOM from loading?
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function(){
alert("Hi!");
$("body").on("click", ".sorter", function(event){
$('.row.replace').empty();
$('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>");
var sort = $(this).attr("name");
var filter = $('.select').find(":selected").attr("name");
//var csrftoken = getCookie('csrftoken');
$.ajax({
type: "POST",
url: "/filter_home/" + filter + "/" + sort + "/",
data: {'name': 'me', 'csrfmiddlewaretoken': '{% csrf_token %}'},
success : function(data) {
$('.row.replace').html(data);
//$('.row.replace').html("{% load endless %}{% paginate 6 dishes %}" + data + "<h2 align='center'>{% show_pages %}")
},
error : function(xhr,errmsg,err) {
alert(err);
}
}); //end ajax
return false;
}); //end onclick
$("body").on("change", ".select", function(event){
$('.row.replace').empty();
$('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>");
var filter = $(this).find(":selected").attr("name");
//var csrftoken = getCookie('csrftoken');
$.ajax({
type: "POST",
url: "/filter_home/" + filter + "/" + "TrendingNow" + "/",
data: {'name': 'me', 'csrfmiddlewaretoken': '{% csrf_token %}'},
success : function(data) {
$('.row.replace').html(data);
//$('.row.replace').html("{% load endless %}{% paginate 6 dishes %}" + data + "<h2 align='center'>{% show_pages %}")
},
error : function(xhr,errmsg,err) {
alert(err);
}
}); //end ajax
return false;
}); //end onchange
$("body").on("click", ".upvote", function(event){
var x = $(this).attr("name");
//var csrftoken = getCookie('csrftoken');
$.ajax({
type: "POST",
url: "/upvote/" + x + "/",
data: {'name': 'me', 'csrfmiddlewaretoken': '{% csrf_token %}'},
dataType: "json",
success : function(json) {
var y = "vote-count" + x;
$('i[class= "' + y + '"]').text(json.vote_count);
//flip button
$('.flip'+x).find('.card').toggleClass('flipped');
},
error : function(xhr,errmsg,err) {
alert("oops, something went wrong! Please try again.");
}
}); //and ajax
return false;
}); //end onclick
}); //end on ready
</script>
Accompanying HTML code
<div class="widewrapper weak-highlight">
<div class="container content">
<h3 align="center"> Choose Box: </h3>
<select class="select">
<option value="All" name="All">All</option>
<!--<option value="People You Follow" name="PeopleYouFollow">People You Follow</option>-->
{% for box in boxes %}
<option value="{{ box.name }}" name="{{ box.name }}">{{ box.name }}</option>
{% endfor %}
</select>
<div class="row">
<div class="span12">
<div class="showroom-controls">
<div class="links">
Trending Now
<i class="verticalSeparator"></i>
<a class="sorter" name="RecentlyAdded">Recently Added</a>
<i class="verticalSeparator"></i>
All Time Most Upvoted
</div>
</div>
<div class="row replace" id="entries">
{% for dish, liked in dishes %}
<div class="showroom-item span3">
<div class="thumbnail">
<img class="food_pic" src="/media/{{ dish.image }}" alt="Portfolio Image">
<div class="span3c">
<b> {{ dish.name }} </b>
</div>
<div class="span3d">
posted by <b> {{ dish.creator }}</b>
</div>
<div class="span3c">
<div class="btn-group">
<div class="flip flip{{ dish.id }}">
<div class="card">
{% if liked %}
<div class="face front">
<button type="button" class="btn btn-grove-one upvote" id="upvote" name="{{ dish.id }}">Upvoted <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }}</i></a></button>
</div>
<div class="face back">
<button type="button" class="btn btn-grove-two upvote" id="upvote" name="{{ dish.id }}">Upvote <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }} </i></a></button>
</div>
{% else %}
<div class="face front">
<button type="button" class="btn btn-grove-two upvote" id="upvote" name="{{ dish.id }}">Upvote <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }} </i></a></button>
</div>
<div class="face back">
<button type="button" class="btn btn-grove-one upvote" id="upvote" name="{{ dish.id }}">Upvoted <i class="glyphicons thumbs_up"><i></i></i><i class="vote-count{{ dish.id }}">{{ dish.other_votes }}</i></a></button>
</div>
{% endif %}
</div>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-grove-two"><i class="glyphicons comments"><i></i></i><fb:comments-count href=http://www.feastbox.com/dish/{{ dish.id }}/></fb:comments-count></button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>