ansaurus

Question

Jquery Error: $("[data-weight]") is null

Answer 1

A:

May i know,what is 'data-weight' ? Is it a control ID? If it is control id then you need to give :

$('#data-weight').children().each(function() {...

Or

The following post might be helpful to you :

http://stackoverflow.com/questions/91518/jquery-attribute-selectors-how-to-query-for-an-attribute-with-a-custom-namespace

Siva Gopal 2010-09-20 09:35:17

Don't you see `<strong data-weight="200">`?

KennyTM 2010-09-20 09:38:49

Answer 2

+2 A:

data-weight is not a valid attribute, on before HTML5. How about doing it this way,

html part,

<strong class="weight-800">800 KG</strong>

jQuery part,

jQuery(document).ready(function () {
    $('[class^="weight"]').each(function () {

        var usingMetric = false;

        var $this = $(this);
        var value = this.className.split('-')[1];
        if (usingMetric) {
            $this.text(value + " KG");
        }
        else {
            value = parseFloat(value) * 2.20462262; // Convert to imperial
            $this.text(value + " lbs");
        }
    });
});

demo

Reigel 2010-09-20 09:36:23

`data-weight` is valid as of HTML5. Since he's declaring XHTML 1.1, I *think* you're technically correct, but I can't imagine a browser actually caring. But still, nice edit for being valid pre-HTML5.

T.J. Crowder 2010-09-20 09:41:17

This gives the exact same error

Tom Gullen 2010-09-20 09:42:33

Are you sure about that `this.class().split('-')[1];` line? I'd think it should be `this.className.split('-')[1];` (e.g., `className` rather than `class` -- which is an invalid identifier in JavaScript -- and a property, not a function).

T.J. Crowder 2010-09-20 09:43:14

@T.J. Crowder - haha fixed that, thanks... @Tom Gullen, please try... I have some corrections made.

Reigel 2010-09-20 09:47:02

I've created a variant of the live example of my answer to Tom's original question inspired by this: http://jsbin.com/icure3/2

T.J. Crowder 2010-09-20 09:51:28

@T.J - hmm cool 8)

Reigel 2010-09-20 09:55:25

@Reigel: LOL, we should have teamed up -- I see you did a jsFiddle. :-)

T.J. Crowder 2010-09-20 09:56:43

Thanks for the answer Reigel, it's a good demo I've +1 you but TJ had the solution to the error

Tom Gullen 2010-09-20 10:01:08

Answer 3

+2 A:

If you're using jQuery's "no conflict" mode, the problem might be this:

jQuery(document).ready(function() {
                                ^-- Consider adding $ here

...or use jQuery rather than $ throughout.

If you're not using jQuery no-conflict, I'm not seeing why there'd be a problem. It works just fine here: http://jsbin.com/odaxa3 The only edits I made were to load jQuery from Google's CDN and to make the weight in the attribute match the display.

T.J. Crowder 2010-09-20 09:38:40

Thanks for the simplified example I'll try and work out why this isn't working

Tom Gullen 2010-09-20 09:49:13

Ah adding the $ in the ready function works fine, thanks again! :=)

Tom Gullen 2010-09-20 09:50:10

Answer 4

+2 A:

Instead of converting the units, you could print all units and only display the one that is preferred:

<strong><span class="metric">800 kg</span> <span class="units-separator">/</span> <span class="imperial">1763 lbs</span></strong>

Now you can switch between the units by displaying/hiding the elements with the class metric‍/‍imperial:

.units-separator { display: none }
/* for metric view */
.metric { }
.imperial { display: none }
/* for imperial view */
.metric { display: none }
.imperial { }

And if CSS is not supported, both units are shown as:

800 kg / 1763 lbs

Gumbo 2010-09-20 09:54:45

Now that's a cute idea. I prefer the conversion route, but it's great to give the OP (good!) alternatives.

T.J. Crowder 2010-09-20 09:57:53

Very nice solution!

Tom Gullen 2010-09-20 10:01:43

How do you switch the classes dynamically?

Tom Gullen 2010-09-20 10:20:34

@Tom Gullen: You could add a class name like “metric-units”/‍“imperial-units” to `BODY` and change the mentioned CSS rules to `body.metric-units .metric {} body.metric-units .imperial { display: none }` and `body.imperial-units .metric { display: none } body.imperial-units .imperial { }`. Then you can toggle between the class names with `$(document.body).removeClass("imperial-units").addClass("metric-units")` and vice versa.

Gumbo 2010-09-20 10:30:37

ansaurus

tags:

views:

answers:

Jquery Error: $("[data-weight]") is null

demo

related questions