CODEWITHSUNDEEP
javascriptjquery
MrTechie
MrTechie

Reputation: 1847

Jquery, ajax, javascript - getting an element by id

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.

Upvotes: 3

Views: 16136

Answers (7)

Ja͢ck
Ja͢ck

Reputation: 173562

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;
}

Upvotes: 7

PhearOfRayne
PhearOfRayne

Reputation: 5050

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();          
});

Upvotes: 1

Barmar
Barmar

Reputation: 780994

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.

Upvotes: 1

Craig MacGregor
Craig MacGregor

Reputation: 4629

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()

Upvotes: 3

Robusto
Robusto

Reputation: 31883

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.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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();          
});

Upvotes: 1

Dave Anderson
Dave Anderson

Reputation: 12294

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.

Upvotes: 2

Related Questions