CODEWITHSUNDEEP
javascriptjqueryasp.net
user1334338
user1334338

Reputation:

Jquery works in firebug but not in page

I'm quite new to JQuery programming and need a bit of help!

I have a ASP.NET Pivot Table and i the cells of that table there a #re v arious values 1, 2, 3 or 4. Whichever value is selected turns the cell to one of four colours. Now the code works in firebug but does not work, when i put it in tags in my page header.

what am i doing wrong?

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js">



    $(document).ready(function () {

        $(".myGridView1 tr").each(function () {



            $("td").filter(function () { return $.text([this]) == '1'; }).css('background', 'green');

            $("td").filter(function () { return $.text([this]) == '2'; }).css('background', 'orange');

            $("td").filter(function () { return $.text([this]) == '3'; }).css('background', 'red');

            $("td").filter(function () { return $.text([this]) == '4'; }).css('background', 'blue');

        });

    });



</script>

Upvotes: 0

Views: 244

Answers (5)

Jeff B
Jeff B

Reputation: 30099

You cannot include an external script in the same tag that contains your page code. It needs to be a separate, empty tag:

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>
   // my script
</script>

In addition, some notes:

The .each() function doesn't do anything in your code, except run the filter functions too many times. For each tr, you are looking at every td, not just the ones in the current row. If you take out the .each(), the code still works:

Demo: http://jsfiddle.net/jtbowden/dgswh/

Secondly, instead of filtering, just add the function to your .css() call:

var colors = {'1': 'green', '2': 'orange', '3': 'red', '4': 'blue' };

$("td").css('background-color', function(index, value) {
    var txt = $(this).text();
    if(colors.hasOwnProperty(txt)) {
        return colors[txt];
    }
    return value;
});

Demo: http://jsfiddle.net/jtbowden/dgswh/2/

This reduces your code to a single call, instead of 4 (and it only runs once for each td). If you want to limit it to just that table, change the selector:

$(".myGridView1 td").css('background-color', function(index, value) { ... });

Follow up

To remove the text from the td after changing the color, you can do this:

$("td").css('background-color', function(index, value) {
    var txt = $(this).text();
    $(this).text("");  // ADD THIS LINE
    if(colors.hasOwnProperty(txt)) {
        return colors[txt];
    }
    return value;
});

If you only want to remove the text of tds that match, move the line:

$("td").css('background-color', function(index, value) {
    var txt = $(this).text();
    if(colors.hasOwnProperty(txt)) {
        $(this).text("");  // MOVE TO HERE
        return colors[txt];
    }
    return value;
});

It is important to note that without some styling, if you empty a table cell, it may collapse to zero width or if all cells on a row are empty, the row may collapse to zero height. If this is the case, either add min-height and min-width definitions for td in your CSS, or change $(this).text("") to $(this).html('&nbsp;')

Demo: http://jsfiddle.net/jtbowden/dgswh/5/

If you want to retain the number, but not have it be visible, you can wrap the contents of the td with a hidden or invisible div:

$(this).wrapInner("<div style='visibility:hidden'>");

Or:

$(this).wrapInner("<div style='display:none'>");

Demo: http://jsfiddle.net/jtbowden/dgswh/6/

Upvotes: 1

lucuma
lucuma

Reputation: 18339

Assuming we aren't talking about an incorrect script tag, here is a solution:

css:

.td1 {background-color:green}
.td2 {background-color:orange}
etc



$(".myGridView1 td").each(function() {
   $(this).addClass('td' + $(this).text());

 });

Upvotes: 0

Fresheyeball
Fresheyeball

Reputation: 30015

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">

    $(function(){

        $(".myGridView1 td").each(function () {

            var that = $(this)

            switch( that.text() ){

                  case '1': that.css('background', 'green');
                  break;

                  case '2': that.css('background', 'orange');
                  break;

                  case '3': that.css('background', 'red');
                  break;

                  case '4': that.css('background', 'blue');
                  break;
            } 

        });

    });
</script>

Just my 2 cents. You should avoid making new jQuery objects (less $ the better) and filter is pretty inefficient too. This way each jQuery object is created once, and each function runs once.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

The contents of a script are ignored if the src attribute is present. In other words, you need two script tags: one to include jQuery, and the other for your code. You're also doing a lot more work than you need to:

$(function () {
   $(".myGridView1 tr td:contains(1)").css('background', 'green');
...
});

You can probably consolidate it even further. Just a few notes:

$.text([this]) is not much different than $(this).text() .. the latter is preferred.

Your .each is pointless, because the $("td") selector operates on the entire document. If you really wanted to use the .each selector as the context, you could do $("td", this). I don't think it's necessary to even use .each, though. It's just an extra function call.

Finally, you can use the :contains selector for what you're trying to do with the .filter. I don't see much of a reason to ever use .filter as opposed to selectors unless the .filter method is extremely complicated or you want to use it for chaining.

Upvotes: 2

Elliot Bonneville
Elliot Bonneville

Reputation: 53291

Each script needs its own tag, like this:

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".myGridView1 tr").each(function() {
        $("td").filter(function() {
            return $.text([this]) == '1';
        }).css('background', 'green');

        $("td").filter(function() {
            return $.text([this]) == '2';
        }).css('background', 'orange');

        $("td").filter(function() {
            return $.text([this]) == '3';
        }).css('background', 'red');

        $("td").filter(function() {
            return $.text([this]) == '4';
        }).css('background', 'blue');

    });
});​
</script>

The reason being is the Javascript is loaded into the html at the specified tag (if you've specified a URL) and will, to the best of my knowledge, overwrite what's inside the script tag currently. So if you've got anything inside a <script> tag with a URL set, it will be overridden and thus not execute.

Also, it's Javascript programming, not jQuery programming. jQuery is a library to be used with Javascript.

Upvotes: 2

Related Questions