CODEWITHSUNDEEP
asp.netjquerycss
Thomas
Thomas

Reputation: 297

No effect with jQuery

For the moment, I'm trying to learning some basic jQuery. But when I try to create a small thing with jQuery, it doesn't work.

First, I thought that it was my standard browser Chrome that was not supported. When I tried to render it in IE and Firefox, the result stays the same.

What do I wrong ?

Here u can find the code (ps I'm working with a master page, but I don't think that this has any influence)

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#orderedlist").addClass("tof");
        $("#orderedlist > li").addClass("groen");
        $("#orderedlist li:last").hover(
        function () {
            $(this).addClass("rood");
        },
        function () {
            $(this).removeClass("rood");
});
    });

</script> </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ol id="orderedlist">
    <li>Werken met <a href="http://www.jquery.com">JQuery</a></li>
    <li>Gebruik van selectors en events</li>
    <li>Ajax-functionaliteit</li>
</ol>

This is CSS (Stijl.css) code:

.tof
{
    font-family:Verdana;
    font-weight:bold;
    font-size:14pt;     
}
.groen 
{
    color:Green;
}

.rood 
{
    color:Red;
}

Upvotes: 0

Views: 188

Answers (3)

madr
madr

Reputation: 665

I see no obvious errors in your code.

I believe it might be a Dollar-sign conflict with any other library, like MooTools or Prototype.

Try to wrap your script with an anonymous function like this:

(function($){
  $(document).ready(function () {
    $("#orderedlist").addClass("tof");
    $("#orderedlist > li").addClass("groen");
    $("#orderedlist li:last").hover(
    function () {
       $(this).addClass("rood");
    },
    function () {
        $(this).removeClass("rood");
    });
  });
})(jQuery.noConflict());

If there is another library causing a Dollar-sign conflict this should do the trick.

Upvotes: 2

Raynos
Raynos

Reputation: 169411

Take a look here.

It seems like your code is working as intended. So try upgrading to jQuery 1.4.4. The only difference is that this doesn't use tags.

I reckon your issue is that your generated HTML from the asp is not the same as your aspx files.

To be safe you can use the selecter $("[id$=orderedlist]") which will work even if .NET prepends your id with junk.

Upvotes: 0

Victor
Victor

Reputation: 4721

The master page does make a difference and most likely the reason for your issue. The master page will render your html markup with a different ID than the one you specified. so for example, this would render something like:

<ol id="Content2_Control1_orderedlist">
    <li>Werken met <a href="http://www.jquery.com">JQuery</a></li>
    <li>Gebruik van selectors en events</li>
    <li>Ajax-functionaliteit</li>
</ol>

so therefore the jquery selectors using the ID will not work properly.

Upvotes: 0

Related Questions