CODEWITHSUNDEEP
jqueryajaxasp.net-mvchtml-rendering
Paul
Paul

Reputation: 467

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

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.

Upvotes: 1

Views: 547

Answers (2)

kbvishnu
kbvishnu

Reputation: 15648

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

Upvotes: 0

Chris Like
Chris Like

Reputation: 280

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

Upvotes: 1

Related Questions