Develop Reference

jquery .html() function does not give data attribute set value

i have a piece of js code that takes the html code of an element in order to send it over for saving at the server side. The html itself is dynamically generated and the elements inside it have each a data-target attribute which is also set dynamically. So before sending the string of html to be saved the .html() of jquery is used like:
var SaveString = $('#ElementID').html();
the html I get, does not include the values of the data-target attribute of each child element and instead those appear blank
data-target=""
anyone could have a clue about what's going on there?

This is because when you use the data() method to store information with an element it is stored in an object which jQuery uses internally as a cache. The information is not added to the DOM.
If you want to add the data-* attribute to the DOM, you would need to use attr() to set it, eg:
$element.attr('data-target', 'foo');
It will then be accessible when you retrieve the html() of a parent element.
Example fiddle

How to set the ID of a Dojo widget's inner input element?

Dojo converts several "ordinary" input elements into a more complex node structure. For example, a Dojo dijit/form/Select results in a widget composed of a table instead of a <select> element. dojox.form.Uploader converts into something where the id is mapped to a span and not to a <input id="myId" type="file" element. etc etc.
For accessibility, I need to map a label to an input widget, and running my website through Wave generates a lot of red flags because label for values do not match an input id.
What's the best way round this issue?

You can set an id property on most widgets, which should be put on the inner <input> node that you desire. Take a look at this fiddle for an example. If you open up your HTML inspector for the TextBox widget, you will see that the outer node has an id of "widget_[my id]" and a widgetid of the id you passed to the widget. Digging into the contents of that outer div, you will see that the actual <input> element indeed has the desired id that I passed in.
However, it seems that for more complex widgets that use a hidden <input> to store the value, you have to explicitly set the id of the valueNode property. You can see an example in this fiddle.
So you can create your widget like programmatically like this:
var select = new Select({
... widget properties
});
select.valueNode.id = "my_id"; // probably best to use dom-attr to set this.
If your widget is created declaratively, then you will need to get access to it via the registry, an attach point, or dijit#byId.

How to access elements from a certain form and certain type with jquery

so I have a page with multiple forms and I would like to be able to access input elements of type="datetime" within a particular form. I know I can do $('input[type="datetime"]') but that would give me all input tags on the page. I also cannot use the "form" attribute because not all browser use it (Sigh IE). Worse scenario for me is to do something like:
$(document.forms["..."].elements).each(function() {
if (this.type="datetime") {.....}
});
but I am sure this can be done in jQuery with one selector. Can someone tell me how do this with one selector?

Add id to your form and then select DOM inside of that form as below.
$('#form input[type="datetime"]')

Without seeing some HTML this is just a shot in the dark. But if you give your forms an id you can do:
$("#yourFormId input[type='datetime']");
If you do not have ids, but you know the number, then this might do it:
$("form:eq(4) input[type='datetime']");

There are multiple ways to do it
Solution 1.
use descendant selector
ex:
$('#yourform input[type="datetime"]') //or
$('.yourform input[type="datetime"]') //or
$('form:eq(3) input[type="datetime"]')
Solution 2:
Use context based look up
Ex:
$('input[type="datetime"]', yourform)

How to name a Javascript Function specific to id of a div encapsulating it in ASP.NET MVC

I have a partial View, which I am trying to load twice onto a cshtml file.
Now inside my partial View I have a javascript function as well. At this point, when I load my
cshtml onto the page, I will have two Javascript functions with same name.
I want to avoid this kind of scenario and name the Javascript function uniquely depending upon the Model which I am binding the Partial View to.
Please Not I could achieve the uniqueness for each control inside my partial by associating it with a parameter like "#Model.Id". But I am unable to apply the same kind of thing for uniqueness of Javascript function.
I am sorry for my Bad English. Kindly let me know if you need additional details.

Instead of having many functions with different names for each partial you could have a single javascript function which operates on each control. So for example you could assign a class to those controls and then write your function under the form of a jQuery plugin attached to all controls with this classname.
Now the function could be declared inside a separate javascript file without mixing markup and javascript in a partial which is a bad design. The plugin could then be simply attached to all controls with this class with a standard jQuery syntax:
$(function() {
$('.someClass').myFunction();
});
You could also use the HTML5 data-* attributes on your DOM elements to associate some metadata with them such as an unique identifier coming from your model. This metadata will then be accessible in your jQuery plugin.
For example:
<div class="someClass" data-id="#Model.Id">
This is some div with associated metadata
</div>

In order to achieve scenario like that you can use data-attribute.
For example we have identical html code surrounded by a div, those div's had different id.
Each div will have a data-attribute and with jquery you can catch an event (Like Click)
Now Code Example
HTML
<div id="id1" data-attribute="doSomething">Element</div>
<div id="id2" data-attribute="doSomething">Element</div>
In your case those div represent the results coming from the partial view
also you can change the value store in the id attribute to come from your model something like id="id#{Model.Id}"
JQuery
$("div[data-attribute=doSomething]").click(function() {
alert("Clicked element: " + $(this).prop("id"));
});
Fiddel Example
I am using attribute selector of Jquery to achieve it
Note That you can achieve it also by defining a class attribute.
But I think you should use this when you actually need a class otherwise use custom attribute like data-value="something"

JS/DOM selector scoping

Is it possible to have some sort of Id scoping when manipulating DOM with JS?
I use jQuery as my JS framework.
For example:
Is there any mechanism that would allow to select someDiv children of first or someDiv children of second, or do all ids on the page have to be unique?
I know this would be doable using classes (jQuery selector would be .first>.someDiv), but is this doable for the id property as well?
Edit: for clarification, here's a more complete example:
File picture_editor.php:
...
JS script for this editor, that needs to manipulate picture_id
...
File main_view.php:
...
Script that manipulates picture_id
...
include(picture_editor.php);
...
Now in the case where picture_editor is included in a file (like main_view) that has an element with the same id as elements in picture_editor, something somewhere is going to stop working (whether it's some script in picture_editor or main_view, or both).
Question: How do you go around that?

HTML id attribute, Definition and
Usage:
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or by
CSS to make changes or style the
element with the specified id.
From http://www.w3schools.com/tags/att_standard_id.asp

All ids need to be unique, so I don't think so.

If your ids are not unique, then your page is not valid HTML. Rethink your structure if you have non-unique id.
As for whether jQuery supports it, it's unlikely, as it should never meet that scenario.