We Keep Coding

jQuery can't catch the parent element

I am trying to access the parent element up to the button element to modify its css. I can access the span element via id. But when I try to go to the parent img it says undefined
Here is my html code
<button type="button" class="buttonLike">\
<img src = "../Image/thumbsUp.png" clas="test">\
<span class="postID" id=' + idPost + '>' + likesPost + '</span>\
</img>\
</button>\
and here is my jquery code that access the span element
$.each(result, function (index,data) {
var liked = data.liked;
if (liked == true) {
console.log($("#" + postId).parent("img").attr("src"));
}
});
How can i do this right.

img element is self-closing. try this:
<button type="button" class="buttonLike">\
<img src = "../Image/thumbsUp.png" clas="test">
<span class="postID" id=' + idPost + '>' + likesPost + '</span>\
</button>
and get it with jquery:
console.log($("#" + postId).parent().find("img").attr("src"));

I think you should not wrap the span inside the img. that will make more easy for you. But if you still want to. try this.
$("#postId").closest("img");

try using this
.parent().find('img').attr('src')
console.log($("#idPost").parent().find('img').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttonLike">
<img src = "Image/thumbsUp.png" class="test">
<span class="postID" id='idPost'>likesPost </span>
</button>

I have closed the image and made the span as sibling of parent;
In this code snippet I have provided both jquery approach and pure js approach. Hope this helps.
//jquery approach
console.log($(".postID").siblings('.test').attr("src"));
//pure js
console.log(document.getElementsByClassName("postID")[0].previousElementSibling.getAttribute('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttonLike">
<img class="test" src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg"/>
<span class="postID" id=' + idPost + '>' + likesPost + '</span>
</button>

how to hide tool tip in js

I have tooltip for each table row to show edit options. I make it visible using this code:
function popupFunction(p) {
var popup = document.getElementById("sp" + p);
popup.classList.toggle("show");
}
It's working well. But now the problem is how to hide it if I click any other places?
Here is my html:
<div class='popup' id='eds'>
<i class='fa fa-ellipsis-v' id =" + values.items[i].id + " onclick='popupFunction(this.id)'></i>
<span class='popuptext' id =sp" + values.items[i].id + ">
<div onclick='edit(this.id)' id =ed" + values.items[i].id + ">Edit</div>
<br/>
<div onclick='deleteFunction(this.id)' id =de" + values.items[i].id + ">Delete</div>
</span>
</div>

if show class makes an element to be rendred as tooltip, then removing it, should hide it.
document.getElementById(some_id).classList.remove("show")
should do the trick, i believe.

JQM - Add image to collapsible header dynamically

I have a collapsible set for days of the week, with user's activities inside it that represented as a listview inside the collapsible-set.
<div data-role="collapsible-set" id="calCol" data-collapsed-icon="arrow-d" data-collapsed="true" data-iconpos="right">
<div data-role="collapsible">
<h1 id="day1Header">Sunday<img src="#" /></h1>
<ul id="day1" data-role="listview">
</ul>
</div>
<div data-role="collapsible">
<h1>Monday</h1>
<ul id="day2" data-role="listview">
</ul>
</div>
...
All the content for the user's activities i take from my database so i insert all my content dynamically like this:
var userActivitiesObj = JSON.parse(data.d);
for (var i = 0; i < userActivitiesObj.length; i++) {
for (var j = 0; j < userActivitiesObj[i].time.length; j++) {
var listItem = "<li style='background-color: " + userActivitiesObj[i].hobColor + ";'>";
listItem += userActivitiesObj[i].actName + " - " + userActivitiesObj[i].actAddress + " - ";
listItem += userActivitiesObj[i].time[j].startTime + "-" + userActivitiesObj[i].time[j].endTime;
listItem += " (" + userActivitiesObj[i].time[j].audiance + ")</li>";
$("#day" + userActivitiesObj[i].time[j].day).append(listItem);
$("#day" + userActivitiesObj[i].time[j].day).listview("refresh");
}
}
One last thing that left for me to do is to add image of every activity to the header of that day.
When i have tried to do it in html, it worked flawlessly:
<h1 id="day1Header">Sunday<img src="#" /></h1>
but when trying to do it dynamically, it doesn't work correctly.
That what i have tried to do:
$("#day1Header").html($("#day1Header").html()+"<img src='#'");
and:
$("#day1Header").append("<img src='#'");
I know that i am missing here something like the .list("refresh") function, but i have no idea what is that.

jQuery Mobile adds an anchor tag with class ui-collapsible-heading-toggle within the header and places the collapsible title there. So you can remove previous images and append the new image like this:
$("#day1Header .ui-collapsible-heading-toggle img").remove();
$("#day1Header .ui-collapsible-heading-toggle").append('<img src="https://placeimg.com/44/22/tech" />');
DEMO

Issue adding a unique ID to an HTML attribute using jQuery

I am having an issue changing the ID of HTML attributes using JQuery.
This is what I have been using:
$(document).ready(function () {
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
This the HTML:
<div id="Foo">
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
<hr></hr>
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
</div>
I am producing the HTML using another JQuery script that creates it, iterating through an object creating a title and hiddenDiv divs for each element that exists in the object.
jQuery Script that produces the HTML:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
Both scripts execute when the document is ready.

Looks like elements are not created on DOM ready. You need to add the ids to them just after appending the content. like this:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
Demo

Jquery Tabs created dynamically with dynamic naming assignments

I am using the jquery ui tabs to create dynamic tabs on the fly which will start off without any content. From what I can tell my code is building everything and putting it in the proper places, but jquery is not recognizing them as tabs. How would I get it to recognize the new tabs that were created after page load?
The html code:
<div class="main">
<div>
<button id="new">button</button>
</div>
<div id="tabs">
<ul>
<li>View1</li>
<li>View2</li>
<li id="createView">Create New</li>
</ul>
<div id="tabs-1">
<p>something on this page</p>
</div>
<div id="tabs-2">
<div>
<p>something else on this page</p>
</div>
</div>
</div>
</div>​​​​​​​​
the Javascript:
//Tabs functionality
$('#tabs').tabs();
//Create new view
var tabNum = 3;
$('#new').click(function() {
$('#tabs ul').append('<li>' + '' + 'newitem' + '' + '</li>');
$('#tabs').append('<div id="' + 'tabs-' + tabNum + '">' + '<div>new</div>' + '</div>');
var NewViewNum = 'tabs-' + tabNum;
$(NewViewNum).focus();
tabNum++;
});​

The jQuery UI Tabs have a refresh method you can use per the documentation.
Try calling:
$("#tabs").tabs("refresh");