SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery and Rails :collection

    im a js n00b.

    here is my issue. I have a rails partial that loops over a collection, producing a block of HTML for each pass. Inside each pass is a hidden div that would appear .show() when the containing div is clicked.

    My problem is the the first render is the only one that works when clicked, but it triggers all of the renders.

    js -

    jQuery(document).ready(function() {
    jQuery('#member_wrap').toggle(function() {
    jQuery('.member_meta').hide('slow');
    },
    function() {
    jQuery('.member_meta').show('slow');
    });
    });


    HTML block that is rendered with each loop

    div id="user_box" class="member_box" onclick="check_control()">
    <div id="member_wrap">
    <div class='profile_image' style="float: left;">
    <%= image_tag "no_profile.jpg", :size => "50x50" %>
    </div>
    <div class="inner_member_box_content">
    <strong>Area code/strong> <%= "#{member.mobile[0..2]}" %><br />
    <strong>State/strong> <%= "#{member.locale.state}" %><br />
    <strong>Number/strong> <%= "#{member.mobile}" %><br />
    </div>
    <div class="member_meta" >
    <strong>Carrier/strong> <%= "#{member.carrier}" %><br />
    <strong>Country/strong> <%= "#{member.country}" %><br />
    <strong>Name/strong> <%= "#{member.first_name}" %><br />
    </div>

    <div id='controls' style='display: none;'>
    <input type=checkbox id='users_' name='users[]' value=''>
    </div>
    </div>
    </div>

    here is a jing of my issue

    any help would be great

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just as a btw,

    This:
    Code JavaScript:
    jQuery(function(){
        jQuery('#member_wrap').click(function(){
             jQuery('.member_meta').toggle('slow');
        });
    });

    Is the same as:
    Code JavaScript:
    jQuery(document).ready(function() {
         jQuery('#member_wrap').toggle(function() {
              jQuery('.member_meta').hide('slow');
         }, 
         function() {
              jQuery('.member_meta').show('slow');
         });
    });

    Just thought the shorter version might be helpful.

    ps. You could also use the dollar namespace. e.g. $(function(){}); <- This works the same as "jQuery(function(){});" would...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for the shortcut...im really less than 72 hrs new at this...i will take all the advice i can get.

  4. #4
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in fiddling around with this and combing the net for answers, i read up a little on the $(this) - when I plug it in like so

    sort of work -

    jQuery(function(){
    jQuery('#member_wrap').click(function(){
    jQuery(this).toggle('slow');
    });
    });

    old code -
    jQuery(function(){
    jQuery('#member_wrap').click(function(){
    jQuery('.member_meta').toggle('slow');
    });
    });

    it works on a single instance like i need..problem is "this" references the parent of the div im trying to toggle. how do i (if possible) append the .member_meta to the "this"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •