Using hidden values with jQuery (and ASP.NET MVC) -- not working?

Question

Im using a couple of JSON calls to render data, etc etc. In order to keep the proper key value, I am storing it in a tag.

I have this in several places in my code, none of which cause an issue like this one is. Here is the jQuery:

The call that "sets" the value:

    $("a[id^='planSetupAddNewPlan']").live('click', function() {
        var x = $(this).attr('id');
        x = x.substring(19);

        $("#hidPlanSetupCurrentGroupKey").val(x);

        $.getJSON("/GroupSetup/PlanSetupAddNewList", { GroupKey: x }, function(data) {
            $("#planSetupAddNew").html('' + data.TableResult + '');


            alert('First Inside 2 ' + x);

            $.blockUI({ message: $("#planSetupAddNew") });
        });
    });

The call that "gets" the value:

$("#ddlPlanSetupAddNewProduct").live('change', function() {
            var a = $("#hidPlanSetupCurrentGroupKey").val();
            var prod = $(this).val();

            alert(a);

            $.getJSON("/GroupSetup/PlanSetupChangePlanList", { GroupKey: a, Product: prod }, function(data) {
                if (data.Message == "Success") {
                    $("#planSetupAddNewPlan").html('' + data.TableResult + '');
                } else if (data.Message == "Error") {
                    //Do something
                }
            });
        });

Here is the html in question:

<div id="planSetupAddNew" style="display:none; cursor: default;">
    <input type="hidden" id="hidPlanSetupCurrentGroupKey" />
    <div id="planSetupAddNewData">

    </div>
</div>

In the first section, the alert ('First Inside 2 ' + x) returns what I expect (where x = the key value), and if I add a line to display the contents of the hidden field, that works as well:

ie.

var key = $("#hidPlanSetupCurrentGroupKey").val();
alert(key);

In the "alert(a);" call, I am getting "undefined". I have looked at the other code in the same view and it is the same and it works. I must be missing something, or have some sort of mistype that I havent caught.

Just an overview of the controller events: The first call (/GroupSetup/PlanSetupAddNewList) will return an html string building a "form" for users to enter information into.

The second call (/GroupSetup/PlanSetupChangePlanList) just changes a second dropdown based on the first dropdown selection (overwriting the html in the div).

If you need more info, let me know!

Any thoughts/tips/pointers/suggestions?!?!

Thanks for all your help :)

Answer 1

Why not use a normal javascript global variable? Or use jQuery's data

var globalGroupKey = '';
$("a[id^='planSetupAddNewPlan']").live('click', function() {
    var x = $(this).attr('id');
    globalGroupKey = x.substring(19);
    $.getJSON("/GroupSetup/PlanSetupAddNewList", { GroupKey: globalGroupKey }, function(data) {
        $("#planSetupAddNew").html('' + data.TableResult + '');


        alert('First Inside 2 ' + x);

        $.blockUI({ message: $("#planSetupAddNew") });
    });
});

$("#ddlPlanSetupAddNewProduct").live('change', function() {
        var prod = $(this).val();
        alert(globalGroupKey);
        $.getJSON("/GroupSetup/PlanSetupChangePlanList", { GroupKey: globalGroupKey, Product: prod }, function(data) {
            if (data.Message == "Success") {
                $("#planSetupAddNewPlan").html('' + data.TableResult + '');
            } else if (data.Message == "Error") {
                //Do something
            }
        });
});

Anyway, this looks to me like the change event is firing before click, so probably nothing of this will work.