jQuery parent()

Question

J'ai besoin d'aide avec parent() dans jQuery.

J'ai une liste d'images, chacune suivie d'une forme, où l'utilisateur peut effectuer certaines actions, comme changer la description de l'image, etc.

<div id='items_list' class='items_list' >    
<div id='item_209' class='item_details' > 
<form action='actions_dispatch2.php' method='post' name='update_image_details' class='form'> 
    <input name='originator' type='hidden' value='/list_images3.php' /> 
    <input name='album_id' type='hidden' value='27' /> 
    <input name='image_id' type='hidden' value='209' /> 
    <input name='is_gallery' type='hidden' value='N' /> 
    <input name='language' type='hidden' value='1' /> 

<div class='item_img'> 
    <img src=' images/square_thumbnails_75x75/209.jpg'/>   
</div> <!-- end div item_img --> 

<div class='item_description'> 
    <h3> title </h3> 
    <h4> some description...</h4> 
</div> <!-- end div item_description --> 

<div class='item_buttons' parameters='&album_id=27&image_id=209&is_gallery=N&language=1&originator=/list_images3.php'> 
    <a href='/actions_dispatch2.php' action='modify_image' title='Modify' rel='#overlay'> 
    <input name='modify_image' type='submit' value='modify' class='button' /> 
    </a> 
</div> <!-- end div item_buttons --> 
</form> 

</div> <!-- end div item_details (for content to modify)-->  

<div id='item_208' class='item_details' > 
<!-- ...and it keeps going with another image... --> 

J'ai aussi une fonction jQuery qui devrait récupérer certains paramètres à passer à action_dispatch2.php:

$(function() { 

    // if the function argument is given to overlay, 
    // it is assumed to be the onBeforeLoad event listener 
    $("a[rel]").overlay({ 

    onBeforeLoad: function() { 

    // grab wrapper element inside content 
    var wrap = this.getContent().find(".contentWrap"); 

    // get page to load and action from href attribute in link 
    var page_to_load = this.getTrigger().attr("href"); 
    var action = this.getTrigger().attr("action"); 

    //get parameters from field parameters in parent div (item_buttons) 
    var parameters = this.getTrigger().parent().attr("parameters"); 

    // load the page specified in the trigger 
    wrap.load(page_to_load + "?action=" + action + parameters); 

    } 

    }); 
    }); 

Eh bien, je suis en mesure de récupérer les href et attributs action, mais ne peuvent pas récupérer les paramètres, ce qui est le parent() div. la variable paramètres devient 'indéfinie' La chose étrange est que j'ai une autre page, très similaire (celle-là montre une liste d'albums), où je suis capable de récupérer ce paramètre ok!

Je ne sais pas quel pourrait être le problème! pouvez-vous me pointer dans la bonne direction? J'ai Firebug installé, mais ne sais pas exactement comment l'utiliser pour suivre cette variable, si possible ..

merci, patrick

Answer 1

vous devez $(this) au lieu de this. this sera l'élément, donc pour appeler des fonctions jQuery, il doit être enveloppé dans un objet jQuery en passant dans $()

$(function() { 

     // if the function argument is given to overlay, 
     // it is assumed to be the onBeforeLoad event listener 
     $("a[rel]").overlay({ 

     onBeforeLoad: function() { 

     // grab wrapper element inside content 

     // store jQuery object in local variable 
     var $this = $(this); 

     // I would advise using the element tag here 
     // instead of just the class as it will be faster 
     // across all browsers 
     var wrap = $this.getContent().find(".contentWrap"); 

     // get page to load and action from href attribute in link 
     var page_to_load = $this.getTrigger().attr("href"); 
     var action = $this.getTrigger().attr("action"); 

     //get parameters from field parameters in parent div (item_buttons) 
     var parameters = $this.getTrigger().parent().attr("parameters"); 

     // load the page specified in the trigger 
     wrap.load(page_to_load + "?action=" + action + parameters); 

     } 

     }); 
}); 

Answer 2

Je l'échantillon élargi pour créer un test et ... parameters a tenu le bon valeur. Ce qui n'a pas fonctionné était de passer les paramètres à actions_dispatch2.php. Essayez de passer les paramètres comme second argument à load(...):

wrap.load(page_to_load, "action=" + action + parameters); 

Edit: grève, il fonctionne sous Safari 4.0.3 et 3.5 FF dans les deux sens dans mon cas de test. Cela vaut la peine d'essayer, mais ce n'est probablement pas la solution.

Nous avons besoin d'un cas de test minimal complet, car ce qui est prévu fonctionnera.

Une alternative consiste à supprimer l'attribut "paramètres", qui est une duplication non standard et non nécessaire des données dans les entrées de formulaire. Étendre jQuery avec une méthode pour collecter les paramètres:

jQuery.extend(jQuery.fn, {parameters: 
    function(type) { 
    type = type || ''; 
    var params = this.children('input'+type).map(function (i) { 
     if (this.value) { 
      return this.name + '=' + this.value; 
     } else { 
      return this.name; 
     } 
     } 
    ); 
    return Array.prototype.join.call(params, '&'); 
    } 
}); 

Ensuite, dans votre gestionnaire de onBeforeLoad:

var parameters = '&' + this.getTrigger().closest('form').parameters(':hidden'); 

Vous pourriez probablement quitter le ': caché' argument. Si vous le souhaitez, vous pouvez modifier parameters pour prendre en outre plusieurs types (par exemple, un tableau de sélecteurs) pour obtenir les paramètres de plusieurs types d'entrée.

En ce qui concerne les pointeurs de Firebug, voir:

• Introduction To Firebug
• Build Better Pages With Firebug
• Firebug screencast