I am trying to store a users selected items into an object so that when the user clicks a "remove button" it will also remove that item from my object. I seem to be running into an error where only the first object in my array will be removed and nothing else. Could I have some assistance?
each li has a data-id value of i, where i is an integer that increments once for every item the user adds to their list for example:
user clicks add
data-id:1
user clicks add
data-id:2
etc etc, currently when the user clicks remove...it will only remove the object with id: 0.. However clicking on any of the other items in the list does not affect the exerciseDataArr
EDIT: Included my html file, this is a Python Flask app and im using Jinja templates, as well as Wtforms to generate the form as I have a dynamic select field that uses my database to pull exercise names from that database for the user to pick from to build a routine.
createRoutine.html
{% extends 'profileSignedInBase.html' %}
{% block content %}
<div>
<div id="media">
<div>
<form action="/workoutroutines">
{{form.hidden_tag()}}
{% for field in form if field.widget.input_type != 'hidden' %}
{{ field(placeholder=field.label.text) }}
{% endfor %}
<button id="createBtn">CREATE</button>
</form>
<div>
<button id="addBtn">Add Exercise To List</button>
</div>
<h1>This is what you have planned for your routine</h1>
<ol id="routineWishlist">
</ol>
</div>
</div>
<script src="/static/addExercise.js"></script>
{% endblock %}
addExercise.JS
let jsonData = {}
let exerciseDataArr = []
let i = 0;
// generate list of items the user has selected for their workout
document.querySelector("#media").addEventListener("click", function (e) {
//Add Item to
if (e.target.id == "addBtn") {
e.preventDefault();
var exerciseValue = $('#exerciseChoices').find(":selected").text();
var workoutName = $('#workoutName').val();
var workoutDescription = $('#description').val();
if (workoutName == "") {
console.log("please fill out all data")
alert("please add a name")
return;
}
if (workoutDescription == "") {
console.log("please fill out all data")
alert("please add a description")
return;
}
console.log("You clicked on the Add button")
var li = document.createElement("li");
var div = document.createElement("div")
var remove = document.createElement("button");
li.setAttribute("data-id", i)
div.setAttribute("id", `exercise${i}`)
remove.setAttribute("id", "removeBtn");
remove.innerText = 'Remove';
try {
jsonData['name'] = workoutName;
jsonData['description'] = workoutDescription;
exerciseDataArr.push({ 'exercise': exerciseValue,
id: i})
} catch (error) {
console.error(error)
}
i++;
console.log(jsonData) //{"name": "workout 1","description": "My favorites"}
console.log(exerciseDataArr) //After adding 2 exercises to the list {"exercise": "2 Handed Kettlebell Swing","id": 0}{"exercise": "2 Handed Kettlebell Swing","id": 1}
var t = document.createTextNode(exerciseValue);
div.append(li)
li.append(remove);
li.appendChild(t);
document.querySelector("#routineWishlist").appendChild(div);
}
if (e.target.id === "removeBtn") {
e.preventDefault();
exerciseName = $(e.target).closest('div').attr('id');
exerciseOrder = parseInt($(e.target).closest('li').attr('data-id'));
console.log("remove " + typeof(exerciseOrder) + " " + exerciseOrder + " at " + exerciseName )
console.log("inside " + typeof(exerciseDataArr)) //object
//remove from displayed list of exercises
$(e.target).closest('div').remove()
// remove from object
for(let val in exerciseDataArr){
val = parseInt(val)
console.log(`id: ${val}`)
// if the exerciseDataArr contains id: exerciseOrder delete from exerciseDataArr
if(exerciseDataArr.hasOwnProperty("id") == exerciseOrder ){// <---does not activate unless the first 'li' is clicked.
console.log("the object has been found, now delete it")
delete exerciseDataArr[exerciseOrder]
val = undefined;
}
}
console.log(exerciseDataArr)
}
Can You post some more code ? If Possible post the HTML as well and what is the exerciseDataArr in your code it is not clearly explained
Related
I have a question. I have an input field and store the inputs in localstorage. On click (on 'add') I am adding inputs to localstorage and want to immediately append it to my ul element. I cant just append the current input as it would disappear on page reload but when I get items from localstorage, its not being displayed correctly. Ive researched this but whatever I tried, I keep getting weird results. I included the code below and also made a jsfiddle. Thanks very much!
jsfiddle: https://jsfiddle.net/codingcodingcoding/41mztdnu/
html:
<input id="title"/>
<input id="text"/>
<button id="button">Add</button>
<ul id="output"></ul>
js:
$("#button").click(function () {
var title = $("#title").val();
var text = $("#text").val();
var todos = JSON.parse(localStorage.getItem("todos")) || [];
var newTodos = {
"title": title,
"text": text
}
todos.push(newTodos);
localStorage.setItem("todos", JSON.stringify(todos))
todos.forEach(function (todo) {
$("#output").append("<li>" + todo.text + "</li>")
})
})
update: the code below does show me the current added item but disappears on page refresh since only the todo list is persistent, here 'current' cant be the whole list.
localStorage.setItem("todos", JSON.stringify(todos))
var current=JSON.parse(localStorage.getItem("info"))
$("#output").append("<li>" + current.text + "</li>")
Make another function that just populates the list so you can use it immediately when the page loads, so it doesn't start with an empty list. Make sure this function empties the existing items in the list before adding more.
$("#button").click(function() {
var title = $("#title").val();
var text = $("#text").val();
var todos = JSON.parse(localStorage.getItem("todos")) || [];
var newTodos = {
"title": title,
"text": text
}
todos.push(newTodos);
localStorage.setItem("todos", JSON.stringify(todos))
populateList();
});
function populateList() {
var todos = JSON.parse(localStorage.getItem("todos")) || [];
$("#output").empty();
todos.forEach(function(todo) {
$("#output").append("<li>" + todo.text + "</li>")
})
}
populateList();
https://jsfiddle.net/41mztdnu/7/
i want to build mini webchat - When view site i set show 5 messages and if view more, you can click button. All things are fine but when i remove 1 node, firebase auto add last node into, how can i prevent it?
Ex: I have node A,B,C,D,E,F,G. I had loaded list C,D,E,F,G but when i delete 1 in all, it auto add B into list.
<div id="messgesDiv">
<center><h3>Message</h3></center>
</div>
<div style="margin-top: 20px;">
<input type="text" id="nameInput" placeholder="Name">
<input type="text" id="messageInput" placeholder="Message" data-id="">
<input type="text" id="idproject" placeholder="ID Project">
</div>
<button id="delete">Delete Test</button>
<button id="edit">Edit</button>
<button id="loadmore">Load more</button>
<button id="showlastkey">Show last key</button>
My javascript
$('#loadmore').click(function() {
i = 0; old = first;
myDataRef.orderByKey().endAt(first).limitToLast(6).on('child_added', function (snapshot){
if( i == 0)
first = snapshot.key();
var message = snapshot.val();
if(snapshot.key() != old)
displayChatMessage(message.name, message.text, message.idproject, 'old');
i++;
console.log('myDataRef.orderByKey().endAt(first).limitToLast(6)');
});
});
$("#messageInput").keypress(function (e){
if(e.keyCode == 13){ //Enter
var name = $("#nameInput").val();
var text = $("#messageInput").val();
var idproject = $("#idproject").val();
if($("#messageInput").data("id")=='')
{
myDataRef.push({name: name, text: text, idproject: idproject});
}
else
{
myDataRef.child(key).update({name: name, text: text, idproject: idproject});
$('#messageInput').attr('data-id', '');
}
$("#messageInput").val("");
}
});
myDataRef.limitToLast(5).on('child_added', function (snapshot){
if( i == 0)
first = snapshot.key();
var message = snapshot.val();
displayChatMessage(snapshot.key(), message.name, message.text, message.idproject, 'new');
i++;
console.log(snapshot.key());
console.log(' myDataRef.limitToLast(5)');
});
function displayChatMessage(key, name, text, idproject, status){
//console.log(name + " -- " + text + " -- " +idproject);
if( status == 'new')
{
$('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).appendTo($("#messgesDiv"));
$("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
}
else
{
$('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).insertAfter($("center"));
$("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
}
}
$('#delete').click(function() {
myDataRef.child(key).remove();
$('#messgesDiv').filter('[data-id="'+key+'"]').remove();
});
Firebase limit queries act like a view on top of the data. So if you create a query for the 5 most recent messages, the Firebase client will ensure that you always have the 5 most recent messages.
Say you start with these messages:
message1
message2
message3
message4
message5
Now if you add a message6, you will get:
child_removed message1
child_added message6
So that your total local view becomes:
message2
message3
message4
message5
message6
Conversely when you remove message 6 again, you get these events:
child_removed message6
child_added message1 (before message2)
So that you can update the UI and end up with the correct list again.
There is no way to change this behavior of the API. So if you want to handle the situation differently, you will have to do this in your client-side code.
Your code currently only handles child_added. If you have add a handler for child_removed you'll see that you can easily keep the user interface in sync with the data.
Alternatively you can detect that the message is already in your UI by comparing the key of the message you're adding to the ones already present in the DOM:
function displayChatMessage(key, name, text, idproject, status){
var exists = $("div[data-id='" + key + "']").length;
if (status == 'new' && !exists) {
$('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).appendTo($("#messgesDiv"));
$("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
}
else {
$('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).insertAfter($("center"));
$("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
}
}
I'm using Django and AjaxForm to submit a form(s) that adds an item to a user's "cart". I have multiple items listed on the page, each with it's own "add to cart" button. Upon clicking a specific "add to cart" button, I use Ajax to add the item to the user's "cart" and display it in their "cart" at the top of the screen. Users can also delete an item from their cart by clicking on a given item in the cart.
I would now like to change the appearance of the "add to cart" button once it has been clicked, but I am having trouble identifying only the specific button that was clicked (and not all of the 'add to cart' buttons). How can I identify which 'add to cart' button was clicked. I added an 'id' field to my html button and have been trying to use that but have been unsuccessful....??
I have tried many different things but either they are not working or I am putting them in the wrong spot. For example, I have tried:
$('.add-to-cart').on('click',function(){
var id = $(this).attr("id");
console.log("ID: ");
console.log(id);
});
And also:
var addButtonID;
$(this).find('input[type=submit]').click(function() {
addButtonId = this.id;
console.log("ID: ");
console.log(addButtonId)
)};
Any ideas on how I can find the specifc button that was clicked so I can update the button's appearance???
My html:
{% for item in item_list %}
<form class="add-to-cart" action="/item/add/{{ item.id }}/" method="post" enctype="application/x-www-form-urlencoded">
<ul>
<li style="display: block"><button class="addItemButton2" type="submit" id="{{ item.id }}">Add to Cart</button></li>
</ul>
</form>
{% endfor %}
My javascript:
function remove_form_errors() {
$('.errorlist').remove();
}
function show_hide_cart(){
var cart = $('#cart');
var message = $('#message');
if (cart.find('li').length >= 1){
cart.show();
continueButton.show();
message.hide();
}
else {
cart.hide();
continueButton.hide();
message.show();
}
}
function process_form_errors(json, form)
{
remove_form_errors();
var prefix = form.data('prefix'),
errors = json.errors;
if (errors.__all__ !== undefined) {
form.append(errors.__all__);
}
prefix === undefined ? prefix = '' : prefix += '-';
for (field in errors)
{
$('#id_' + prefix + field).after(errors[field])
.parents('.control-group:first').addClass('error');
}
}
function assign_remove_from_cart() {
var cart = $('#cart');
$('.remove-from-cart').on('click', function(e) {
e.preventDefault();
$.get(this.href, function(json) {
remove_form_errors();
cart.find('a[href$="' + json.slug + '/"]').parent('li').remove();
show_hide_cart();
});
});
}
(function($){
$(function() {
var cart = $('#cart'),
message = $('#message');
continueButton = $('#continueButton');
assign_remove_from_cart();
// ajax-enable the "add to cart" form
$('.add-to-cart').ajaxForm({
dataType: 'json',
url: this.action,
success: function(json, status, xhr, form) {
if (json.errors !== undefined) {
// display error message(s)
process_form_errors(json, form);
}
else if(json.id == -1){
// duplicate, do nothing
console.log("json.id:%s:json.slug:%s", json.id, json.slug)
}
else {
// Hide any previously displayed errors
remove_form_errors();
// compile cart item template and append to cart
var t = _.template($('#cart-item-template').html());
$('#cart').append(t(json));
show_hide_cart();
assign_remove_from_cart();
}
}
});
});
})(jQuery);
Based on your comments, you ought to be able to drop your onClick function into a script tag at the end of your HTML page and have it function as intended (though your javascript should actually all be in a separate file that gets referenced via a script tag).
$( document ).ready(function(){
$('.add-to-cart :submit').on('click',function(){
var id = this.id;
console.log("ID: ",id);
//do something with your ID here, such as calling a method to restyle your button
$('#' + id).css("attribute","new value");
//or
$('#' + id).addClass("yourClassName");
});
});
Change the button type to 'button', and then add onClick="addToCartFunction(this);"
then in the addToCarFunction, this.id will be your item id your adding?, or you can use data-attributes to add more item details for the function to get.
if you then need to send information to the server to cache the cart, use a $.ajax jQuery call to the server.
I'm trying to show the compare at price for some product variants but I can't figure out how to only show it when there is compare at price for the variant that is greater than zero. It's showing compare at prices of $0.00.
It's using javascript to dynamically update the the price. Here's that code:
<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('purchase').removeClass('disabled'); // remove unavailable class from add-to-cart button
$('purchase').disabled = false; // reenable add-to-cart button
$('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"); // update price field
$('compare-price').innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}"); // update compare at price
} else {
// variant doesn't exist
$('purchase').addClass('disabled'); // set add-to-cart button to unavailable class
$('purchase').disabled = true; // disable add-to-cart button
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};
// initialize multi selector for product
window.addEvent('domready', function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
-->
</script>
The script works fine when I have a raw <div id="compare-price"></div>. The dynamic compare at price for each variant gets added to that div. But when there is no compare at price it still adds $0.00.
How do I hide the div when there is not a compare at price for the variant? I'm trying to do something like this:
{% if product.variant.compare_at_price %}
<div id="compare-price"></div>
{% endif %}
Anyone know how to do this?
Ok, this is what I got to work. Might not be the most elegant solution but it's working:
<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('purchase').removeClass('disabled'); // remove unavailable class from add-to-cart button
$('purchase').disabled = false; // reenable add-to-cart button
$('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"); // update price field
if(variant.compare_at_price > 0.0) {
$('compare-price').innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}"); // update compare at price
} else {
$('compare-price').innerHTML = "";
}
} else {
// variant doesn't exist
$('purchase').addClass('disabled'); // set add-to-cart button to unavailable class
$('purchase').disabled = true; // disable add-to-cart button
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};
// initialize multi selector for product
window.addEvent('domready', function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
-->
</script>
Why don't you just check the compare at price in the callback? You're handed the variant, therefore you can check the prices... and deal with them appropriately.
if(variant.compare_at_price > 0.0) {
$('compare-price').show().innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");
} else {
$('compare-price').hide();
}
I am using simplecart js. It's a really simple shop with one product. I would like to automatically redirect to the cart page when someone clicks the add to cart button.
The code for adding a product:
<div class="simpleCart_shelfItem">
<h2 class="item_name"> Awesome T-shirt </h2>
<p> <input type="text" value="1" class="item_Quantity"><br>
<span class="item_price">$35.99</span><br>
<a class="item_add" href="javascript:;"> Add to Cart </a></p>
</div>
The listener in simpleCart.js:
/* here is our shelfItem add to cart button listener */
, { selector: 'shelfItem .item_add'
, event: 'click'
, callback: function () {
var $button = simpleCart.$(this),
fields = {};
$button.closest("." + namespace + "_shelfItem").descendants().each(function (x,item) {
var $item = simpleCart.$(item);
// check to see if the class matches the item_[fieldname] pattern
if ($item.attr("class") &&
$item.attr("class").match(/item_.+/) &&
!$item.attr('class').match(/item_add/)) {
// find the class name
simpleCart.each($item.attr('class').split(' '), function (klass) {
var attr,
val,
type;
// get the value or text depending on the tagName
if (klass.match(/item_.+/)) {
attr = klass.split("_")[1];
val = "";
switch($item.tag().toLowerCase()) {
case "input":
case "textarea":
case "select":
type = $item.attr("type");
if (!type || ((type.toLowerCase() === "checkbox" || type.toLowerCase() === "radio") && $item.attr("checked")) || type.toLowerCase() === "text") {
val = $item.val();
}
break;
case "img":
val = $item.attr('src');
break;
default:
val = $item.text();
break;
}
if (val !== null && val !== "") {
fields[attr.toLowerCase()] = fields[attr.toLowerCase()] ? fields[attr.toLowerCase()] + ", " + val : val;
}
}
});
}
});
// add the item
simpleCart.add(fields);
}
}
]);
});
From what I have read it is bad practice to use href="javascript:;" is it a good idea to change it to a click function that will add the item to the cart then go to the cart page or just add the redirect? How do I go about this? Thanks
I’m not sure how the simplecart APi works, but you can try something like:
// add the item
simpleCart.add(fields);
window.location='/cart/'; // change to your cart route
If the cart saves to a server cookie, you might need to put this in a callback.