CODEWITHSUNDEEP
jquery
RichardB
RichardB

Reputation: 606

JQuery each() function not working DropDownList Change

I have a table populated from a selection from a dropdownlist. If the status of any of the items in the table is anything other than 'success', I want to disable a button on the page, otherwise I enable it. I have a change event handler with the following:

function enableButton() {
    $(".myButton").attr("disabled", true);
    $("td.tdStatus").each(function() {
        if ($(this).text() == "SUCCESS") {
            $("input.myButton").attr("disabled", false);
            return false;
        }
    });
}

$(function() {
    $("#myList").change(enableButton);
});

On the first selection of an item from the dropdown, I'm getting into the event handler but $("td.tdStatus").each(function() isn't finding anything. When I then make a subsequent change to the dropdownlist, the button gets enabled/disabled as I'd expect. Any ideas why the first change isn't working?

HTML is as follows:

<ItemTemplate>
    <tr>
        <td runat="server" id="tdName"><%# Eval("Name") %></td>
        <td class="tdStatus"><%# Eval("Status") %></td>
    </tr>
</ItemTemplate>

Thanks

Upvotes: 3

Views: 836

Answers (4)

RichardB
RichardB

Reputation: 606

Just to give an update, the tab the data is loaded into has a function that is bound to the tabsload event:

$("#tabContent").bind('tabsload', tabLoaded);

Inside tabLoaded I put a call to the enableButton() function and that's got it working ok, with the data completely loaded before the function fires. Thanks all for your help, apologies for missing out the key information in the original post!

Upvotes: 0

RonnyKnoxville
RonnyKnoxville

Reputation: 6404

A few more suggestions:

Have you tried using just .tdStatus instead of td.tdStatus?

Maybe you need to call the children of the td if your framework is creating divs for your entries?

function enableButton() {
    $(".myButton").attr("disabled", true);
    $("td.tdStatus").children().each(function() {
        if ($(this).text() == "SUCCESS") {
            $("input.myButton").attr("disabled", false);
            return false;
        }
    });
}

Try using alert() in the each method to see what is being returned

function enableButton() {
    $(".myButton").attr("disabled", true);
    $("td.tdStatus").children().each(function() {
        alert(jQuery(this).text());
    });
}

Upvotes: 1

RonnyKnoxville
RonnyKnoxville

Reputation: 6404

Use this:

function enableButton() {
    $(".myButton").attr("disabled", true);
    var x = $("td").find(".tdStatus", function() {
        if ($(this).text() == "SUCCESS") {
            $(".myButton").removeAttr("disabled");
            return false;
        }
    });
}

$(function() {
    $("#myList").change(enableButton);
});

I think that should work

Try this with .text() and .val() Im not sure which one should work

Upvotes: 1

Crab Bucket
Crab Bucket

Reputation: 6277

You need to remove the disabled attribute altogether.

$(".myButton").removeAttr("disabled");

Presence of a disabled attribute no matter what the value will result in the control being disabled i.e.

Disabled

<input type="button" disabled="true" />

Still disabled

<input type="button" disabled="false" />

Enabled

<input type="button" />

Upvotes: 1

Related Questions