Jquery: Выберите вариант динамического из результата с помощью Ajax

следующий код выполняет запрос к файлу php, где он возвращает одно значение, которое должно быть передано динамическому select, чтобы показать ранее выбранную пользователем опцию для редактирования: 

$.ajax({
    url:  'ruta.php',
    type: 'POST',
    data: {'opcion:consultar'},
    success:function(data){
       $("#nombredelselect").val(data);
    }
});

проблема, которую он представляет, заключается в том, что он не работает, он не присваивает значение select. Я пробовал: 

$("#nombredelselect").val(data);

$("#nombredelselect option[value="+data+"]").attr('selected', 'selected');

$("#nombredelselect option[value="+data+"]").prop('selected', 'selected');

и до сих пор ни один из вариантов не работает, но если я помещаю alert (data) перед оператором, если он присваивает значение select. 

$.ajax({
    url:  'ruta.php',
    type: 'POST',
    data: {'opcion:consultar'},
    success:function(data){
       alert(data);
       $("#nombredelselect").val(data);
    }
});

таким образом, вы можете исправить эту ситуацию, так как вы не должны отображать какие-либо сообщения (alert) перед отображением информации в select.

чтобы заполнить Select, я использую функцию, созданную в javascript, которая выполняет вызов сервера и возвращает мне данные для загрузки: 

function cargarCategoria() {
    var i;
    var lsCategorias = $("#categoria");     
    lsCategorias.find('option').remove().end().append('<option value="0">Seleccione...</option>').val('');
    $.ajax({
        type: 'POST',  
        url: 'controller/categoria_controller.php',
        data: {evento:'listar_categorias'},
        success: function(data){
            var campo = $.parseJSON(data);
            if (campo) {
                for (i in campo) {
                    lsCategorias.append('<option value="' + campo[i].id_categoria + '">' + campo[i].nombre_categoria + '</option>');
                };
            }
        },
        error: function(msg) {
            alert(msg);
        }
    });
};

я просто вызываю функцию в HTML-файле и загружаю Select.

Author: Arnaldo Paredes, 2016-04-03
Source

2 answers

Может быть из-за AJAX запросов, потому что они асинхронны, так что data приходит, прежде чем вы можете создать свой select в вашем DOM. Попробуйте отключить асинхронный запрос с помощью:

Async: false, 

$.ajax({
    url:  'ruta.php',
    type: 'POST',
    data: {'opcion:consultar'},
    async: false,
    success:function(data){
       alert(data);
       $("#nombredelselect").val(data);
    }
});

Я рекомендую вам использовать методы для инкапсуляции и обеспечения порядка, с которым выполняются Ваши запросы. Кроме того, async: false даст то же чувство, что и alert (замораживание страницы при получении ответа) в этом случае с вашего сервера.

Наконец, избегайте "success:" и используйте ".done()", больше в: jQuery Doc

 1
Author: Adrian Ortiz Martinez, 2016-04-04 07:46:21

Одна идея, которую вы могли бы использовать setTimeout чтобы установить varlor позже, то, что динамический select заполнил, но это не очень хорошая идея, и причина этого заключается в том, что никогда не вы должны предположить порядок, в котором будут поступать результаты вызовов AJAX. Существует большое количество факторов, которые могут повлиять на время, необходимое для запроса, поэтому вы должны предположить, что это неизвестно; даже если вы сначала выполнили их, они могут вернуться в другой порядок.

Если вы находитесь в такой ситуации, вам, скорее всего, придется реструктурировать код, чтобы использовать цепочку обещаний или объединение обещаний (зависит от того, чего вы хотите достичь), таким образом, код, который вы хотите выполнить, запускается только тогда, когда у вас есть все необходимые данные.

Метод jQuery then возвращает цепное обещание, которое вы можете продолжать вызывать, и вы можете использовать return для следующий шаг строки будет выполняться с результатом предыдущего обещания. Это преемник ныне устаревшего метода pipe.

