Develop Reference

jQuery, Html element form external file to string in jquery, how?

I am working on a project where i need to get a specific element from an external html file as a string in my jQuery.
As i understand the .get(); function cannot get a specific element (by class or ID) and the .load() can, but loads it directly into the dom of the file.
Is there another function or a way to go about this?
What i need to do is get a specific html element and replace some macros in it with data from an object and then append it to an element (multiple times.) Therefore i cannot just load it in and replace the macros afterwards.

You can .get it and then only subselect.
$.get('myfile.html', function(response) {
var inside = $(response).find('#inner-id');
// do stuff with inside...
});

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"

How to retrieve an id of an html element in JavaScript

I want to know is there any way to identify an html element by its "id"?
If so than
how can I call another html element e.g html table by is id all this using java script.
<a id="a" class="menuheader" >New Arrivals</a>
<a id="a1" class="menuheader" >Concepts</a>
I want JavaScript to identify the id of the above two elements and upon identifying the id call another html element i.e a table.

I am not quite sure what you want.
To get an element by its ID, you can use document.getElementById(id).
To get the ID of an element, you need a reference to the element and access the id property: element.id.

To access an object in your DOM by its id you can use document.getElementById("...").
To enumerate the children of a container:
for (var i in containerElement.childNodes)
var elementId = containerElement.childNodes[i].id;

You could always use the jQuery JavaScript framework, which IMO is way better than plain old JavaScript for the most part. In jQuery you would just pass the eleent's ID you want to select (prevexied by the hash symbol to identify the selector is an ID) as a string to the jQuery function. Then , your action would follow a period after the selector
jQuery('#a').actionGoesHere()
But you would more commonly call the jQuery function by it's alias, the dollar sign:
$('#a').actionGoesHere()
Not so sure by what your second part of the question means, so if you clear that up a little, I'd be glad to help.

https://developer.mozilla.org/en/document.getElementById

I think something like this is what you are trying to do if I understand you correctly.
The first one is if you are using named anchors to call your tables
$("a").click(function () {
if ($this.has($("#a"))) { $this.attr("href", "#myfirsttable") }
if ($this.has($("#a1"))) { $this.attr("href", "#mysecondtable") }
});
I haven't had time to try it out yet, and I'm a bit sleepy right now and not at my sharpest, but this is the simplest way I can think of at the moment.

Javascript:parent in jquery

onmouseover="javascript:parent.DivColorHover(this)"
i have a div in which values are created dynamically, i use this div as popup so that it will be used as dropdown list elements.
onMouseOver of each value i am changing background color using the above line of code in javascript. how do i achieve the same in jquery

Let's first look at the code that you are using.
The javascript: protocol is out of place (it's used when code is placed in an URL) so it just becomes an unused label.
The parent object is a reference to the page that contains the iframe that the current page is in. As you are probably not in an iframe but a regular page, it will just be a reference to the current page.
So, all that is left of the code is actually:
onmouseover="DivColorHover(this)"
To add the same event using jQuery you need some way to identify the element, for example by adding an id="something", then you can do this:
$(function(){
$('#something').mouseover(function(){
DivColorHover(this);
});
});

jQuery(document).ready(function(){
$("#yourid").mouseover(function() {
$("#yourid").parent().css("backgroundColour":"red");
}
}
When html loaded jquery binds the defined function to the mouseover event of element with id="yourid".
This way you keep behaviour (event handlers) and structure (html) separate, easier to understand (for me at least).

Best way for multiple anchor links to reference a single value that can be used in JavaScript

I have any number of anchor links on a page that need to execute the same block of JavaScript code on click, and that code needs to be associated with one value. There are several of these on each page. I usually use a hidden input to store the value in a one-to-one relationship, but what is the best way to associate several links placed throughout a page with a value?
For example, think of a group of links that reference a product by ID, and all show the same dynamic layer for the product. Now there might be a multiple groups of links for a bunch of products. How do I draw those associations? I'm using Mootools and bind events by class, so I don't want a bunch of inline event function calls that pass arguments.

If your already using Mootools, a good way to do this is using the element's data storage.
window.addEvent('domready', function() {
$$('a.classname').each(function(el) {
el.store('productID', /*get this however you want*/);
el.addEvent('click', function(e) {
var productID = el.retrieve('productID');
}
}
}
And here's one method for getting the productID's (assuming you have control over URL formatting):
<a href='ViewProduct.php?ProductID=7#pid:7'>link</a>
//in your js (above)
var pid = el.get('href').split('#')[1].split(':')[1];
el.store('productID', pid);

Do you want to set the values in your html code? Otherwise, you can dynamically add the values to the dom nodes themselves.
If you want to set them in the html, use a custom attribute if you don't care for standard compliance. If you do care, encode the values as class names or use the lang-attribute and prefix your data with 'x-' so you stay compliant to RFC 1766.