Ajouter dynamiquement l'élément de formulaire

Question

J'ai fait de mon mieux pour rechercher des recherches et des titres suggérés, mais je n'ai pas trouvé de réponse. J'ai une page mobile jQuery qui est générée via PHP.

Donc sur cette page j'ai obtenu une liste déroulante (ville) et en sélectionnant la ville, je veux qu'une seconde liste déroulante apparaisse en dessous de celle-ci, une contenant des banlieues. J'ai une page php qui crache le html nécessaire pour l'injection.

$('#city').change(function() { 
    alert($('#city').val()); 
    if($('#city').val() != "") { 
    $.get('get_burb.php', { city: $('#city').val() }, function(data) { 
     alert(data); 
    }); 
    } 
}); 

tout vérifie, les données sont exactement ce dont j'ai besoin. alors où est-ce que je mets ça maintenant? désolé pour le newbness, je ne peux pas enrouler ma tête autour de ce truc jQuery.

modifier:

après ne fait rien pour lui, il était à l'intérieur d'un fieldcontain, m'a pris un certain temps pour comprendre cela. aussi, il y avait le problème que le champ nouvellement injecté n'a pas eu le style de contrôles standard. De plus, si l'utilisateur change la ville, nous devons recharger le code HTML et le supprimer complètement si la ville n'a pas de '' burbs ''.

après d'innombrables essais et échoue, je suis le travail en mettant un div vide (#Ici) à l'intérieur du fieldcontain puis jouer avec elle comme ceci:

$('#city').change(function() { 
    //alert($('#city').val()); 
    if($('#city').val() != "") { 
     $.get('get_burb.php', { city: $('#city').val() }, function(data) { 
      $('#burb').remove(); 
      $('#here').empty(); 
      $("#here").append(data).trigger('create'); 
     }); 
    } else { 
     $('#burb').remove(); 
     $('#here').empty(); 
    } 
}); 

Answer 1

Essayez:

$('#city').after(data) 

Devrait faire l'affaire. Cela va insérer le code HTML dans data après la zone de sélection avec l'ID city.

Answer 2

départ .after()

$('#city').after(...) 

Answer 3

la partie que vous rencontrez probablement problème avec « obtenir autour de votre tête » est que JQMobile utilise HTML pour générer d'autres HTML lors de l'exécution. Ainsi, une liste par exemple peut être générée dans un sens avant le rendu de la page, et son apparence est différente (en termes de balises html) une fois le rendu effectué. Cela m'a dérouté pendant un moment.

Je recommande que firebug se penche sur ce qui se passe dans votre page pour essayer de comprendre ce qui se passe au début et ce à quoi ils aboutissent. Certaines fonctions JQM appellent la fonction page() qui rendra les contrôles correctement, c'est-à-dire les transformera en ce que vous voyez sur la page, et d'autres ne le feront pas. Sachant cela, devrait vous aider à identifier ce que votre problème est réel. Avec les listes déroulantes, vous constaterez probablement que vos données sont en cours de modification et nécessiteront probablement un appel de fonction quelconque pour les mettre à jour.