Цепочка обещаний

promesa1
    .then(function(resultadoPromesa1) { 
        // éxito
        return promesa 2;
    })
    .then(function(resultadoPromesa2) {
        // éxito
        return promesa3;
    }).then(function(resultadoPromesa3) {
        // éxito y fin de la cadena
    }, function() {
        // error. si algo en la cadena falla se ejecuta este código
    });

Ниже я оставляю вам демонстрацию того, как вы должны структурировать свой код. 

$(function() {
  var mySelect = $('#mySelect');
  $.ajax({
      url: 'datosselect.php',
      type: 'GET'
    })
    .then(function(selectData) {
      // llenar el select con datos
      $.each(selectData, function(index, item) {
        mySelect.append('<option value="' + item.value + '">' + item.text + '</option>');
      });
      // retornar una promesa para el próximo then
      return $.ajax({
        url: 'ruta.php',
        type: 'GET'
      });
    })
    .then(function(data) {
      // establecer el valor en el select
      mySelect.val(data);
    }, function() {
      // si cualquiera de las dos peticiones fallan se ejecuta el alert
      alert('Un error ha ocurrido');
    });
});

//////////////////////////////////////////////////
// Plugin para simular las peticiones al servidor. 
// Este fragmento no pertenece a la respuesta
// Es necesario para que el demo funcione
$.mockjax({
  url: /datosselect.php$/,
  responseText: [{
    value: 1,
    text: 'opcion 1'
  }, {
    value: 2,
    text: 'opcion 2'
  }, {
    value: 3,
    text: 'opcion 3'
  }]
});
$.mockjax({
  url: /ruta.php$/,
  responseText: '2'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jakerella/jquery-mockjax/master/dist/jquery.mockjax.js"></script>
<select id="mySelect"></select>

Как вы видите, он работает, но имеет небольшую проблему, и это то, что select заполняется и в то же время его значение изменяется (когда приходит другой запрос). Для исправить это и сразу же показать, что вы должны использовать метод when который позволяет объединить несколько обещаний и выполнить код, когда все завершены.

Союз обещаний

$.when(promesa1, promesa2, promesa3)
    .then(function(resultado1, resultado2, resultado3) {
     //exito
}, function() {
    // error. si al menos una falla se ejecuta esto
});

Обратите внимание, что результатом when для каждого запроса является массив, в котором первым элементом является ответ вашего сервера

$(function() {
  var mySelect = $('#mySelect');
  $.when(
      $.ajax({
        url: 'datosselect.php',
        type: 'GET'
      }),
      $.ajax({
        url: 'ruta.php',
        type: 'GET'
      })
    )
    .then(function(selectData, data) {
      // llenar el select con datos
      $.each(selectData[0], function(index, item) {
        mySelect.append('<option value="' + item.value + '">' + item.text + '</option>');
      });
      // establecer el valor
      mySelect.val(data[0]);
    }, function() {
      // si cualquiera de las dos peticiones fallan se ejecuta el alert
      alert('Un error ha ocurrido');
    });
});

///////////////////////////////////////////////////
// Plugin para simular las peticiones al servidor. 
// Este fragmento no pertenece a la respuesta
// Es necesario para que el demo funcione
$.mockjax({
  url: /datosselect.php$/,
  responseText: [{
    value: 1,
    text: 'opcion 1'
  }, {
    value: 2,
    text: 'opcion 2'
  }, {
    value: 3,
    text: 'opcion 3'
  }]
});
$.mockjax({
  url: /ruta.php$/,
  responseText: '2'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jakerella/jquery-mockjax/master/dist/jquery.mockjax.js"></script>
<select id="mySelect"></select>

Таким образом, ваши запросы будут запускают одновременно, что сокращает общее время, необходимое для отображения ваших данных на экране.

 1
Author: devconcept, 2016-04-04 20:20:56