Question

I have a view called Forms that I am displaying and it has a dropdownlist. When the dropdownlist has a different selection, I have a jquery that gets called as so:

    $(document).ready(function () {
        $("#myDropDownList").change(function () {
            $.ajax({
                url: '/Home/Forms/' + $("#myDropDownList option:selected").val(),
                type: 'GET',
                success: function (data) {
                // refresh div
                }
            });
        });
    });

Here is My Forms View:

    @model myProject.ViewModels.PageView

    @section JavaScript
    {
       <script type="text/javascript" src="@Url.Content("/Scripts/jquery.myJQuery.js")"></script>
    }

    @Html.DropDownList("myDropDownList", Model.selectList)

    <div id="somediv">
       @Html.Label(Model.ValueThatShouldChange)
    </div>

So when the Forms action gets called again, I have ValueThatShouldChange in my ViewModel that will change and they will be displayed in the div. This is why I want to refresh that div but I am not sure how to do that.

I tried $('#yourdivID').html(data) but it load my entire view in the div.

Answer 1

The easiest way is to use the load() function to load just the specific part of the page you need by selecting it using its id. E.g.:

$("#yourDivId").load("/Home/Forms/ #" + $('#myDropDownList option:selected').val())

Depending on the way your webpage is build (you don’t provide that info), you can also change your Ajax call by including a parameter to load the content you need. E.g.:

$(document).ready(function () {
    $("#myDropDownList").change(function () {
        $.ajax({
            url: '/Home/Forms/' + $("#myDropDownList option:selected").val(),
            data: { id : $('#myDropDownList option:selected').val() }
            type: 'GET',
            success: function (data) {
               $('div#yourDivId').html(data);
            }
        });
    });
});

And in your page you just output the content you need based on the id (if it’s PHP):

<? if (isset($_POST['id'])) {
      if ($_POST['id'] == "somediv") { ?>
         <div id="somediv">Just this content should be loaded</div>
   <? }
   }
   else { ?>
     <!-- your regular html... -->
?  }   ?>