ASP.Net MVC Jquery AJAX call does render html in viewsource

Question

I am using the following jQuery to fill up cascading dropdown -

<script type="text/javascript">
    $(document).ready(function () {

  $("#ddlBrand1").change(function () {

  $.getJSON("URL", { id: idBrand },
        function (carModelData) {
            $("#ddlModel1").removeAttr('disabled');
            var select = $("#ddlModel1");
            select.empty();

            select.append($('<option/>', { value: '', text: "---Select Model---" }));
            $.each(carModelData, function (index, itemData) {
                select.append($('<option/>').val(itemData.Value).html(itemData.Text ));
            });
        });
  });

It binds the dropdown properly but the issue is that it does not generate HTML, when I look at viewsource, the dropdown values are not available there.

I keep selected dropdown values in viewbag and after postback, I fill up the dependent dropdown again. I'm trying to set selected dropdown as it was before postback but it is not working.

Chris Like · Accepted Answer · 2012-12-11 20:21:22Z

1

Instead of options.append($("<option />").val(item.ImageFolderID).text(item.Name)); you will want to use:

options.append($("<option />").val(item.ImageFolderID).html(item.Name));

Setting html() instead of text() for a dropdown option will allow it to exist in the generated source.

Edit

Because you want to clear out the select collection, you'll need to run a jQuery selection on the element again. Instead of saving it in a variable (normally helpful), you'll need to update the contents after you make changes.

You may want to try something more like this:

//Use this to clear the select & add the default first option:
$('#dd1Model1').find('option').remove().end().append('<option value="">---Select Model---</option>').val('');
//Use this to populate the select
$.each(carModelData, function(index, itemData) {
   $('#dd1Model1').append('<option value="' + itemData.Value + '">' + itemData.Text + '</option>').val(itemData.Value);
});
//Use this to select the first option by default
$('#dd1Model1 option:eq(0)').attr('selected', 'selected');

edited Dec 11, 2012 at 20:21

answered Dec 11, 2012 at 5:44

Chris Like

2801 silver badge9 bronze badges

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

3 Comments

Paul Over a year ago

please look at modified code> it still does not render html>>

Paul Over a year ago

Thanks Chris. Still it does not generate html in viewsource. HTML generated in viewsource is as given bello : <select id="ddlModel1" name="ddlModel1" class="dropdown" style="width: 150px;"> <option value="0">---Select Model---</option> </select>

Chris Like Over a year ago

So this means that the select gets cleared and populated with the default entry, but the data that is supposed to return from the $.getJSON is not appearing. I suggest stubbing the Ajax request with guaranteed data as a way to test the select box population method.

kbvishnu · Accepted Answer · 2012-12-13 06:17:00Z

Paul, where you are calling this function ? I think you need to call this inside the document.ready function.

Also you need to bind the model with the value selected . So that it will be available in the html. There is not post back, once you send the data, there is no session management. The response will be a fresh page based on the model you made from controller.

I suspects that the script is not executed after the response or in your post back. Please verify.So the because of ajax loading or the script is not executed, the html doesn't contains the values.Make sure that the script you provided is working.

Please update the question with your document ready.

EDIT

$("#ddlBrand1").change(function () { //this will trigger only when ddlBrand1 changes

  $.getJSON("URL", { id: idBrand },
        function (carModelData) {
             // check this line of code executes ?
             // alert(carModelData) may expected to return some thing 
             //  other than null
            $("#ddlModel1").removeAttr('disabled');
              // makes ddlModel1 active
            var select = $("#ddlModel1");
            select.empty();
              // clears the items of #ddlModel1  
            select.append($('<option/>', { value: '', text: "---Select Model---" }));
              // adds new --Select-- (you can give value as 0)
            $.each(carModelData, function (index, itemData) {
                select.append($('<option/>').val(itemData.Value).html(itemData.Text ));
            });
             // this will loops the JSON result from the server and
                 adds the option (items)  
        });
  });

Trouble Shooting Techniques

1.This function will call only when 'ddlBrand1' changes. For this to
    happen ddlBrand1 needs to have more than one option.
2. Check whether getJSON returns a proper value.
3. Verify the url,parameters and the result (here carModelData). Alert it.
4. Also verify the response from server is not null. 
       You need to verify the controller, action etc. An error occurred in controller
    also leads to same issue.
5. Refer this below  and add .error,.sucess,.complete

The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.getJSON(), to chain multiple .success(), .complete(), and .error() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.Click here url

Collectives™ on Stack Overflow

ASP.Net MVC Jquery AJAX call does render html in viewsource

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related