ansaurus

Question

Html Helpers generates ID from model properties. How do I target 1 particular element with JavaScript and CSS if many elements have the same ID?

Answer 1

+1 A:

Well JavaScript may be kept in a separate file or not, but it is definitely included as part of the HTML send to the browser for a particular page. I Hope I've understood your question, but, generally if you have you JavaScript code in a file, lets say utils.js then in your html generated should include (probably within the <head> tag):

<script type="text/javascript" src="/path/to/utils.js"></script>

The script get included in the page, and when the browser encounters this, it loads and then runs the script, for that page. Therefore, it is not important what the ids for elements on different pages are. Does that make sense, or have I completely misunderstood your question?

Update:

Ok, so based on your comments, I think I understand. You have

//Page 1
//When loaded, this input should flash blue via javascript for example
<input id="firstName" .../>

And

//Page 2
//When loaded, this input has some other fancy effect/behaviour
<input id="firstName" .../>

Well in this case, as far as I see, there are only 2 types of answers. Have two seperate external js files, one per page and this way you can change to your hearts content ...OR... have some sort of hidden field in your page that tells your script what page it is looking at (this seems hacky)

<input type="hidden" value="page1"/> //etc..

Java Drinker 2010-07-29 12:53:36

@Java drinker: I'm sorry. I'm the one who didn't ask well the question. Look at the Edit above.

Richard77 2010-07-29 12:56:43

@Java drinker: I see what you mean. The browser doesn't care what id's are in the page. It just loads the javascript. I believe I should have asked the question differently. So look at the edit above.

Richard77 2010-07-29 13:17:21

Answer 2

+1 A:

You cannot have multiple elements on the page with the same id. That isn't valid HTML.

So when you use the same HTML helper multiple times, you need to pass different names:

<%: Html.TextBox("Foo", Model.Foo) %>
<%: Html.TextBox("Bar", Model.Bar) %>

Craig Stuntz 2010-07-29 13:01:32

@Hello Craig. good to have you again. It's not valid to have the same id twice in the same page. But, do you agree that I can have the same id in 2 different pages? In that case, How do I target one of them from my external javascript file?

Richard77 2010-07-29 13:09:54

OK, I didn't understand your original question. I think more info is needed here. Why are you disabling this in JavaScript? Your motivation might suggest a solution.

Craig Stuntz 2010-07-29 13:15:26

Also: What is stopping you from passing different names in the different pages, as with my code example?

Craig Stuntz 2010-07-29 13:46:06

Answer 3

+1 A:

Correct me if i'm wrong, but are you saying, you have some elements with the same id, on multiple pages, that you want to attach different behaviour to? If so then this could help you out. if not, then what Craig said.

You can use more specific selectors, or give your selectors context have a look at the documentations here: http://api.jquery.com/jQuery/
under this header: jQuery( selector, [ context ] ) it explains a bit about selects and context. you should be able to use this and some creative page building to target the right element with your jQuery.

Patricia 2010-07-29 13:10:03

@Patricia: You are right. This is what I meant. I've same ids in different pages because they are generated by the helper methods. I'd like to attach different behaviors.

Richard77 2010-07-29 13:21:23

He didn't say he's using jQuery.

jasongetsdown 2010-07-29 14:04:51

very true jason! a poor assumption on my part.

Patricia 2010-07-29 19:02:36

I'm using Jquery

Richard77 2010-07-30 09:11:37

@Patricia: Thanks very much, although I needed to put extra thoughts to understand what was [context] in your answer (Ah!).

Richard77 2010-07-30 09:14:59

Answer 4

+1 A:

I suggest that for each page the uses the same model, you create a wrapper div

<div class="pageA">
   // the model stuff here
   <% = Html.TextBoxFor(x => x.FirstName)%> 
</div>

<div class="pageB">
   // the model stuff here
   <% = Html.TextBoxFor(x => x.FirstName)%>
</div>

and then use Jquery selectors to get the correct element $(".pageA input[name='FirstName']") (not sure if this syntax is correct).

Ahmad 2010-07-29 14:00:47

Answer 5

+1 A:

So you have two files, each with a text field with the id "FirstName". When you're script runs on Page A you want to disable the field, but not when your script runs on Page B.

Is the structure of the two pages identical? I suspect not if you're handling these fields differently. Use the context to your advantage. Like if the one on Page A is in a div with id "thisDiv" and the other is in a div with id "thatDiv" you could document.getElementById('thisDiv'). If you get an element then disable the field, if not do nothing.

If you want a more specific answer you're going to have to give us more context.

jasongetsdown 2010-07-29 14:15:08

ansaurus

tags:

views:

answers:

Html Helpers generates ID from model properties. How do I target 1 particular element with JavaScript and CSS if many elements have the same ID?

related questions