Add record via jquery ajax call to webmethod and update dropdown list.

Question

i manage to add recrod via jquery ajax call to webmethod but i want to update the dropdown list once the record is been added. i dont want to use update panel. what would be the best way of doing that. thanks

Answer 1

The best way would be to update your dropdown when you know the AJAX callback was successful. You already know the name of the option you're adding, so that part is simple, but if you require some .NET logic, say, for the ID of the newly created record, you'd need to have your webmethod return that information.

var name = 'new option';
$.ajax({
    url: '/MyWebService.asmx/MyWebMethod',
    data: '{"name":"'+name+'"}',
    etc...,
    success: function(result) { 

        // this assumes you're returning the ID of the newly created option
        // .net webmethod wrap the responses in a 'd' property of the returned object
        var id = result.d; 

        // simply build the string to create the option to add to the select
        $('#mySelect').append($('<option value="' + id + '">' + name + '</option>'));

    }
});

If you're doing something more advanced on the server side, which requires you to fetch the entire content of the select list from scratch (say there's some tricky translation going on, or just sorting by something that cannot be replicated in javascript), you'll have to return all the information, in a web method that would look something like this:

[WebMethod]
public object[] MyWebMethod(string name) {
    InsertIntoDb(name);

    // something like this, to represent your collection of dropdown items
    // in a list that is similar to [ { id: 1, name: 'abc' }, { id: 2, ...}, ... ]

    return AllItems.Select(i => new {
        id: i.Id,
        name. i.Name
    }).ToArray();
}

Your JavaScript would then be modified to the following:

var name = 'new option';
$.ajax({
    url: '/MyWebService.asmx/MyWebMethod',
    data: '{"name":"'+name+'"}',
    etc...,
    success: function(result) { 

        var sel = $('#mySelect');
        var options = result.d;

        sel.html('');

        for(var i = 0; i < options.length; i++) {
            var opt = options[i];
            sel.append($('<option value="' + opt.id + '">' + opt.name + '</option>'));
        }

    }
});

Answer 2

You can see my answer for other question. If your user using IE or Safari, then it's better to return a full <select> element, then replace the existing <select> element with the new one. This is the sample code to do it:

var loading_image = '<img src="<?php echo FULL_PATH_TO_loading.gif'; ?>" alt="loading..." id="loading-image" />';
//load new select via AJAX
function do_update_time($){
  $("#select_container").after(loading_image);
  var url = 'URL_TO_LOAD_NEW_SELECT';
  $.get(url,
    {},
    function(data){
      $("#loading-image").hide().remove();
      $("#select_container").html(data);
    });
};

For this code, the HTML structure at least must have this:

<span id="select_container">
  <select>
    <option></option>
  </select>
</span>

All content inside <span id="select_container"> will replaced after AJAX call return new response.

If the target user only using Firefox, then using any method to add option to select element will worked.