dropdownlist jquery ddl.change() event fires before change takes place : The Official Microsoft ASP.NET Forums

Reply

awrigley

Member

5 Points

20 Posts

dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 06:05 AM|LINK

Hi

I have three cascaded drop down lists.

ddlIllnessType, ddlIllnessSubType and ddlInfectiousAgent

Initially, only ddlIllnessType is showing. On change, ddlIllnessSubType is filled with json data and made visible. So far, so good.

Next, when the user selects a value from ddlIllnessSubType, a similar procedure runs for ddlInfectiousAgent in the ddlIllnessSutType change event handler. However, in the following code, $(this).val() always comes up as 'undefined', even though the user has chosen an existing value:

$("#ddlIllnessSubType").change(function() {


var selection = $(this).val();


// go and get Json based on the value of selection.
// Doesn't work cos selection == 'undefined'
var url = "/IllnessDetail/CascadedDdlInfectiousAgent/" + selection;


getJSON(url, function(data) {...});
...
});

Why is selection == 'undefined'?????!

Thanks in advance

Andrew

Moved by jimmy q on Feb 23, 2010 06:41 AM

Reply

raju dasa

Star

14320 Points

2440 Posts

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 06:54 AM|LINK

HI,

It's working, check this code:
------------------
<html>
<head>
<script src="shortcuts/jquery-129min.js" type="text/javascript"></script >
<script type="text/javascript">
$(document).ready(function (){
$("#selMonth").change(function(){ alert($(this).val()); });
});
</script>
</head>
<body>
<Br/><br/>
<select id="selMonth">
<option value="31">jan</option>
<option value="28">feb</option>
<option value="31">mar</option>
</select>
</body>
</html>
-------------

check when u r calling or registering event.

------------------------------------

Happy Coding.
Mark as Answer if it helps.

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera

Reply

awrigley

Member

5 Points

20 Posts

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 07:00 AM|LINK

$(this).val() working? I sort of know that...

The questions is, why isn't it working in this instance?

The full jQuery code is:

<script type="text/javascript">


    $('document').ready(function() {
        var pEst = $("#pEncephalitisSubType");
        var pIa = $("#pInfectiousAgent");
        var ddlEst = $("#IdEncephalitisSubType");
        var ddlIa = $("#IdInfectiousAgent");


        $('#SubTypeContainer').hide();


        pEst.hide();
        pIa.hide();
//        debugger
        $('select').each(function() {
            $(this).val(""); //alert($(this).val());
        });


        // Change Event Handler
        $("#IdEncephalitisType").change(function() {
            var selection = $(this).val();
            pEst.fadeOut('slow');
            pIa.fadeOut('slow');
            ddlEst.val("");
            ddlIa.val("");


            if (selection == 0) {
                $('#SubTypeContainer').fadeOut('slow');
            }
            else {
                var url = "/Members/IllnessDetail/CascadedDdlSubType/" + selection;
                AjaxEncephalitisSubTypes(url);
            }
        });


        // Change Event Handler
        $("#IdEncephalitisSubType").change(function() {
            var selection = $(this).val();
            debugger
            pIa.fadeOut('slow');
            ddlIa.val("");
            if (selection != "") {
                if (($("#IdEncephalitisType").val() == 1) && ((selection == 1) || (selection == 2))) {
                    var url = "/Members/IllnessDetail/CascadedDdlInfectiousAgent/" + selection;
                    AjaxInfectiousAgents(url);
                }
            }
        });


        function AjaxEncephalitisSubTypes(url) {
            $('#SubTypeContainer').fadeOut('slow');
            $.getJSON(url, null, function(json) {
                ddlEst.empty();
                ddlIa.empty();
                PrependDdlDefaults(ddlEst);
                var i = 0;
                $.each(json, function(index, optionData) {
                    ddlEst.append("<option value='"
                        + optionData.EncephalitisSubTypeId
                        + "'>" + optionData.Name
                        + "</option>");
                    i++;
                });
                $('#SubTypeContainer').fadeIn('slow');
                ddlEst.val("");
                pEst.fadeIn('slow');
            });
        }


        function AjaxInfectiousAgents(url) {
            $('#SubTypeContainer').fadeOut('slow');
            $.getJSON(url, null, function(data) {
                var i = 0;
                ddlIa.empty();
                PrependDdlDefaults(ddlIa);
                $.each(data, function(index, optionData) {
                    ddlIa.append(
                    "<option value='"
                    + optionData.InfectiousAgentId
                    + "'>" + optionData.Name
                    + "</option>");
                    i++;
                });
            });
            ddlIa.val("");
            $('#SubTypeContainer').fadeIn('slow');
            pIa.fadeIn('slow');
        }


        function PrependDdlDefaults(ddl) {
            ddl.prepend(
                "<option value='"
                + ""
                + "'><i>" + " --- Please choose... --- "
                + "</i></option>");
        }
    });




</script>

