We Keep Coding

select object using custom "data-" attribute instead of id

I am trying out tinymce and would like to submit a custom form that contains several instances of the editor. Selecting the content using a basic id is straight forward,
<div id="myDivInline" data-uuid="myUuid"><p>This is to be replaced by TinyMCE <br><br>CLICK ME TO LOAD TinyMCE</p></div>
var myVar = tinyMCE.get('myDivInline').getContent();
However I would like to select the object based on a custom data- attribute. Is this possible? for example, the below fails (probably due to bad syntax structure inside .get('div[data-uuid="myUuid"]')
<div id="myDivInline" data-uuid="myUuid"><p>This is to be replaced by TinyMCE <br><br>CLICK ME TO LOAD TinyMCE</p></div>
var myVar = tinyMCE.get('div[data-uuid="myUuid"]').getContent();

you can try going with something like this:
$("div[data-uuid='myUuid']")
where you simply use selector you would use in css

Javascript retrieve what in the tag using class attribute

im working on a Asp.net MVc application to create a scheduler application for workers.
The schedule is auto-generate using a JavaScript library called: Dhtmlx Scheduler.
upon populating the data, it creates some Html and places the content.
I would like to retrieve the content and was wondering if it's possible by obtaining the info from its class.
Pic for reference:
I am trying to retrieve the "Abel Toribio" so i can do a reverse search in my database for his name and eventually display a tooltip over that td with further information about the person.
So far I have tried:
var engName = document.getElementsByClassName("dhx_matrix_scell");
alert(engName[0].getData());
alert(engName[0].getContent());
alert(engName[0].getText());
alert(engName[0].getValue());
They all seem to give me undefined.
Thanks!

engName[0].innerHTML - for contents inside the tag 'html'.
engName[0].outerHTML - for contents inside the tag wrapped in the tag.
engName[0].textContent - for contents inside the tag 'text'.

As you tagged jquery as well,for tooltip purpose, you can write mouseover event using jquery this way :
$(".dhx_matrix_scell").on("mouseover",function(){
alert($(this).text());
// do something here
});
if you want to get all, you can get them like this:
$.each(".dhx_matrix_scell",function(){
alert($(this).text());
});

Magento : Hide html elements using javascript

I'm developing an extension and I want to know how to hide an html element:
I tried this code, but it didn't work
$$('#myDiv').hide();
Where is my error?

In Jquery
$('#myDiv').hide(); //You have to include jquery library in your file
In Javascript
document.getElementById("myDiv").style.display = "none";

Possible typo? Extra "$".
Jquery:
$('#myDiv').hide();
And are you trying to do it on a click?

only one dollar sign needed
$('#myDiv').hide();

Initially this question was tagged magento.
So I assume the issue is inside a magento project.
Magento uses prototype by default.
In prototype you can hide an element like this.
$('element_id_here').hide();
$ means getElementById.
If you want to hide a set of elements, let's say with the class some_class do this:
$$('.some_class').each (function(elem){
$(elem).hide();
})
it also works for ids the same way but it's kind of useless since the id must be unique in the page.
$$('#myDiv').each (function(elem){
$(elem).hide();
})

as when I first see this post it contains a magento tag. And many of the beginners do have problem with jquery and prototype in magento.
the code to hide html with id selector in jquery is:
$('#myDiv').hide(); //# for id selector
but for prototype, its:
$('myDiv').hide(); //no # needed for id selector
but even if it do not work then open web developer tool (Ctrl + Shift + C) of your browser and look for console tab. there you might be getting error.

How to add an HTML attribute with jQuery

Well, I have this jQuery image slideshow that uses the attribute "control" inside an <a>. Seeing how it didn't validate I searched for a way to add this attribute inside my HMTL via jQuery but I didn't really find anything relevant. Now I don't really care about how valid my page is, but I'm really curious in how to add an HTML attribute inside an HTML tag.
In case I wasn't clear enough with my explanation, I have this code:
<a id="previous" control="-6" href="#"></a>
And I want to add control="-6" with jQuery.

Use jQuery's attr function
$("#previous").attr("control", "-6");
An example
// Try to retrieve the control attribute
// returns undefined because the attribute doesn't exists
$("#previous").attr("control");
// Set the control attribute
$("#previous").attr("control", "-6");
// Retrieve the control attribute (-6)
$("#previous").attr("control");
See this example on jsFiddle
You can alternatively use data function to store values on elements. Works the same way, for example:
$("#previous").data("control"); // undefined
$("#previous").data("control", "-6"); // set the element data
$("#previous").data("control"); // retrieve -6
Using data you can store more complex values like objects
$("#previos").data("control", { value: -6 });
($("#previos").data("control")).value; // -6
See a data example on jsFiddle

Since the jQuery version has been well covered here, I thought I'd offer something different, so here a native DOM API alternative:
document.getElementById('previous').setAttribute('control','-6');
Yes, I know you asked for jQuery. Never hurts to know the native way too. :o)

Let me see if I understood you.
You have, for example, the code:
<a id="previous" href="#"></a>
And by jQuery you want it to be:
<a id="previous" control="-6" href="#"></a>
Is it right?
If it is. You just have to do:
$('#previous').attr('control', -6);
If an attribute doesn't exists it's created by jQuery.
So, to remove it you can do:
$('#previous').removeAttr('control');
What you're doing doesn't respect the html rules and everything else, but it works fine, a lot of plugins do the same. ;D
I hope this could be helpful!
See you!

Try this:
$('#previous').attr('control', '-6');
Why? the $.attr(); function of jQuery allows you to add, get or update attributes (class, id, href, link, src, control and everything else!).

$("#previous").attr("control", "-6");

HTML:
<a id="previous" href="#">...</a>
jQuery:
$('#previous').attr('control', '-6');

jQuery's attr will do that. Example:
$("#previous").attr("control", "-6");
Also check out this example at http://jsfiddle.net/grfSN/.

jQuery tooltip + ajax content

I'm trying to implement a simple rollover tooltip for images on a page where when you roll over an image, you get a little tooltip window and have the contents loaded from a database via AJAX.
I can hack this together quickly but I wanted an elegant way of doing this without using any inline JS.
So my question is: If I capture the rollover event inside my external .js file, how do I pass it the database ID?
I'm using jQuery so I would do something like this:
$('.item_roll').mouseover(function() {
//show tooltip and load ajax content
}
and my HTML would be something like this:
<img src="thumb.png" class="item_roll" />
Without calling a function from the img tag, how do I send the JS call above the database id? I hope that makes sense.
Thanks.

I recommend having both a class and an id in the image tag:
<img src="thumb.png" id="id_28436379" class="item_roll" />
Then in your jQuery event, you can access that like so:
$(".item_roll").mouseover(function(event){
alert( event.target.id.split("_")[1] ); // displays 28436379
});
This should let you access the database id by making it the id of the image tag.
EDIT: After reading some helpful comments, I've changed my answer so that the id does not start with an integer, since this is nonstandard and might not work in all browsers. As you can see, the split/[] code extracts the id number from the id string.