Jquery: Выбирать выбор динамического <select> с результата с Аяксом

Следующий код делает консультацию в файл 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 (дату) перед инструкцией, если он распределяет стоимость 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.

2
задан 05.04.2016, 05:20
2 ответа

Он мог бы происходить от просьб AJAX, потому что они асинхронные, так что дата прибывает до того, как возможно создавать твой 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 Док

1
ответ дан 24.11.2019, 14:39
  • 1
    async: false, это не рекомендуемая практика, мне не кажется хорошей идеей размещать ее как подсказка. – Wilfredo 04.04.2016, 15:33
  • 2
    У тебя есть raz и # 243; n. Несмотря на то, что он рекомендовал подарите, из-за хороших практик, tambi и # 233; n suger и # 237; async: false, который замораживает ее p и # 225; gina пока он получает ответ сервера. – Adrian Ortiz Martinez 04.04.2016, 21:58

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

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

Метод then jQuery возвращает обещание encadenable, который ты можешь продолжать называть и можешь использовать 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
    });

Внизу я оставляю тебе demo, как ты был бы должен располагать в порядке твой код.

$(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>

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

0
ответ дан 24.11.2019, 14:39