jquery change function on dropdown value

Question

I have a dropdown in my view to which i want to apply jquery(ajax onChange value). So that JSon data passed for the selected value by controller action rendered over the same view by replacing some id of that view
Dropdown

<div><select id="package_master" name="package_master"><option value="">
--select package--</option>
<option value="1">JPMC Package1</option>
<option value="2">JPMC Package 2</option>
<option value="3">JPMC Package1</option>
<option value="5">Select Package</option>
<option value="6">Select Package</option>
</select></div>

What i am presently doing is

<script type="text/javascript">
$(function () { //$(document).ready(function () {
    $("#package_master").change(function () {
        var value = $('#package_master').val();
        jQuery.ajax({
        type: "POST",

        url: "@Url.Content("~/Test/getPackageDetails/")",
        data: "packageID="+value,
       success: function(data){//here i want to Replace come id with json data passed by action
</script>

url is url: "@Url.Content("~/Test/getPackageDetails/")",

Complete Above script

Updated:
I used following script to accomplish my task which is working fine too, but data is displayed in array format like ["abc","xyz"]
Now here i need help to format json data in row format i.e 1 row for each array element like
abc
xyz

`

    <script type="text/javascript">
      $(function () { //$(document).ready(function () {
      $("#package_master").change(function () {
        var value = $('#package_master').val();
        jQuery.ajax({
        type: "POST",

        url: "@Url.Content("~/Test/getPackageDetails/")",
        data: "packageID="+value,

      success: function(data){

        $("#packageDetails").html(JSON.stringify(data));

        },
        error: function(data){
        alert("Request couldn't be processed. Please try again later. the reason "+data);
        }
        });

    });
});

`

Yup true . I tried a lot to explain my asked context but fails everytime — RollerCosta
– RollerCosta, Commented Dec 27, 2011 at 6:56
Sure. Commonly, questions have a Question mark '?'. What is your question here? — Roko C. Buljan
– Roko C. Buljan, Commented Dec 27, 2011 at 6:58
Thanks roXon i'll take care of it in future. My question is to "complete above script" to replace some view id(say <div id="displayJsonData"/) with json data on sucess — RollerCosta
– RollerCosta, Commented Dec 27, 2011 at 7:01

Hossein Raziee · Accepted Answer · 2011-12-27 07:03:18Z

2

<script>
    $(function () {
        $("#package_master").change(function () {
            var data = { packageID: $(this).val() }
            $.post("url", data, function (backdata, status) {
                // callback, do something
            }, "json");
        });
    });
</script>

answered Dec 27, 2011 at 7:03

Hossein Raziee

465 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roko C. Buljan Over a year ago

Nice and simple. +1. Just missing a semicolon in line 3

RollerCosta · Accepted Answer · 2011-12-27 07:46:32Z

2

<script type="text/javascript">
$(function () { //$(document).ready(function () {
    $("#package_master").change(function () {
        var value = $('#package_master').val();
        jQuery.ajax({
        type: "POST",

        url: "@Url.Content("~/Test/getPackageDetails/")",
        data: "packageID="+value,
       success: function(data){
      data = $.map(data, function (item, a)
      {
      return " "+item+ "<br>";
      });
      $("#packageDetails").html(data.join(""));

       },

        error: function(data){
        alert("Request couldn't be processed. Please try again later. the reason        "+data);
        }
        });

    });
});

answered Dec 27, 2011 at 7:46

RollerCosta

5,23410 gold badges57 silver badges71 bronze badges

Comments

Tom van der Woerdt · Accepted Answer · 2011-12-27 16:03:30Z

0

jQuery ajax function has an option: dataType: "json"

Since you are using JSON.stringify(data) you need this parameter as dataType: "text"

So there's no need for JSON.stringify(data).

edited Dec 27, 2011 at 16:03

Tom van der Woerdt

30k7 gold badges76 silver badges105 bronze badges

answered Dec 27, 2011 at 7:36

musti77

213 bronze badges

1 Comment

musti77 Over a year ago

try jQuery.ajax({ type: "POST",dataType: "json",.... }); without JSON.stringify

Zsolt Botykai · Accepted Answer · 2012-01-04 07:59:26Z

0

 $(function () { $(document).ready(function () {
    $("#package_master").change(function () {
        var packageID = $('#package_master').val();

        $.post("@Url.Content("~/Test/getPackageDetails/")", {packageID : packageID},         function (data) {
      $("#packageDetails").html("");
       $.each(data,function(i,field){
       $("#packageDetails").append(i+1+" "+field+"<br/>");
       });

        }, "json");
     }); 
   });

Alternatively you can use

$("#packageDetails").$(selector).load(url,data,function(response,status,xhr))

for other solutions, see here. And I'd recommend to avoid using $.ajax if you have some alt.

edited Jan 4, 2012 at 7:59

Zsolt Botykai

52k14 gold badges90 silver badges111 bronze badges

answered Jan 4, 2012 at 6:05

RollerCosta

5,23410 gold badges57 silver badges71 bronze badges

3 Comments

RollerCosta Over a year ago

But doing this i'll append returned data to previous data(returned for previous value change) (Appends content to the HTML of selected elements). i.e if i change dropdown value twice then packageDetails i'll hold data for both value change. Need Solution

RollerCosta Over a year ago

@dhiraj and gimme brk there always a better way to do things. My way to do this is :: add $("#packageDetails").html(""); this line just above each statement. This will provide empty packageDetails for each loop

RollerCosta Over a year ago

additionally you can use replaceall() also

Collectives™ on Stack Overflow

jquery change function on dropdown value

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related