CODEWITHSUNDEEP
jqueryasp.net
asifa
asifa

Reputation: 771

jquery change event without postback

I have a listbox and on a particular selected value i want to display a dropdown and on selection of a value from the dropdown i want to display another dropdown.

I have achieved this using jquery but the dropdowns are displayed only after postback. How to avoid the postbacks ?

This is my jquery code

<script type="text/javascript">
$(document).ready(function () {
    if ($('#<%=under_list1.ClientID %> option:selected').val() == 0) {
        $("#ddl_nature1").show();
        $("#ddl_gross1").hide();
        if ($('#<%=ddl_nature.ClientID %> option:selected').val() == 'I', $('#<%=ddl_nature.ClientID %> option:selected').val() == 'E') {
            $("#ddl_gross1").show();

        }
        else {
            $("#ddl_gross1").hide();

        }
    }
    else {
        $("#ddl_nature1").hide();
        $("#ddl_gross1").hide();
    }
});

under_list1 is my listbox id, ddl_nature1 is my first dropdown and ddl_gross1 is my second dropdown.

Upvotes: 0

Views: 1129

Answers (2)

Ulhas Tuscano
Ulhas Tuscano

Reputation: 5620

Why dont u use Ajax PageLoad function. As pageLoad function will be called after each PostBack.

   function pageLoad()
    {
      if ($('#<%=under_list1.ClientID %> option:selected').val() == 0) {
            $("#ddl_nature1").show();
            $("#ddl_gross1").hide();
            if ($('#<%=ddl_nature.ClientID %> option:selected').val() == 'I', $('#<%=ddl_nature.ClientID %> option:selected').val() == 'E') {
                $("#ddl_gross1").show();

            }
            else {
                $("#ddl_gross1").hide();

            }
        }
        else {
            $("#ddl_nature1").hide();
            $("#ddl_gross1").hide();
        }

}

Upvotes: 0

Aristos
Aristos

Reputation: 66649

You need to add the same check on dropdownlist change. I place here the change of the dropdownlist on a common function, and call it ones the dropdownlist change, and ones when the DOM is ready (witch is the after post back).

$('#<%=ddl_nature.ClientID %>').change(function() {
  ChangeViews();
});


$(document).ready(function () {
    ChangeViews();
});

function ChangeViews()
{
    if ($('#<%=under_list1.ClientID %> option:selected').val() == 0) {
        $("#ddl_nature1").show();
        $("#ddl_gross1").hide();
        if ($('#<%=ddl_nature.ClientID %> option:selected').val() == 'I', $('#<%=ddl_nature.ClientID %> option:selected').val() == 'E') {
            $("#ddl_gross1").show();
        }
        else {
            $("#ddl_gross1").hide();
        }
    }
    else {
        $("#ddl_nature1").hide();
        $("#ddl_gross1").hide();
    }
}

Upvotes: 1

Related Questions