The Html is:

    <fieldset>
        <legend>The Illness</legend>
        <p>
            According to your input, different drop down lists will appear, specialised to only
            show the options that apply.
        </p>
        <p>
            <label for="IdEncephalitisType">
                Type Of Encephalitis:</label>
            <%= Html.DropDownList("IdEncephalitisType", Model.EncephalitisTypes)%>
            <%= Html.ValidationMessage("IdEncephalitisType", "*") %>
        </p>
        <div id="SubTypeContainer" style="margin-left:10px;border: solid 1px #ccc; background: #efefef;">
            <p class="highlight" id="lblSubTypeContainer" style="font-weight:bold;color:#c00;">
                Extra Information regarding the Illness:</p>
            <p id="pEncephalitisSubType">
                <label id="lblEncephalitisSubType" for="IdEncephalitisSubType">
                    Sub Type of Encephalitis:</label>
                <%= Html.DropDownList("IdEncephalitisSubType", Model.EncephalitisSubTypes)%>
                <%= Html.ValidationMessage("IdEncephalitisSubType", "*") %>
            </p>
            <p id="pInfectiousAgent">
                <label id="lblInfectiousAgent" for="IdInfectiousAgent">
                    Infectious Agent:</label>
                <%= Html.DropDownList("IdInfectiousAgent", Model.InfectiousAgents) %>
                <%= Html.ValidationMessage("IdInfectiousAgent", "*") %>
            </p>
            <p><%--<input visible="false" type="button" title="Reset Encephalitis Types" id="resetTypes" value="Reset Encephalitis Types" />--%></p>
        </div>
        <p style="clear: both;margin-top:10px;">
            <label id="lblCommentBuildUpToIllness" for="CommentBuildUpToIllness">
                Please write anything that happened before the illness 
                that you feel may have been<br />a contributing factor:</label>
            <%= Html.TextArea("CommentBuildUpToIllness", Model.IllnessDetail.CommentBuildUpToIllness, new { @rows="10", @cols="46"})%>
            <%= Html.ValidationMessage("CommentBuildUpToIllness", "*") %>
        </p>
    </fieldset>

The controller doesn't need to be shown, as the json delivered is correct.

Edited by awrigley on Feb 23, 2010 07:02 AM

Reply

awrigley

Member

5 Points

20 Posts

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 09:52 AM|LINK

I have put a test page online at:

http://test.encephalitis.info/members/illnessdetail/test

When you change the value in the second ddl, say to Viral Encephalitis, an alert pops up telling you the value you selected...

Andrew

Reply

malcolms

All-Star

18687 Points

3124 Posts

MVP

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 09:56 AM|LINK

Your problem is this:

<div condition="false" breakpoint="true" executable="true" role="presentation">var selection = $("#IdEncephalitisSubType > option:selected").val(); </div>

Change that line to this and it'll work;

var selection = $("#IdEncephalitisSubType option:selected").val();

Edited by malcolms on Feb 23, 2010 09:59 AM

Reply

awrigley

Member

5 Points

20 Posts

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 10:35 AM|LINK

Malcolm

Thanks the correction, but unfortunately, that doesn't work either. Nor does:

$("#IdEncephalitisSubType").val();

Same results.

There is an online sample at:

http://test.encephalitis.info/Members/IllnessDetail/Test

Noting your 5 stars, any chance you can have a look? I feel there has to be some interaction between the ddl.change()

functions, what with emptying and setting new values. But I really don't have a clue...

Reply

malcolms

All-Star

18687 Points

3124 Posts

MVP

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 10:46 AM|LINK

This will definately get the selected object from the drop down:

var selelcted = $("#IdEncephalitisSubType option:selected")

If that doesn't work then there's something else happening. Is the drop down dynamically generated?

Reply

awrigley

Member

5 Points

20 Posts

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 11:45 AM|LINK

Cracked it!!!!!!

The problem was in the json callback:

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">$.each(json, function(index, optionData) {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> ddlEst.append("<option value='"</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> + optionData.Id</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> + "'>" + optionData.Name</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> + "</option>");</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> i++;</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> });</div>

$.each(json, function(index, optionData) {
                    ddlEst.append("<option value='"
                        + optionData.Id
                        + "'>" + optionData.Name
                        + "</option>");
                    i++;
                });

optionData.Id is not the right name for the field! Oh, **&^%$£"!¬

Marked as answer by awrigley on Feb 23, 2010 04:19 PM

Reply

awrigley

Member

5 Points

20 Posts

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 11:51 AM|LINK

Malcolm

Many thanks, I suddenly saw the problem, so all is well. It was, as described above, generated on the fly via an ajax call. I had edited the autonomous types used to create the different SelectList so that they all followed the same pattern (Id, Name), but forgot to change the jQuery getJson callback to reflect the changes...

Many thanks, yours was as good as an answer, but can't mark it as such so as not to confuse anyone else comes looking at this thread.

Thanks

Andrew

Reply

malcolms

All-Star

18687 Points

3124 Posts

MVP

Re: dropdownlist jquery ddl.change() event fires before change takes place

Feb 23, 2010 12:12 PM|LINK

No problem. Glad you got it working :)

dropdownlist jquery ddl.change() event fires before change takes place RSS

9 replies

awrigley

dropdownlist jquery ddl.change() event fires before change takes place

raju dasa

Re: dropdownlist jquery ddl.change() event fires before change takes place

awrigley

Re: dropdownlist jquery ddl.change() event fires before change takes place

awrigley

Re: dropdownlist jquery ddl.change() event fires before change takes place

malcolms

Re: dropdownlist jquery ddl.change() event fires before change takes place

awrigley

Re: dropdownlist jquery ddl.change() event fires before change takes place

malcolms

Re: dropdownlist jquery ddl.change() event fires before change takes place

awrigley

Re: dropdownlist jquery ddl.change() event fires before change takes place

awrigley

Re: dropdownlist jquery ddl.change() event fires before change takes place

malcolms

Re: dropdownlist jquery ddl.change() event fires before change takes place

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft