Sélection d'une "option de sélection" après l'avoir créée avec ajax

Question

J'ai une page qui a une série de sélections "connexes". Tout fonctionne correctement, SAUF s'il y a une option présélectionnée. Je peux mettre la "présélection" au travail si je mets une "alerte" dans le code mais sans elle ça ne marche pas.

Par exemple:

function loader(){ 
    if ($("#prod_1").val() > 0){ 
     switchBatch(1); 
     $('#batch_1').val('15'); 
     updateMax(1); 
    } 
    if ($("#prod_2").val() > 0){ 
     switchBatch(2); 
     alert('yup'); 
     $('#batch_2').val('35'); 
     updateMax(2); 
    } 
} 
$(function() { 
    loader(); 
}); 

Le second qui a le "alert ('Yup');" dans cela fonctionne mais le premier ne le fait pas. Le "switchBatch()" est une fonction qui charge les options (à partir d'un appel ajax) dans le contrôle de sélection de lot. Les deux instances chargent les options mais seule la seconde sélectionne l'option correcte.

Des suggestions?

Lance

Voici la chose:

<script> 
    maxVals = []; 
    function switchBatch(idNum){ 
     maxVals = []; 
     $("#max_"+idNum).val(''); 
     $.ajax({ 
      type: "POST", 
      url: "/cfc/product.cfc?method=pialJson", 
      data: ({ 
       productID: $("#prod_"+idNum).val() 
      }), 
      dataType: "json", 
      success: function(result){ 
       options = ''; 
       var colMap = new Object(); 
       for(var i = 0; i < result.COLUMNS.length; i++) { 
        colMap[result.COLUMNS[i]] = i; 
       } 
       for (var i = 0; i < result.DATA.length; i++){ 
        options += '<option value="' + result.DATA[i][colMap["BATCHID"]] + '">' + result.DATA[i][colMap["BATCHNAME"]]+ '</option>'; 
        maxVals[i] = result.DATA[i][colMap["INSTOCK"]]; 
       } 
       $("select#batch_"+idNum).html(options); 
       updateMax(idNum); 
      } 
     }); 
    } 
    function updateMax(idNum){ 
     thisOne = $("#batch_"+idNum).attr("selectedIndex"); 
     $("#max_"+idNum).val(maxVals[thisOne]); 
     checkMax(idNum); 
    } 
    function checkMax(idNum){ 
     $("#qty_"+idNum).removeClass('red'); 
     if ($("#qty_"+idNum).val() > $("#max_"+idNum).val()){ 
      $("#qty_"+idNum).addClass('red'); 
     } 
    } 

    function loader(){ 
     if ($("#prod_1").val() > 0){ 
      switchBatch(1); 
      alert('yup'); 
      $('#batch_1').val('<cfoutput>#batch_1#</cfoutput>'); 
      updateMax(1); 
     } 
     if ($("#prod_2").val() > 0){ 
      switchBatch(2); 
      alert('yup'); 
      $('#batch_2').val('<cfoutput>#batch_2#</cfoutput>'); 
      updateMax(2); 
     } 
    } 
    $(function() { 
     loader(); 
    }); 
</script> 

Answer 1

Demandez à votre fonction switchBatch() d'accepter un autre argument, qui est une fonction contenant le code que vous essayez d'exécuter après la requête AJAX.

ensuite appeler cette fonction dans le rappel success: pour la requête AJAX dans switchBatch().

function loader(){ 
    if ($("#prod_1").val() > 0) { 
     switchBatch(1, function() { 
      $('#batch_1').val('15'); 
      updateMax(1); // right now this is being called in switchBatch() as well 
     } 
     ); 
    } 
    if ($("#prod_2").val() > 0) { 
     switchBatch(2, function() { 
      $('#batch_2').val('35'); 
      updateMax(2); // right now this is being called in switchBatch() as well 
     } 
     ); 
    } 
} 

    // function argument -------v 
function switchBatch(idNum, func){ 
     maxVals = []; 
     $("#max_"+idNum).val(''); 
     $.ajax({ 
      type: "POST", 
      url: "/cfc/product.cfc?method=pialJson", 
      data: ({ 
       productID: $("#prod_"+idNum).val() 
      }), 
      dataType: "json", 
      success: function(result){ 
       options = ''; 
       var colMap = new Object(); 
       for(var i = 0; i < result.COLUMNS.length; i++) { 
        colMap[result.COLUMNS[i]] = i; 
       } 
       for (var i = 0; i < result.DATA.length; i++){ 
        options += '<option value="' + result.DATA[i][colMap["BATCHID"]] + '">' + result.DATA[i][colMap["BATCHNAME"]]+ '</option>'; 
        maxVals[i] = result.DATA[i][colMap["INSTOCK"]]; 
       } 
       $("select#batch_"+idNum).html(options); 

        // call the function that was passed in 
       func.call(null); 
       updateMax(idNum); // updateMax is being called in the function that is 
            // passed in. You probably don't need it in both places 
      } 
     }); 
    } 

Answer 2

Sans le code de updateMax(), il est difficile de dire ce qui se passe exactement.

Une approche que vous pouvez essayer, attacher updateMax() à l'auditeur onchange de la commande de sélection (à savoir $('#selectID').change(updateMax)), et au lieu d'appeler updateMax(), faire $('#selectID').change().

Answer 3

Je pense que les pré-sélections ne fonctionnent pas parce que la fonction "switchBatch()" utilise ajax. Le code JavaScript après l'appel de "switchBatch()" est exécuté avant la fin de l'appel ajax, donc les éléments select sont vides. Mais cela fonctionne dans le second if-block à cause de alert(), qui donne assez de temps à l'appel ajax pour compléter et remplir l'élément select.