ansaurus

Question

Simple jQuery works in HTML, not ASP.NET

Answer 1

A:

The jQuery script might actually be running before your table has been loaded on to the page. You might try to add your scripts at the bottom of the master page or even use a register scripts method from the master page code behind to make sure that it's the last thing to load.

You might to also post your markup for the table that you're trying to attach your jquery script too. There could be something wonkie with it that is causing the stipping from not being applied.

EDITED I went and played with your jquery and threw together a quick master page, child page example and this is what I came up with. Use the following script in the head of the master page:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
$(document).ready(function() {
    $('.stripedtable tr:even').addClass("evenrow");
    alert("Just executed stripedtable jQuery in MasterPage");
});

Then in the stylesheet I placed this definition:

tr.evenrow td {background: Red;}

I then created a control and just tossed in a simple table like this with your class name on the table element:

<table class="stripedtable"><tr><td></td></tr></table>

When I ran the page everything worked for me. I think what the issue is is that in the jquery code that you have you're going one level lower than what you need. You just need the table, then the row and then the :even marker. Your example code as tossed in the td element which I dont' think you really need.

Hope this works for you.

Chris 2009-09-25 19:25:35

$(document).ready() fires after the dom finished to load. if the table isn't loaded via ajax the posted code in the question should be fine.

Karsten 2009-09-25 19:29:27

he's using $(document).ready(), there's no way it will run before the table is loaded (unless it is, of course, loaded with ajax)

anonymous 2009-09-25 19:30:28

Answer 2

+1 A:

Try adding a css style instead of the class, such as .css("font-weight", "bold"); to see if you instead have a stylesheet problem

ScottE 2009-09-25 19:29:20

Answer 3

A:

The first thing I thought of when I read your title is how ASP.NET dynamically names its fields when they're inside user controls. And I thought you might be referencing an id like "#mytable" which has then be renamed "#mycontrol_mytable." But I see that you're referencing a class name so that can't be it.

The other thing that comes to mind which may be affecting you is the doctype. The doctype tends to affect some wacky things sometimes (especially in IE). Have you verified that the doctype you're using in the ASPX file is the same as the HTML file?

You might try a doctype like the one in StackOverflow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

Steve Wortham 2009-09-25 19:33:11

Answer 4

A:

I'd bet .NET does something with the table that renders the .stripedtable tr:even td selector useless. you said you've been using firebug, I recommend fiddling with the selector (try $(".stripedtable tr:even td") in the console and see what it selects), if it doesn't give you the elements you want, try without the .stripedtable part.

anonymous 2009-09-25 19:35:18

Answer 5

A:

When in doubt set a debugger breakpoint and step through the code. Basic advice but it should help you find the issue. Put 'debugger;' into the document ready code and then break out the selector as a separate var assignment so you can see a) if the code fires at all and b) whether it's selecting something (length should be > 0). If you don't get any selections try the interactive FireBug console (or watch expression in IE) to type a selector until you find the right one.

You might also want to check if your CssClass .stripedtable exists as you expect in the rendered HTML document output.

Rick Strahl 2009-09-25 19:39:57

Answer 6

A:

Make sure you validate the end-result's HTML first. It's much better than it used to be, but in the past, .net controls were notorious for spitting out invalid markup that can mess with traversing the DOM.

DA 2009-09-25 20:09:15

Answer 7

A:

Thank you all SO much. For a noob, all the answers were useful. Adding the .css() was clever. I applied the supplied javascript to act on <tr>s instead of <td>s. The breakthrough was the suggestion of the FireBug console, which I've never used. I've been SEARCHING for a way to see the results of a selector, and that made all the difference. FireBug is awesome.

This is how we learn; too bad it is so painful.

THE PROBLEM WAS CASE-SENSITIVITY. In my ASP.NET markup, my CssClass was "StripedTable", and my jQuery expression was looking for "stripedtable." I knew that javascript is not case-sensitive -- but STRINGS are, you bird-brain! Argh.

I need to go to the <td> level, by the way, because my predecessors applies styles at the level, and they often include background-color -- so I had to modify the <td> class to win the specificity battle.

So $('.stripedtable tr:even td').addClass(" evenrow"); changes the 's class from "CellStyleLeft" to "CellStyleLeft evenrow" -- and the evenrow comes last, so it wins!

It works, finally. THANKS, everyone!

-- Hoytster

hoytster 2009-09-28 21:41:59

FYI, JavaScript *is* case sensitive.

DA 2009-10-19 21:24:52

ansaurus

tags:

views:

answers:

Simple jQuery works in HTML, not ASP.NET

related questions