We Keep Coding

clik to load more data then click to hide then click load again does not work

I am a bit confused here. I have a div which contains comments. Then when you click on the more comments icon, it calls php via ajax and appends the results to a div then slides it down. That part works fine. Then I have a hide icon which when you click on it, it collapses the expended div that was showing more comments. The problem, I am having is that if I collapse the div then click on show more comments again, the div no longer expands.
Below is the code which handles the more and hide clicks. Any tips would be appreciated.. Thanks
$("[id^='show_more_comments_']").on( 'click', function(e) {
var pagenum = $(this).data('newpage');
var photoid = $(this).data('photoid');
var commentsdiv = 'morecomments_' + photoid;
var moredots = 'show_more_comments_' + photoid;
var lessdots = 'hide_more_comments_' + photoid;
$.ajax({
type: "POST",
url: "showmorecomments.php",
data: {page: pagenum, photoid: photoid},
success: function(data){
$("#" + moredots).data('newpage', pagenum + 1);
$("#" + lessdots).show();
$(data).hide().appendTo("#" + commentsdiv).slideDown(500);
}
});
});
$("[id^='hide_more_comments_']").on( 'click', function(e) {
var photoid = $(this).data('photoid');
var commentsdiv = 'morecomments_' + photoid;
var moredots = 'show_more_comments_' + photoid;
var lessdots = 'hide_more_comments_' + photoid;
$("#" + commentsdiv).slideUp(500);
$("#" + lessdots).hide();
$("#" + moredots).data('newpage', 1);
$("#" + moredots).data('photoid', photoid);
});
If I set an alert to see the data values, they are correct. Its just no longer expanding the comments afyer I close them and try to open them again.
Thanks
JT

Figured it out, slideUp hides the comments div so you must use a callback function to show the comments div again.
$("#" + commentsdiv).slideUp(500, function(){
$(this).empty().show()
})
Check this code snippet:
var data = '<div id="content">'
data += 'These are the comments to be added to the comment div'
data += '<ul>'
data += ' <li>Comment 1</li>'
data += ' <li>Comment 2</li>'
data += ' <li>Comment 3</li>'
data += '</ul>'
data += '</div>';
$(function() {
$("#showBtn").click(function() {
$(data).hide().appendTo("#morecomments_1").slideDown(500)
})
$("#hideBtn").click(function() {
$("#morecomments_1").slideUp(500, function(){
$(this).empty().show()
})
})
})
<div id="morecomments_1"></div>
<button id="showBtn">Show</button>
<button id="hideBtn">Hide</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery - Updating and saving changes using local storage

I have a function that Creates new items and allows you to Delete, Update and Save the inputs on these items using localStorage
However, if I have more than one item and then update and save the changes, those changes are applied over all items.
The problem is encountered at the $(".save").click(function() but I'm not sure I have set up my .items with a proper array.
Since I use localStorage the working code can be found in the pen below:
https://codepen.io/moofawsaw/pen/NoBQKV
window.localStorage.clear();
//create localStorage item
if (!localStorage.getItem("_storage")) {
localStorage.setItem("_storage", "");
}
//set data to localStorage function
function saveData() {
localStorage.setItem("_storage", $("#content").html());
}
// Open the create dialgoue:
$(".add").on("click", function() {
$(".create").toggle();
});
//Save the entered inputs and post the item:
$(".post").click(function() {
var id = $(".createtext").val();
var createtitle = $(".createtitle").val();
var item = "";
if (id[0]) {
for (var i = 0; i < id.length; i++) {
item += "<div>" + id[i] + "</div>";
}
} else {
item = "<div>Click update to add a card</div>";
}
$("#content").append(
'<div class="item">' +
'<div class="title">' +
createtitle +
"</div>" +
"<div class='text'>" +
id +
"</div>" +
'<button class="delete">Delete</button>' +
'<button class="update">Update</button>' +
"</div>"
);
$(".createtitle").val("");
$(".createtext").val("");
$(".create").toggle();
saveData();
});
//Close out of creating a new item
$(".close").click(function() {
$(".createtitle").val("");
$(".createtext").val("");
$(".create").toggle();
});
//Get inputs and open edit window to update the items:
$("#content").on("click", ".update", function() {
var item = $(this).closest(".item");
$(".updatetext").val(
$(this)
.closest(".item")
.find(".text")
.text()
);
$(".updatetitle").val(
$(this)
.closest(".item")
.find(".title")
.text()
);
$(".edit").toggle();
});
//Save changes and update the items (error:changes all items when clicked):
$(".save").click(function() {
var id = $(".updatetext").val();
var title = $(".updatetitle").val();
var item = "";
if (id[0]) {
for (var i = 0; i < id.length; i++) {
item += "<div>" + id[i] + "</div>";
}
} else {
item = "<p>Click edit to add a card</p>";
}
$(".item").each(function() {
$(this).html(
'<div class="title">' +
title +
"</div>" +
"<div class='text'>" +
id +
"</div>" +
'<button class="delete">Deleted(2)</button>' +
'<button class="update">Updated(2)</button>'
);
});
$(".updatetext").val("");
$(".updatetitle").val("");
$(".edit").toggle();
saveData();
});
//Discard any of these changes:
$(".discard").click(function() {
$(".updatetext").val("");
$(".updatetitle").val("");
$(".edit").toggle();
});
//Delete an item:
$("#content").on("click", ".delete", function() {
$(this)
.closest(".item")
.remove();
saveData();
});
$(function() {
if (localStorage.getItem("_storage")) {
$("#content").html(localStorage.getItem("_storage"));
}
});

Point is, you call .each() in your update callback.
$(".item").each(function() {
$(this).html(
'<div class="title"> ....'
);
});
This literally means "Find all DOM elements with item class and replace their contents with given html.
But you need to replace contents of the one specific element, on which Update button was clicked. To do so, you need to persist that element somehow.
One of the ways to do that with minimum changes to your code - introduce a variable in a scope available for both update and save functions. But in your case it would be a global variable, and those are not generally a good idea.
So I'd suggest to wrap all your code into a function (like $(function() {});.
Then you can introduce a local variable:
$(function () {
// define it
var $selectedItem;
// assign a value in the update click callback
$('#content').on('click', '.update', function () {
$selectedItem = $(this).closest('.item');
// ...
});
// read the value in the save click callback
$('.save').click(function () {
// ...
$selectedItem.html('...');
// ...
});
});
Example: https://codepen.io/anon/pen/GzXaoV

Javascript - Getting removed item name from table?

So I have an table. By click of a button, information will be added there, so each item has also X button, which removes them from the list. I've been trying to do that, if you click that X button, then it will output to console the item name which you deleted. How could I do that?
Here's the function
function sitaSeen(img, name, condition, price) {
$('tbody').append("<tr id='itemCart'><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>");
Which is called, when item has to be added.
Here's the X button code
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').ignore('span').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
There's also kind of my try, but ofc it wont work.

There is no ignore() method in jQuery so it will throws error in console. So either clone the tr and remove span from cloned object and then get text or get all td which is not contains span and get text.
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').clone().remove('span').text();
// or
// var removedname = $(this).closest('tr').find('td:not(:has(span))').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
UPDATE : Since you just want the second column you can simply use :nth-child or :eq() selector(or eq()).
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').find('td:nth-child(2)').text();
// or
// $(this).closest('tr').find('td:eq(1)').text();
// or
// $(this).closest('tr').children().eq(1).text();
console.log(removedname);
$(this).closest('tr').remove();
});
});

I think it might be better to use:
```
// better way to get to the tr element
var trElem = $(this).parentNode.parentNode;
```
The parentNode attribute is a better way to access the parent of an element.

