My problem is that my script is not working upon a user selects a filter. Before that the "Show More" and "Show Less" buttons are perfectly working. Upon selecting a filter, they don't anymore and the script won't even load. Upon page refresh, the script is working again ONLY UNTIL selecting a filter again.
Just a quick brief: We're on a collection page and on the filter sidebar. We're displaying the first 6 options and the "Show More" button in default state. Upon clicking on "Show More" all filters are unhided. (the 'hide' class is removed from them, which is styled with CSS to 'display: none').
Here is the code for the buttons:
<div id ="less-button" class="show-less-button-{{ forloop.index }}">
<button id="btnfilter-{{ forloop.index }}" type="button" class="show-more-filters">Show Less</button>
</div>
<div id="more-button" class="show-more-button-{{ forloop.index }}">
<button id="btnfilter-{{ forloop.index }}" type="button" class="show-more-filters">Show More</button>
</div>
And here is the script I'm using for the filter "Show More" and "Show Less" button:
HTMLElement.prototype.hasClass = function(cls) {
var i;
var classes = this.className.split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] == cls) {
return true;
}
}
return false;
};
{% comment %} This is for the Size filters {% endcomment %}
const parent_size = document.getElementsByClassName("Size");
const children_size = parent_size[1].children;
const morebutton_size = document.getElementsByClassName("show-more-button-2")
const lessbutton_size = document.getElementsByClassName("show-less-button-2")
for(i = 6; i < children_size.length-1; i++) {
children_size[i].classList.add("hide");
}
morebutton_size[1].addEventListener("click", function filterunhide(){
for(i = 6; i < children_size.length-1; i++){
if(children_size[i].hasClass('hide')){
children_size[i].classList.remove('hide');
}
}
morebutton_size[1].classList.add('hide')
});
lessbutton_size[1].addEventListener("click", function filterhide(){
for(i = 6; i < children_size.length-1; i++){
children_size[i].classList.add('hide');
}
morebutton_size[1].classList.remove('hide')
})
{% comment %} This is for the Marca filters {% endcomment %}
const parent_marca = document.getElementsByClassName("Marca");
const children_marca = parent_marca[1].children;
const morebutton_marca = document.getElementsByClassName("show-more-button-3")
const lessbutton_marca = document.getElementsByClassName("show-less-button-3")
for(i = 6; i < children_marca.length-1; i++) {
children_marca[i].classList.add("hide");
}
morebutton_marca[1].addEventListener("click", function filterunhide(){
for(i = 6; i < children_marca.length-1; i++){
if(children_marca[i].hasClass('hide')){
children_marca[i].classList.remove('hide');
}
}
morebutton_marca[1].classList.add('hide')
});
lessbutton_marca[1].addEventListener("click", function filterhide(){
for(i = 6; i < children_marca.length-1; i++){
children_marca[i].classList.add('hide');
}
morebutton_marca[1].classList.remove('hide')
})
I've tried adding Event listener to the "Linklist__Item" class elements, which are the filters, with a click function to reload the page. This was a half solution, because it selected the filter AND refreshed the page BUT the filter selection wasn't stored in the data, so basically the filter was not selected.
What's happening atm is when I change the filters, an page refresh is happening and updating the filters using jquery Ajax BUT this is not truly reloading the page, only refresh the content.
Hopefully someone can help figure the problem out.
Related
<script>
//<body>
//<div class="prod"></div>
//<div class="details"></div>
//</body>
const product=document.querySelector(".prod");
var ourRequest=new XMLHttpRequest();
ourRequest.open('GET','http://inec.sg/assignment/retrieve_records.php');
ourRequest.onload=function(){
var data=JSON.parse(ourRequest.responseText);
renderHTML(data);
};
ourRequest.send();
function renderHTML(data){
for(var i=0;i<data.songs.length;i++){
product.innerHTML+=`
<div><img src="${data.songs[i].image}" height="200px"></div>
<div><h2>${data.songs[i].name}</h2></div>
<div><h2>$${data.songs[i].price}</h2></div>
<button id="">Details</button>
`;
}
}
//how do i display prod details when click on button? Able to hide the prod listing div, show the details in details div?
// details eg. data.songs.image, data.songs.brand, data.songs.style, data.songs.discount, data.songs.price
</script>
How do I display prod details when click on button? Able to hide the product listing div, show the details in details div?
Show these in details:
data.songs.image, data.songs.brand, data.songs.style, data.songs.discount, data.songs.price
This is what I came up with:
<button class="load">Load List</button>
<button class="hide">Hide List</button>
<div class="prod"></div>
<div class="details"></div>
<script>
const product = document.querySelector(".prod");
const details = document.querySelector(".details");
const loadBtn = document.querySelector(".load");
const hideBtn = document.querySelector(".hide");
loadBtn.addEventListener("click", () => { // on click of load button
// send request to get data
var ourRequest = new XMLHttpRequest();
ourRequest.open(
'GET',
'http://inec.sg/assignment/retrieve_records.php'
);
ourRequest.onload = function () {
var data = JSON.parse(ourRequest.responseText);
renderHTML(data);
};
ourRequest.send();
function renderHTML(data) {
product.innerHTML = ""; // empty product element
for (var i = 0; i < data.songs.length; i++) {
product.innerHTML += `
<div><img src="${data.songs[i].image}" height="200px"></div>
<div><h2>${data.songs[i].name}</h2></div>
<div><h2>$${data.songs[i].price}</h2></div>
<button data-index="${i}" class="detailsBtn">Details</button>
`; // data-index represents the index of the item in the songs array
}
let detailsBtns = document.querySelectorAll(".detailsBtn"); // get button element(s) previously created
for (var i = 0; i < detailsBtns.length; i++) {
let detailsBtn = detailsBtns[i];
detailsBtn.addEventListener("click", () => { // add on click event for individual details btn
// load details
let index = detailsBtn.dataset.index; // get index of song item
let song = data.songs[index];
details.innerHTML = `<h2>${song.image}</h2><h2>${song.brand}</h2><h2>${song.style}</h2><h2>${song.discount}</h2><h2>${song.price}</h2>`;
});
}
}
});
hideBtn.addEventListener("click", () => { // hide details when hide details button is clicked
product.innerHTML = ""; // empty product element
details.innerHTML = ""; // empty details element
});
</script>
First I declared and assigned common elements like product, details, hideBtn, and loadBtn.
I used the EventTarget.addEventListener() function to bind click events to loadBtn, hideBtn, and detailsBtn .
I used arrow functions for the callback functions of the events, but ES5 functions could certainly be used.
I used the HTMLElement.dataset attribute to link a song index to each product, so I can link the HTML of the product item(s) to their corresponding JS event functionality.
There are many other ways this could be done, but this is how I solved the problem.
I want to make a system of likes on the site, and I need to create an entry in the table on the button. When a person clicks on like, the table writes row 1 and when dislike 0
views.py
def forum(requset):
model = Quetions.objects.all()
answer = Answer.objects.all()
count = Answer.objects.all().count()
count_answer = Quetions.objects.all().count()
paginator = Paginator(model, 1) # Show 25 contacts per page.
page_number = requset.GET.get('page')
question_id = requset.GET.get('id',False)
page_obj = paginator.get_page(page_number)
requestanswer = requset.GET.get('id',False)
like_disli = like.objects.filter(like_dislike = "1").count()
dislike = like.objects.filter(like_dislike = "0").count()
createlike =
objects = {
'model': page_obj,
'answer':answer,
'count':count,
'count_question':count_answer,
'page_obj':page_obj,
'question':question_id,
'id':model,
'request':requestanswer,
'like':like_disli,
'dislike':dislike,
'createlike':createlike,
}
return render(requset,'forum.html',objects)
forum.html
<span>
<i class="fas fa-thumbs-up" style="color: blue;margin-right: 5px;" onclick="incrementClick()"></i>{{like}}<i class="fas fa-thumbs-down" style="color: red;margin-right: 5px;margin-left: 10px;" onclick="dislikeclick()"></i>{{dislike}}
</span>
{% block js %}
<script>
var a = "{{createlike}}"
function incrementClick() {
a
}
function dislikeclick() {
dislikedisplay(++dislikecounter);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}
function dislikedisplay(val){
document.getElementById("counter").innerHTML = val
}
</script>
{% endblock js %}
tell me how to do it???
I am having an issue with my javascript function in regards to removing elements. What I have below is two lists inside a div menu with each <li> marked by a class according to the category of drink and the drinks themselves. I also have a button that opens a modal box where the user would type in a drink category to remove. I decided to approach this by naming <li> with classes by the drink category and then taking a js function to get the elements by class name from the input text node and to remove those elements with what the user typed.
<div class = "menu">
<ul>
<li class = "coffee">french press</li>
<li class = "tea"><a href="#">english breakfast/a></li>
<li class = "milk">whole</li>
</ul>
<ul>
<li class = "coffee">dark roast</li>
<li class = "tea">green tea</li>
<li class = "milk">two percent</li>
</ul>
</div>
<button type="button" id ="openmodal">Click Me!</button>
<div id="myDeleteModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h1 class="modal-title">
<b>Type the drink category you want to remove </b>
</h1>
<input id="deletedrinktext" type="text" />
<button id="delete">Remove</button>
<button type="button" class="btn btn-defaultdeletedrink" id="closedbtn" data-dismiss="modal" onclick="">Close</button>
</div>
</div>
<script>
var modal = document.getElementById("myDeleteModal");
// Get the button that opens the modal
var btn = document.getElementById("openmodal");
var closebtn = document.getElementById("closedbtn");
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
closebtn.onclick = function (event) {
modal.style.display = "none";
}
</script>
<script>
(function () {
document.querySelector('#delete').addEventListener('click', function () {
let inputRemover = document.querySelector('#deletedrinktext');
let itemRemover = document.createTextNode(inputRemover.value);
let listRemover = document.getElementsByClassName(itemRemover);
for (var i = 0; i < listRemover.length; i++) {
if (document.contains(listRemover)) {
listRemover[i].remove();
}
}
inputRemover.value = ""; // clear input
});
})();
</script>
So what I want to replicate is a user would open the modal box, type in coffee and click remove. This would remove from the document the following two elements:
<li class = "coffee">french press</li>
<li class = "coffee">dark roast</li>
This function isn't working so far and I am not sure if there is an error in my JS in getting each element or if going with the class approach is not the way to go about it? When I type in the name of the category just like written in my HTML, the element in the list still displays.
remove() is not a function of Array in javascript. I think your best approach would be to just not display the elements you want to remove. To do just change your handler function to this:
let inputRemover = document.querySelector('#deletedrinktext');
let listRemover = document.getElementsByClassName(inputRemover.value);
for (let i = 0; i < listRemover.length; i++) {
if (document.contains(listRemover[i])) {
listRemover[i].style.display = 'none';
}
}
JSFiddle to try it out without modal functionality.
This also helps you if you maybe want to reset the list. To do so, just set the display property on every element to block.
Also, I don't knwo if it is a copy paste issue but the a at english breakfast is missing a < in the closing tag.
i work with prestashop1.7. The Search by Brand works perfectly under the form "dropdown list" in the module ps_facetedSearch.
I need to override this search instead of dropdown i need an input field, So i think that the solution can be to search if the inputed text is exist in the dropdown list. this is my essay but the console display no despite console log on txtValue and inpted showContent of these variables. that's why i need your help concerning the script js itself that must test if inputed text exist in the dropdown list.
code html of the module faceted search
<div class="dropdown-menu" id="dropdown-menu">
<a rel="nofollow" href="http://archivartshop.local/fr/2-accueil?q=Marque-Naim+Ameur" class="select-list"> Naim Am(1)</a>
<a rel="nofollow" href="http://archivartshop.local/fr/2-accueil?q=Marque-Sonia+Mili" class="select-list"> Sonia Mili (1) </a>
<a rel="nofollow" href="http://archivartshop.local/fr/2-accueil?q=Marque-Yosr+Ben+Hammouda" class="select-list"> Yosr Ben Houda(2)</a>
</div>
My essay script js
function mFn(){
divLi = document.getElementById("dropdown-menu");
linka = divLi.getElementsByTagName("a");
for (i = 0; i < linka.length; i++) {
var txtValue = linka[i].textContent ;
// console.log(txtValue); content displayed
var inpted = $('#search_input').val();
// console.log(inpted);content displayed
if( txtValue === inpted)
{
console.log("it_works");
}
else {
console.log("No !!");
}
}
}
I would be very grateful for your help
Now it works for me
function mFn(){
divLi = document.getElementById("dropdown-menu");
linka = divLi.getElementsByTagName("a");
for (i = 0; i < linka.length; i++) {
var txtValue = linka[i].textContent ;
// console.log(txtValue); content displayed
var inpted = $('#search_input').val();
// console.log(inpted);content displayed
if( txtValue.includes(inpted) )
{
console.log("it_works");
}
else {
console.log("No !!");
}
}
}
We're looking for a solution to hide the add to cart button if a product is already in cart. So that the user can not order more than 1 of each product.
A Mentor from Codementor wrote a function which hides the Add to Cart button if a selected variant is in the cart:
var updateCartButtons = function () {
if (typeof (window.cartItems) === "undefined") {
window.cartItems = [];
}
var cartItemVariantID, selectedVariantID, selectedVariantName;
selectedVariantName = $('.swatch :radio:checked').val();
selectedVariantID = $('#product-select option').filter(function () {
return $(this).text() === selectedVariantName;
}).val();
$('.buymarginsecond').removeClass('addedToCart');
for (var i = 0, l = cartItems.length; i < l; i++) {
cartItemVariantID = cartItems[i].variant_id;
if (cartItemVariantID == selectedVariantID) {
$('.buymarginsecond').addClass('addedToCart');
break;
}
}
};
We'd like to change this function to the effect that the
button disappears as soon as the main product is in the cart.
So you can only order one of each product and not different variants of the product.
You can use this code in your product.liquid file where add to cart is button is show. It will loop through the titles in the cart and if found set the variable to yes. Then check if variable is no, not in cart and show add to cart.
{% assign in_cart = 'no' %}
{% for item in cart.items %}
{% if item.product.title == product.title %}
{% assign in_cart = 'yes' %}
{% endif %}
{% endfor %}
{% if in_cart == 'no' %}
// SHow Add to Cart
{% endif %}