Jquery, ajax, javascript - getting an element by id

Question

I have some ajax onclick stuff that updates this line when the value is selected from the menu:

<li id="li_273" data-pricefield="special" data-pricevalue="0" >

The intention is to take the that value (data-pricevalue) and then multiple it by the amount that is entered from another input box. Here's my function to try to make that happen:

$('#main_body').delegate('#element_240','keyup', function(e){

var temp = $(this).attr("id").split('_');
var element_id = temp[1];

var price = $('#li_273').data("pricevalue"); 

var ordered = $(this).val();

var price_value = price * ordered;

price_value = parseFloat(price_value);
if(isNaN(price_value)){
    price_value = 0;
}

$("#li_273").data("pricevalue",price_value);
calculate_total_payment();

});

Except I get the following error: Uncaught TypeError: Cannot call method 'data' of null

It appears as tho my attempt to get the price value out of getElementById isn't correct. Any suggestions?

UPDATE: The code above has been edited from your suggestions and thanks to all. It appears to be working just fine now.

@Christophe true, depending on what version the OP is using. — wakooka
– wakooka, Commented Dec 22, 2012 at 2:25
@Christophe: As of jQuery 1.7, .delegate() has been superseded by the .on() method Delegate() has not been marked as deprecated yet. See features marked as deprecated: api.jquery.com/category/deprecated .There is a difference between superseded and deprecated. Features marked as deprecated may get removed in any new version while superseded features are not. — Nope
– Nope, Commented Dec 22, 2012 at 2:27
When I tried to use the .on method I caught errors but the delegate works. — MrTechie
– MrTechie, Commented Dec 22, 2012 at 2:37
@Christophe: Also, as an interesting side-note. In the later versions of jQuery it doesn't actually matter at all if you are using delegate, live (deprecated), bind, etc.. as those methods have been re-written to use on() anyway. 1.7.1 source for example: delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn);}, or bind: function( types, data, fn ) {return this.on(types, null, data, fn );}, However, one should always follow the recommendations given by the documentation to prevent any unexpected issues. — Nope
– Nope, Commented Dec 22, 2012 at 2:58

Ja͢ck · Accepted Answer · 2012-12-22 02:42:28Z

7

This part is wrong:

var price = document.getElementById('#li_273').data("pricevalue").val();

Instead, you should use jQuery all the way here:

var price = $('#li_273').data("pricevalue");

Btw, you shouldn't use .val() because .data() already returns a string. .val() is used exclusively for input elements such as <input> and <select> to name a few.

Update

Also, the rest of your code should be something like this:

var price_value = parseFloat(price);
if(isNaN(price_value)){
    price_value = 0;
}

edited Dec 22, 2012 at 2:42

answered Dec 22, 2012 at 2:26

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MrTechie Over a year ago

When I tried it I get: Uncaught ReferenceError: price_value is not defined

Ja͢ck Over a year ago

@MrTechie Well, that's because I didn't spot that other mistake in your code :) updated my answer.

MrTechie Over a year ago

@Jack, I saw it too - price_val is not price_value. But it's rendering a total of $238.00 for a value of 10 instead of $23.80 if the price is $2.38 per item. Thoughts?

Ja͢ck Over a year ago

@MrTechie Who knows? That logic is certainly not part of your posted code.

Barmar Over a year ago

Your code has price_value = parseFloat(price_value); but never sets price_value. Should that be parseFloat(price)? And is there supposed to be code that multiplies price*ordered to get the total? There's all sorts of things missing in the code you posted.

Craig MacGregor · Accepted Answer · 2012-12-22 02:24:02Z

3

getElementById doesn't return a jQuery object it returns just a normal DOM object.

You can wrap any DOM object in a jQuery call to get it as a jQuery object:

 $(document.getElementById("li_273")).data("pricevalue").val();

Or better yet just use jQuery

 $("#li_273").data("pricevalue").val()

answered Dec 22, 2012 at 2:24

Craig MacGregor

4,6291 gold badge23 silver badges13 bronze badges

Comments

Dave Anderson · Accepted Answer · 2012-12-22 02:21:59Z

2

Your call should be document.getElementById('li_273') it's a normal method and doesn't require the hash as jQuery does.

EDIT As @kennypu points out you're then using jQuery on a non jQuery object. @Craig has the best solution.

answered Dec 22, 2012 at 2:21

Dave Anderson

12.4k4 gold badges60 silver badges80 bronze badges

1 Comment

kennypu Over a year ago

also to add on, he's mixing native javascript with jQuery. that line should be $('#li_273').data('pricevalue').val();

Arun P Johny · Accepted Answer · 2012-12-22 02:23:09Z

1

document.getElementById('#li_273').data("pricevalue").val(); should be jQuery('#li_273').data("pricevalue").val();

Again the variable price_value is not present, I think you mean price.

Ex:

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue").val();

    var ordered = $(this).val();

    var price_value = parseFloat(price);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
});

answered Dec 22, 2012 at 2:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

MrTechie Over a year ago

correct- tired eyes says that price_val and price_value are not the same. It works but the total price is wrong. It's giving me $238.00 and not $23.80 for a value of 10 selected. Thoughts?

Robusto · Accepted Answer · 2012-12-22 02:23:15Z

1

The document.getElementById('#li_273') is the problem. The method won't recognize the hash. If you want to get the element ID using that method try document.getElementById('li_273') and it will work.

Otherwise use all jQuery.

answered Dec 22, 2012 at 2:23

Robusto

32k8 gold badges59 silver badges79 bronze badges

Comments

Barmar · Accepted Answer · 2012-12-22 02:25:39Z

1

Since you're using jQuery, why are you using document.getElementById instead of $(...)? It should be:

$('#li_273').data("pricevalue")

Note also that the data() method is only defined on jQuery objects, not DOM elements. And you don't need to call val() after it -- that's for getting the value of form elements.

answered Dec 22, 2012 at 2:25

Barmar

789k57 gold badges555 silver badges669 bronze badges

1 Comment

MrTechie Over a year ago

thanks for your explanation. jQuery is still new to me and I am trying. Your solution worked - however, if the item is $2.38, and I enter in 10 - it gives me $238.00 and not $23.80. Thoughts?

PhearOfRayne · Accepted Answer · 2012-12-22 02:27:01Z

1

Your getElementById is wrong with javascript you do not need the #, if your using jQuery do it like this instead (Also I removed the .val() because its not needed):

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue");

    var ordered = $(this).val();

    price_value = parseFloat(price_value);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
});

edited Dec 22, 2012 at 2:27

answered Dec 22, 2012 at 2:21

PhearOfRayne

5,0504 gold badges33 silver badges44 bronze badges

Collectives™ on Stack Overflow

Jquery, ajax, javascript - getting an element by id

7 Answers 7

5 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related