Unable to assign Model value to javascript variable

Question

I use an autocomplete to introduce the description of a product and get the ProductID and the Price with a javascript function:

<script type="text/javascript">
  $(document).ready(function () {
    $(function () {
      $("#Description").change(function () {
        $("#ProductID").val(Description_autocomplete_hidden.value);
        $("#Price").load('@Url.Action("GetPrice", "Product")', { id: parseInt($("#ProductID").val()) });
      });
    });
  });
</script>

The ProductID works fine, the action, e.g., “\Product\GetPrice\4” is correctly called but I am unable to assign the product price to the $(“#Price”).

The razor code:

<div class="row">
  <div class="label">@Html.Label("Product")</div>
  <div class="input">@Html.AutoComplete("Description","","Product","_Shared")</div>
</div>
<div id ="ProductID"></div>
<br />

<div class="row">
  <div class="label">@Html.Label("Price")</div>
  <div class="input">@Html.Editor("Price")</div>
</div>

The GetPrice() in the Product controller:

public string GetPrice(int id)
{
  return unitOfWork.ProductRepository.GetByID(id).Pvp1.ToString();
}

@Joao, Can't suggest any thing until you post GetPrice method's code. — Bishnu Paudel
– Bishnu Paudel, Commented Dec 17, 2012 at 23:11
@Joao by the way what would you get if you entered this url \Product\GetPrice\4 in the browser? — Bishnu Paudel
– Bishnu Paudel, Commented Dec 17, 2012 at 23:12
@Bishnu Paudel, I have edited and added de GetPrice(). When I call it, it returns the correct price, e.g., "10" but when I watch $("#Price").val(), I see: "" — Joao
– Joao, Commented Dec 17, 2012 at 23:21

Bishnu Paudel · Accepted Answer · 2012-12-18 04:01:27Z

2

@Carlos is Right! The .load() function tries to set the inner HTML which doesn't work for a text field. You need to set textBox's value to make it work. Simply replace your line $("#Price").load('@Url.Action("GetPrice", "Product")', { id: parseInt($("#ProductID").val()) }); });

With this:

    $.get('@Url.Action("GetPrice", "Product")', { id: parseInt($("#ProductID").val()) },
 function(result) {
        //set the value here    
        $("#Price").val(result);
    });

edited Dec 18, 2012 at 4:01

answered Dec 18, 2012 at 0:22

Bishnu Paudel

2,0891 gold badge22 silver badges39 bronze badges

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

Comments

Karol · Accepted Answer · 2012-12-17 23:32:22Z

1

Look here:

http://api.jquery.com/load/

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document.

According to what is written there, jQuery load method cannot be used to set value attribute of your input.

Please use this: http://api.jquery.com/jQuery.ajax/

It will give you more options. Also in success callback you can use returned value wherever you want, in your case to assign value to input:

$("#Price").val(data);

answered Dec 17, 2012 at 23:32

Karol

8,09313 gold badges51 silver badges68 bronze badges

Comments

Nighil · Accepted Answer · 2012-12-18 03:55:04Z

1

$(document).ready(function () {
    $(function () {
      $("#Description").change(function () {
        $("#ProductID").val(Description_autocomplete_hidden.value);
  $.ajax({
                        url: '@Url.Action("GetPrice", "Product")',
                        data: { id: parseInt($("#ProductID").val()) },
                        dataType: 'text',
                        type: 'get',
                        success: function (data) {
                           $("#Price").val(data); // 
                        }
                    });        
      });
    });
  });

try this

answered Dec 18, 2012 at 3:55

Nighil

4,1277 gold badges34 silver badges58 bronze badges

Collectives™ on Stack Overflow

Unable to assign Model value to javascript variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related