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.

Load Modal dialog by injecting HTML with JQuery

I have the following function on my JS file that has defined the HTML code for a Modal dialog that is defined in here
I've copied the HTML code and assigned into a variable on my JS function:
function loadModalDialog(p1) {
var modal = '<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
' <div class="modal-header">' +
' <button type="button" class="close" data- dismiss="modal" aria- hidden="true" >×</button>' +
' <h3 id= "myModalLabel"> Modal header </h3>' +
' </div>' +
' <div class="modal-body">' +
' <p>One fine body…</p>' +
' </div>' +
' <div class="modal-footer">' +
' <button class="btn" data- dismiss="modal" aria- hidden="true"> Close </button>' +
' <button class="btn btn-primary"> Save changes </button>' +
' </div>' +
'</div>';
}
Also, I have another JS function that calls loadModalDialog but at this point I am not sure how to inject the html that I have on my modal var into the DOM once I am inside of above function so I can display the modal dialog.
BTW, I want to inject the html through the JS function because eventually I will change the body of the dialog and it will change dynamically according p1 value.
BTW, the line of code that is calling loadModalDialog looks like this:
PopUp
Any idea how it should work?

Might be an approach. The trick is to establish a proper selector to wich the dialog() function could be called:
$("<div>Sample of an injected dialog</div>").dialog();
Is't actually very easy if you watch the jquery sample in contrast
$( "#dialog" ).dialog();
You simply replace the selector with concrete text (no meta chars).
If you want to execute a js function right after the dialog has loaded, you inline that function and provide it's parameters via JSON stringification. Like this
$("<div id='difflv2d'></div><script>drawGraph("
+ JSON.stringify(sd.side) + "," + JSON.stringify(sd.id) + ","
+ JSON.stringify(sd.title) + "," + JSON.stringify(sd.num) + ","
+ JSON.stringify(sd.data) + ")</script>").dialog();
In the sample above, the drawing function selects the div given by id 'difflv2d' and puts its stuff onto it. Since the div already is part of the dialog (just loaded), the graphic appears on that dialog. Stuff to draw is read out of the variables provided properly.
Here is a reference: on the fly div

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

Why won't mailto include link parameters?

When this code runs the alert box comes up with the link that includes &list=groceries and &email=tim#sitebuilt.net. When the mailto: fires and brings up the email window those parameters are missing and I can't figure out why. the length of the string doesn't seem to matter.
This code has all it needs to run. You can run it here: http://jsfiddle.net/mckennatim/rRerR/
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="email" id="shemail" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="mailit" value="mail it"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
$('body').on('click', "#mailit", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
repo = "Sebaza";
list = "groceries";
semail = $("#shemail").val();
//(semail);
urri ='mailto:'+ semail + '?subject=share this list with me' + '&cc=' + semail + '&body=Hi, I think it would be cool if we shared this ' + list +' list on our phones. That way when either of us modified it we would see the update. http://10.0.1.18/webeshoppin/stuff2get/www/food2buy.html?repo=' + repo + '&list=' + list + '&email=' + semail ;
window.location = urri;
alert('clicked ashare ' +urri);
});
</script>
</body>
</html>

The '?' and '&' characters are being stripped out by the parser of the mailto link.
Those characters need to be encoded. Try replacing with:
? = %3F
& = %26
so, that JS line would look like:
urri ='mailto:'+ semail + '?subject=share this list with me' + '&cc=' + semail + '&body=Hi, I think it would be cool if we shared this ' + list +' list on our phones. That way when either of us modified it we would see the update. http://10.0.1.18/webeshoppin/stuff2get/www/food2buy.html%3Frepo=' + repo + '%26list=' + list + '%26email=' + semail;