Using a function to trigger .toggle() instead of .click()

Question

I am trying to create a simple function that can take a parameter and pass it into a .toggle() event. This page contains potentially hundreds of individual toggle events. I want one function to handle all of these events.

 function toggleVehicles(partId) {
$("#"+partId+"vehicles").fadeToggle('fast');
}

The function is called from clicking on a table row:

<tr id="<? echo $id; ?>Control" onClick="showVehiclesbyPart(<? echo $id; ?>); toggleVehicles(<? echo $id; ?>)" class="list">

The function showVehiclesbyPart is the AJAX data collection, followed by the function in question here.

The function works, except that when initially clicked, the toggle doesn't execute properly. It looks as though it's toggling out and back in instantly. Any clicks that follow will toggle the div correctly.

I looked into some other posts concerning similar issues, and binding was mentioned. I'm new to jQuery and Javascript, and I can't seem to find what I feel is probably an easy fix.

The page is located at http://www.partsconsign.com. Expand a category and click on a part number record to see the issue.

You should be using something like $('.sel').event(handler) syntax, not inline event handlers like onclick="doSomething()". — Jared Farrish
– Jared Farrish, Commented Mar 2, 2012 at 17:36
Agreed. You should be using somthing like $('.list').on('click', function(){/*Your AJAX stuff*/; $(this).fadeToggle('fast');}); This will allow to get rid of the your onclick in your HTML and have all events in one function call instead of two function calls — Birdman
– Birdman, Commented Mar 2, 2012 at 17:43
How can I pass the parameter I'm calling through the inline event handler toggleVehicles(<? echo $id; ?>) ? — Devin
– Devin, Commented Mar 2, 2012 at 17:52
I would put that in a rel="<? echo $id; ?>", which you can then access with this.rel or $(this).attr('rel'). Or use a data- attribute like data-vehicle-id="<? echo $id; ?>", which you can then use with $.data(). — Jared Farrish
– Jared Farrish, Commented Mar 2, 2012 at 18:25
The variable that I am trying to pass into the jQuery is different as it loops through all of the records. Each loop dynamically creates a <? echo $id; ?>Control div (to click) and a <? echo $id>List div (to display). Whenever <? echo $id; ?>Control is clicked, I need <? echo $id>List to display. Depending on where the user clicks on the page, $id could be hundreds of different values. Forgive me if your method accommodates this, but I'm having a hard time implementing it. — Devin
– Devin, Commented Mar 2, 2012 at 20:40

Jared Farrish · Accepted Answer · 2012-03-02 18:30:20Z

1

Your problem is that your table rows that display your vehicle parts is initially displayed. When you click the first time, it loads the data, then toggles from:

display: table-row;

to

display: none;

Change these rows to display: none; on page load, so when they're first clicked, they will toggle to show and not hide.

edited Mar 2, 2012 at 18:30

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

answered Mar 2, 2012 at 17:36

Birdman

7245 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Birdman Over a year ago

Please mark as correct answer so people don't try and answer an already answered question

Jared Farrish · Accepted Answer · 2012-03-02 18:24:52Z

This is a little late, but the below is what I was thinking of when I said use the jQuery event handler methods. Note, I made a few changes according to my own methods, and used cellpadding and cellspacing as a shortcut to show the table easier (I would not use these attributes in practice in most cases).

You'll see I create a basic error element ($err), which I then clone and add after the clicked row when first clicked. Then I toggle that tr.err using $(this).next('.err').

This is much easier to do than with inline event handlers like you've got.

HTML

<div class="parts-list">
    <h1 class="link" id="filtersControl">FILTERS</h1>
    <table class="list" width="100%" cellspacing="1" cellpadding="1" border="1">    
        <tr>
            <th class="first" width="128" scope="col">FA PART#</th>
            <th width="213" scope="col">MOTORCRAFT# (FORD#)</th>
            <th width="226" scope="col">DESCRIPTION</th>
            <th width="87" scope="col">ON-HAND</th>
            <th width="107" scope="col">USE:</th>
        </tr>
        <tr id="110Control" class="list">
            <td class="first alt link"></td>
            <td class=" alt link"><a href="#">(2C2Z1107BA)</a></td>
            <td class=" alt link"><a href="#">WHEEL STUD </a></td>
            <td class=" alt link"><a href="#">5</a></td>
            <td class=" alt link">
                <input name="110" type="text" id="110" size="3" maxlength="2" />
            </td>
        </tr>
        <tr id="109Control" class="list">
            <td class="first link"></td>
            <td class=" link"><a href="#">(2C2Z1012AA)</a></td>
            <td class=" link"><a href="#">WHEEL NUT </a></td>
            <td class=" link"><a href="#">5</a></td>
            <td class=" link">
                <input name="109" type="text" id="109" size="3" maxlength="2" />
            </td>
        </tr>
    </table>
</div>

CSS

.parts-list {
    border: 1px solid #86BBD2;
    background: #CEE7EE;
}
.parts-list h1 {
    margin: 0;
    padding: 4px;
    font: sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: #acacac;
}
.parts-list table.list {
    display: none;
}

Javascript

$(document).ready(function(){
    var $partslist = $('.parts-list'),
        cols = $partslist.find('table.list tr td').length,
        $err = $('<tr><td>');

    $err.addClass('err')
        .find('td')
        .attr('colspan', cols)
        .text('This part does not fit any vehicles in your fleet.')
        .click(function(){
            $(this).toggle();
            return false;
        });

    var toggleOn = function(){
        var $this = $(this),
            $clone;

        if (!$this.next().is('.err')) {
            $clone = $err.clone(true);
            $(this).after($clone);
        } else {
            $this.next('.err').show();
        }
    };

    var toggleOff = function(){
        var $next = $(this).next();

        $(this).next('.err').hide();
    };

    $partslist.find('h1').click(function(){
        $(this).siblings('table.list').toggle();
    });

    $partslist.find('table.list tr').not(':has(th)').toggle(toggleOn, toggleOff);
});

http://jsfiddle.net/kREhM/

Collectives™ on Stack Overflow

Using a function to trigger .toggle() instead of .click()

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related