CODEWITHSUNDEEP
jquery
user517406
user517406

Reputation: 13763

Using labels in JQuery

I am trying to use a <label> to show some text on a JQuery UI Dialog object. But it always seems to lose the value. Here is the code snippet where I am setting the value :

function populateDialog(intMeterID) {

                  $.ajax(
                   {
                       type: "POST",
                       url: "/WS.asmx/GetMeterSettingsByMeterID",
                       data: "{intMeterID:" + intMeterID + "}",
                       async: false,
                       dataType: "json",
                       contentType: "application/json; charset=utf-8",

                       success: function(msg) {

                           var strMeterName = msg.d.MeterName;

                           $("label[for='lblMeterID']").text(intMeterID);
                           $("label[for='lblMeterName']").text(strMeterName);

And on a button click I am then trying to take the value from the label, but it is empty. However, the msg.d.MeterName does contain the data!

function saveMeterDetails() {

                   var intMeterID = $("label[for='lblMeterID']").text();
                   var strMeterName = $("label[for='lblMeterName']").text();

html:

<div id="dialog-form">
    <div style="height: 200px; min-height: 109px; width: auto;" id="dialog">
        <table>
            <tr>
                <td>
                    <label style="display:none;" for="lblMeterID" />
                    <label style="font-weight:bold;" for="lblMeterName" />
                </td>
            </tr>
            <tr></tr>
            <tr></tr>
            [...]

Any ideas why?

Upvotes: 0

Views: 367

Answers (2)

JohnP
JohnP

Reputation: 50029

I think it's a scope issue. When the success callback is called 'intMeterID' doesn't really exist in that scope. Even though you pass it during the initial call. You need to make it a global variable, or pass it back as data from the ajax call.

The code works now because you removed the erroneous call that sets an undefined text to the label.

Upvotes: 1

Jochem
Jochem

Reputation: 2993

I think this has actually nothing to do with label itself. I think intMeterID is empty at the time of the 'success' callback. That's why it does work if you remove that line.

What you are actually doing with 'success: function() {blah}' is defining a new function that will be called whenever the request is succesfull. At that time 'intMeterID' is unknown.

You could perhaps make it a global variable if you really need it, or make the ajax call blocking or (my favorite) add the variable server-side to your ajax results.

Edit: hm, nevermind, I just read you already found your answer. Apparantly I was wrong :)

Upvotes: 0

Related Questions