jQuery Girl
  1. jQuery Girl
  3. Entrée à l’intérieur de Fancybox
Intereting Posts
Accès aux données de modèle ASP.NET MVC à partir d’un fichier Javascript externe Lire plusieurs fichiers audio de manière séquentielle ou aléatoire en arrière-plan à l’aide de HTML5 et de javascript Ruby on Rails Live Search (Filtrage) Primefaces: comment changer l’icône par défaut sur le bouton du champ de calendrier? Poignées redimensionnables personnalisées dans l’interface utilisateur JQuery Est-ce que jQuery s’anime entre deux classes CSS différentes? Comment mettre à jour l’heure de début (!) Dans fullcalendar.js Est-il possible de mettre à jour des données dans ma firebase database SQL avec Javascript? Utilisez jQuery pour supprimer un style en ligne Ajouter un auditeur à la classe ou à l’élément jQuery Tools Scrollable with Mousewheel – faites défiler UNE position et arrêtez-vous Position de CSS fixée. L’emballage div doit être fixé verticalement mais doit varier horizontalement Gérer dblclick dans le plugin Fullcalendar jQuery Comparaison de deux valeurs de liste déroulante jquery ui autocomplete? Comment référencer div dans une fenêtre popup en utilisant jQuery dans un script utilisateur?

Entrée à l’intérieur de Fancybox

J’ai un problème très étrange avec Fancybox.

Je n’arrive pas à obtenir le .val () des entrées affichées dans Fancybox. Ils ont une valeur de “”. Les entrées en dehors de Fancybox fonctionnent toutefois.

Mon code: 

 $(document).ready(function() { $('a#inline').fancybox({ 'hideOnContentClick': false, 'frameWidth': 500, 'frameHeight': $('#avatars').height(), 'callbackOnShow': function() { $('#gallery div img').click(function(){ $('#inline img').attr('src', $(this).attr('class')); $('input#avatar').attr('value', $(this).attr('class')); }); $('button').click(function(){ console.log($('input#search_avatar')); return false; }); } }); });

Et le HTML:

Donc en gros. Je clique sur le lien. La Fancybox apparaît. J’ajoute du texte dans l’entrée (c’est du texte), quand je clique sur le je vais obtenir ceci (dans Firebug): 

 [input#search_avatar, input#search_avatar This is text]

Quand j’exécute ceci: 

 $('#search_avatar').val()

Je reçois: 

 ""

Merci!

Fancybox crée une copie de tous les éléments que vous allez afficher et les place dans un calque séparé. En conséquence, il existe deux éléments d’entrée, l’original et celui que vous modifiez dans une fenêtre Fancybox.

Voici l’image avec une explication visuelle.

Ainsi, lorsque vous essayez d’accéder à la valeur d’entrée “search_avatar”, utilisez le code suivant: 

 $('#search_avatar').val()

jQuery retourne une chaîne vide parce que:

  1. Il sélectionne tous les éléments avec id = search_avatar (il y a deux éléments dans l’arborescence. En fait, c’est une mauvaise idée d’avoir deux éléments avec le même identifiant, vous pouvez donc penser à utiliser des classes au lieu d’id. )
  2. Il renvoie une valeur de la première entrée dans les critères de sélecteur (qui est votre premier élément d’entrée avec une valeur vide).

Pour obtenir une valeur d’élément input située dans une fenêtre Fancybox, vous pouvez simplement étendre l’expression jQuery: 

 $('div#fancy_div input#search_avatar')

Donc, au lieu de cela: 

 $('button').click(function(){ console.log($('input#search_avatar')); return false; });

Vous pouvez essayer le code suivant: 

 $('button#search_avatar_submit').click(function() { var searchAvatar = $('div#fancy_div input#search_avatar'); console.log(searchAvatar, searchAvatar.val()); return false; });

J’espère que cela a du sens et vous aidera.

Cela fonctionne comme un charme, en utilisant les événements live de jQuery: http://docs.jquery.com/Events/live 

 $("#fancy_div #yourbuttonId").live("click", function(){ console.log($("#fancy_div #fieldId").val()); return(false); });