How popular a select with JQuery

1

I have a registration screen where the user can add or not phone numbers. I am adding fields to insert the phone dynamically, but one of these fields is a select that will bring data from the database. My jquery is hitting the controller and it is returning the list with the database data, but it is not populating the select, I do not know where the error is. in console.log there is nothing.

Html

<button type="button" id="btnAddTelefone">Adicionar</button>
        <table id="tblTelefones">
            <thead>
                <tr>
                    <td>DDD</td>
                    <td>Numero</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

JQuery

$("#tblTelefones tbody").append("<tr>" +
                        "<td><select id='ddlTipoTelefone' name='ddlTipoTelefone'><option value>---Selecione um Tipo---</option></select></td>" +
                        "<td><input id='txtDDD'></td>" +
                        "<td><input id='txtNumero'></td>" +
                        "<td><input id='txtRamal'></td>" +
                        "<td class='bto'><button type='button' class='bt-salvar'>Salvar</button></td></tr>");

                        $.ajax({
                            type: "get",
                            url: "/Prestador/GetAllTipoAcessoTelefone",
                            data: { tipos: $("#ddlTipoTelefone").val() },
                            dataType: 'json',
                            contentType: "application/json; charset=utf-8",
                            success: function (obj) {

                                if (obj != null) {
                                    var data = obj.data;
                                    var selectbox = $('#ddlTipoTelefone');
                                    alert(data);
                                    //selectbox.find('option').remove();
                                    $.each(data, function (i, d) {
                                        $('<option>').val(d.TipoId).text(d.TipoNome).appendTo(selectbox);
                                    });
                                }
                            }
                        });

Controller

[HttpGet]
    public JsonResult GetAllTipoAcessoTelefone()
    {
        var lista = _commonService.GetAllTipoAcessoTelefonico()
            .Select(x => new { x.TipoId, x.TipoNome});

        return Json(lista, JsonRequestBehavior.AllowGet);
    }

Does anyone know what it can be?

Note: the alert (date) in the middle appears "undefined".

    
asked by anonymous 23.08.2017 / 22:37

2 answers

0

I just managed to remove the "obj" and leaving only "date".

I leave the solution to the next people.

$.ajax({
  type: "get",
  url: "/Prestador/GetAllTipoAcessoTelefone",
  data: { tipos: $("#ddlTipoTelefone").val() },
  dataType: 'json',
  contentType: "application/json; charset=utf-8",
  success: function (data) {
          var selectbox = $('#ddlTipoTelefone');
          $.each(data, function (i, d) {
              selectbox.append('<option value="' + d.TipoId+ '">' + d.TipoNome + '</option>');
          });
  } });
    
23.08.2017 / 22:54
0

One of the things that can cause the error is that all the properties of the object in json start with the low initial when it comes from the controller, as below.  To see how it's coming it's made a console.log (date) and see how it's coming.  The rest looks right.

$.ajax({
  type: "get",
  url: "/Prestador/GetAllTipoAcessoTelefone",
  data: { tipos: $("#ddlTipoTelefone").val() },
  dataType: 'json',
  contentType: "application/json; charset=utf-8",
  success: function (data) {
          var selectbox = $('#ddlTipoTelefone');
          $.each(data, function (i, d) {
              selectbox.append('<option value="' + d.tipoId+ '">' + d.tipoNome + '</option>');
          });
  } });
    
24.08.2017 / 07:01