jQuery parent()

Question

Hi Guys

I need some help with parent() in jQuery.

I have a list of images, each followed by a form, where the user can perform some actions, like changing the description of the 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... -->

I also have a jQuery function that should retrieve some parameters to pass to 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);

 } 

 }); 
 });

Well i'm able to retrieve the href and action attributes, but can't retrieve parameters, which is in the parent()div. the variable parameters gets 'undefined' The strange thing is that I have another page, very similar (that one shows a list of albums), where i am able to retrieve that parameter ok!

I don't know what the problem could be! can you point me in the right direction? I have firebug installed but don't know exactly how to use it to track that variable, if possible..

thanks, patrick

Answer 1

you need $(this) instead of this. this will be the element, therefore in order to call jQuery functions, it needs to be wrapped in a jQuery object by passing into $()

$(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

I expanded the sample to create a test and... parameters held the correct value. What didn't work was passing the parameters to actions_dispatch2.php. Try passing the parameters as the second argument to load(...):

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

Edit: Strike that, it works both ways in my test case under Safari 4.0.3 and FF 3.5. It's worth a try, but it's probably not the solution.

We need a complete minimal test case, as what's provided will work.

An alternative is to do away with the "parameters" attribute, which is both non-standard and and unnecessary duplication of the data in the form inputs. Extend jQuery with a method to collect parameters:

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, '&');
  }
});

Then, in your onBeforeLoad handler:

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

You could probably leave out the ':hidden' argument. If you wish, you could alter parameters to additionally take multiple types (as e.g. an array of selectors) to get the parameters from multiple input types.

As for Firebug pointers, see:

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