The item name is the second td so you can use:
var removedname = $(this).closest('tr').find('td:eq(1)').text();
Because the ID have to be unique I added a new parameter to your function.
function sitaSeen(seq, img, name, condition, price) {
$('tbody').append("<tr id='itemCart" + seq + "'>" +
"<td><img src=" + img + "></td>" +
"<td>" + name + seq + "</td>" +
"<td>" + condition + "</td>" +
"<td>$" + price + "</td>" +
"<td><span>X</span></td>" +
"</tr>");
}
$(function () {
$('#addRow').on('click', function(e) {
var seq = +$(this).attr('data-seq');
$(this).attr('data-seq', seq + 1);
sitaSeen(seq, 'img', 'name', 'condition', 'price');
});
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').find('td:eq(1)').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="sweet-container">
<button id="addRow" data-seq="1">Add Row</button>
<table>
<tbody>
</tbody>
</table>
</div>

Div not responding to jQuery function

I have a bunch of products that will be loaded(append-ed) to the page when the user loads the page the first time. I use a $.post() call to the database and then append the data as a number of divs into a container.
$(function() {
var profile_looks = $('#profile_looks');
$.post("apples.php", function(json) {
var looks = $.parseJSON(json);
profile_looks.prepend(
(some code here)
)
}); // close $.post()
After these products are loaded, I want the products to change background color on hover.
var product_tags = $('.product_tags');
product_tags.mouseenter(function() {
$(this).css('background-color', 'white');
});
}); // close $(function()
However step 2 does not work, meaning when I mouseover the product_tags, they do not change. Why aren't the product_tags div responding to the function call?
Full code below
$(function() {
var profile_looks = $('#profile_looks');
$.post("apples.php", function(json) {
var looks = $.parseJSON(json);
var page_post = "";
$.post('oranges.php', function(products_data) {
var products_display = $.parseJSON(products_data);
for(i = 0; i < looks.length; i++) {
var fruits = products_display[i];
for(var key in fruits) {
var test = "<div class='product_tags' style='color:" + "black" + "' >" + "<span class='type' style='font-weight:600'>" + key + "</span>" + " " + "<span class='title'>" + fruits[key] + "</span>" + "</div>";
var mega = mega + test;
}; // the 2nd for-loop finishes, and re-runs the first for-loop
}; // b=0 timer loop finishes
profile_looks.prepend(
"<div class='look'>" + "<div class='look_picture_container'>" +
"<img src='" + "user_pictures/" + username_cookie + "/" + looks[i][0] + "'>" +
"<div class='heart'>" +
"<img src='" + "../function icons/hearticon black.png" + "'>" +
"<div class='heartcount'>" +
"</div>" +
"</div>" +
"<div class='product_tags_container' style='background-color:" + looks[i][3] + "' >" + mega + "</div>" +
"</div>" + // class="look_picture_container"
"<div class='post_description'>" +
looks[i][1] +
"</div>" + // class= "post_description"
"</div>"); // class="look"
var mega = "";
}
}); // for the $.post(displayproducts.php)
}) // for the $.post(displaylooks.php)
var product_tags = $('.product_tags');
product_tags.mouseenter(function() {
$(this).css('background-color', 'white');
});
product_tags.mouseleave(function() {
$(this).css('background-color', 'transparent')
});
}); // end of $(function()

It doesn't work because the elements doesn't exist yet when you try to bind the events to them.
You can use delegated events, which you bind to an existing element where the elements will end up:
profile_looks.on('mouseenter', '.product_tags', function() {
$(this).css('background-color', 'white');
}).on('mouseleave', '.product_tags', function() {
$(this).css('background-color', 'transparent')
});

Your data is arriving asynchronously, while you're creating the "hover rule" (attaching the event handlers) synchronously.
This means that when you write:
var product_tags = $('.product_tags');
product_tags.mouseenter(function() {//...
product_tags is a collection of elements that exist right after you dispatch the async POST calls. (The answer to these POSTs didn't arrive yet at this point, so the DOM you want to attach to was not generated either.)
To fix this, trigger the attaching of these mouseenter event handlers after the async answer has arrived (from the same callback you're using to work with the returned data), and you've set up the DOM you need to work with.
Note: the other answers bring up good points about delegating your event handlers via an already existing container using jQuery's .on(), which might prove to be a cleaner, more declarative solution.

As product_tags are dynamically generated elements, you need to use .on API to delegate the events for such elements. .on API
Use this
profile_looks.on({
mouseenter: function () {
$(this).css('background-color', 'white');
},
mouseleave: function () {
$(this).css('background-color', 'transparent')
}
}, '.product_tags')

jQuery .css() does not update element

function createList() {
var list = '';
var listID;
$.each(obj_JSON.colors, function(index, value) {
listID = "clr_" + index;
list = list + "<div id=" + listID + " alt='" + obj_JSON.colors[index].name + "'></div>"
clrList.html(list);
updateListColours(listID);
});
}
function updateListColours(x) {
$('#' + x).css({"background-color":"rgb(255, 0, 0)", "height":"25px", "width":"25px"});
}
When I watch it get created. The first div gets the style applied to it. Then the second gets created and the style is wiped from the first div and applied to the second and it goes on until the list is complete...
Why is this happening and how can I apply the style to each div? Expecting answer that shows i've done something really stupid as usual

Because this line clrList.html(list);, you are removing the previous element then add new created.
Instead, do it with:
$.each(obj_JSON.colors, function(index, value) {
listID = "clr_" + index;
list = "<div id=" + listID + " alt='" + obj_JSON.colors[index].name + "'></div>"
clrList.append(list);
updateListColours(listID);
});

There's a much easier solution:
function createList() {
$.each(obj_JSON.colors, function() {
var d = document.createElement('div');
d.setAttribute("alt",this.name);
d.className = "listcolour";
clrList.appendChild(d);
// ^ assumes `clrList` is a DOM node, not a jQuery object
});
}
And CSS:
.listcolour {
width: 25px;
height: 25px;
background-color: #f00;
}