CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3jquery
RollerCosta
RollerCosta

Reputation: 5176

jquery change function on dropdown value

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);
        }
        });

    });
});

`

Upvotes: 0

Views: 4471

Answers (4)

RollerCosta
RollerCosta

Reputation: 5176

 $(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.

Upvotes: 0

musti77
musti77

Reputation: 21

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).

Upvotes: 0

RollerCosta
RollerCosta

Reputation: 5176

<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);
        }
        });

    });
});

Upvotes: 2

Hossein Raziee
Hossein Raziee

Reputation: 46

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

Upvotes: 2

Related Questions