Json-encoded JavaScript with Ajax throws an error message

Question

I have an html doc that contains:

        <li id="li_273" data-pricefield="special" data-pricevalue="0" >
        <label class="description" for="element_273">Helium Foil Balloon #1 </label>
            <div>
                <input type="text" class="element text medium" id="element_273" name="element_273" size="30" value="" />
                <input type="hidden" id="element_273_price" name="element_273_price" value="">

            </div> 
       </li>

So then, that area is an ajax drop down menu. From that ajax/php drop down I am able to execute an onclick command - this is what I have:

'onclick' => 'document.getElementById(\'li_273\').data(\'pricevalue\',\'1.00\');',  

It all gets json_encoded and this is the portion that it returns:

"onclick":"document.getElementById('li_273').data('pricevalue','1.00');",

But yet I get an error message when I select something from the ajax menu and onclick:

Uncaught TypeError: Object #<HTMLLIElement> has no method 'data' 

I cannot for the life of me figure this out and all I need it to do is just update a price that is on the page.

UPDATE: here's the rest of the code to try to get it to actually calculate the JavaScript on the page:

        $('#main_body li[data-pricefield="special"]').delegate('onclick','change', function(e) {
        var temp = $(this).attr("id").split('_');
        var element_id = temp[1];

        var pricedef = $(this).data('pricedef');
        if(pricedef == null){
            pricedef = 0;
        }

        $("#li_" + element_id).data("pricevalue",pricedef);
        calculate_total_payment();
           });

What seems to be missing? Because it doesn't update the total on the page.

Answer 1

.data is a jquery function and you are probably trying to call it on a dom object. Make sure you have jQuery loaded on your page and then do:

jQuery('#li_273').data('pricevalue','1.00');