Changement de texte sur la base de la page Sélection de la liste Sélectionner et interroger les données sans recharger la page

Question

J'ai une liste Sélectionner sur ma page et en fonction de l'élément sélectionné (chaque élément est un numéro de pièce), le texte de la page qui décrit le Les dimensions de la pièce devraient changer. Les dimensions de chaque partie (Diamètre, Hauteur) sont dans un db. J'appelle la requête en utilisant cfquery.

Les valeurs dans la liste Sélectionner sont les numéros de pièces dans ma requête. Je suppose que ce qui me dérange, c'est d'obtenir les informations dont j'ai besoin de la requête sans recharger la page.

Je suis à la recherche d'un moyen de dire "J'ai cliqué sur l'option 2." Obtenez le diamètre et la hauteur pour 'Option 2' de ma requête, et mettez ces dimensions dans mon tag P. "

Je pense que JQuery pourrait mettre à jour le texte juste une fois que j'ai les nouvelles dimensions, mais je ne suis pas sûr de savoir comment obtenir les dimensions dont j'ai besoin sans recharger. Merci de votre aide!

Answer 1

Ok, j'ai compris cela. J'utilise:

$('#foo').change(function() { 
    $.get('getInfo.cfm', function (data) { $('#output').text(data) }); 
}); 

Et dans mon CFM j'ai mes données de retour dans les parenthèses cfoutput. Fonctionne comme un charme! Merci pour votre aide et vos suggestions, tout le monde!

Answer 2

Il existe essentiellement deux options. Les deux impliquent JavaScript.

La première consiste à stocker toutes les données dans un grand tableau JS. Lorsque l'élément sélectionné de la boîte de sélection change, cet élément est utilisé pour trouver l'élément approprié dans le tableau et l'afficher dans la div appropriée (ou autre).

La deuxième option est similaire, mais au lieu d'utiliser une copie locale de la liste, vous utilisez AJAX pour extraire le texte d'un CFC sur votre serveur.

J'utiliserais la deuxième option s'il y a plus que quelques choix. La première option rend la page plus lente (plus d'éléments, chargement plus lent) mais répondra au changement plus rapidement. L'option AJAX rendra la page initiale plus rapidement, mais vous devrez attendre un voyage du serveur pour le texte affiché. Notez qu'avec l'option AJAX, vous pouvez demander à l'utilisateur d'effectuer d'autres opérations pendant le chargement du texte.

Answer 3

Je suis d'accord avec la deuxième option de Ben. J'ai une application qui a deux menus déroulants un menu est rempli par les données renvoyées de la requête qui est appelée par le premier menu.

Je suggère de vérifier jQuery comme il est un peu plus facile de travailler avec: jQuery Ajax

L'appel à la page ColdFusion doit renvoyer une chaîne. Voici un exemple de jQuery je:

$('#menu1').change(function() { 

    <!-- Get the value of the dropdown menu -->  
    var selected = { menu1:$(this) .val()}  


     $.ajax({ 
      type: "POST", 
      url: "the CFM file name", 
      dataType: "json",    
      data: selected, 
      success: function(response){     

       <!-- if the response from the database is null set the result to "nothing found", else set it to the response --> 
       if (response != "") {      
         $("#output").append(response);             




       } else { 
        $("#output").append("nothing found"); 
       }            

      }//end the success function 

     });// end ajax call   

}); //end menu1 change function 

J'ai modifié mon code pour le rendre (je l'espère) plus facile à comprendre. J'espère que ça aide.