jQuery Within a PHP While Loop

Question

I am using jQuery to reveal an extra area of a page when a button is clicked.

The script is

$(document).ready(function() {
    $("#prices").on('click', 'a.click', function() {
        $(".hiddenstuff").slideToggle(1000),
        $("a.click").toggleClass("faded");
    });
});

Then the button is

<a href="javascript:;" class="click buttonSearchList">&nbsp;&nbsp; Enquire or Book</a>

and the newly revealed area is

<div class="hiddenstuff" style="display:none">
<!-- HTML form in here -->
</div>

The problem I have is that the button and "hiddenstuff" div are wrapped in a PHP while loop so they repeat anything between one and six times. When the user clicks on one of the buttons, all the hidden divs are revealed. I would like just the hidden div related to the clicked button to reveal.

I presume that I have to create a javascript variable that increments in the while loop and somehow build that into the script. But I just can't see how to get it working.

EDIT, in response to the comments

The while loop is actually a do-while loop. The code inside the loop is about 200 lines of PHP and HTML. That's why I didn't show it all in my question. In a shortened version, but not as shortened as before, it is

do {
<!-- HTML table in here -->
<a href="javascript:;" class="click buttonSearchList">&nbsp;&nbsp; Enquire or Book</a>
<!-- HTML table in here -->
<div class="hiddenstuff" style="display:none">
<!-- HTML form and table in here -->
</div>
<!-- More HTML in here -->
} while ($row_season = mysql_fetch_assoc($season));

EDIT 2 The final solution was exactly as in UPDATE2 in the reply below.

I'd need to see you php code, but with the right formatting and selecting you would be able to achieve that effect. If you could edit your post to show the while loop, I could work something out for you — dops
– dops, Commented Apr 29, 2014 at 16:51
well what is the actual structure? How is the link and div coded? — epascarello
– epascarello, Commented Apr 29, 2014 at 16:54

William Newby · Accepted Answer · 2014-04-29 23:02:52Z

2

The easiest thing for you to do is to keep your onclick binding but change your hiddenstuff select. Rather than grabbing all the hiddenstuffs which you are doing now, you can search for the next one [the element directly after the specific button that was clicked].

$(this).next('div.hiddenstuff').slideToggle(1000);

UPDATE

i created a fiddle for you with what I would assume would be similar to the output from your php loop. one change from my early answer was rather than using next(), i put a div around each group as I would assume you would have and used .parent().find()

http://jsfiddle.net/wnewby/B25TE/

UPDATE 2: using IDs

Seeing your PHP loop and your nested tables and potentially complex html structure, I no longer thing jquery select by proximity is a good idea [be it by big parent() chains or sibling finds].

So I think this is a case for injecting your ids. I assume your table structure has an id that you can get from $row_season ( $row_season["id"] )

you can then place it in the anchor:

<a href="javascript:;" data-rowid=" . $row_season['id'] . " class="click buttonSearchList">&nbsp;&nbsp; Enquire or Book</a>

and the same for your hiddenstuff

<div class="hiddenstuff" data-rowid=" . $row_season['id'] . "  style="display:none">

and then your js can find it easily

$(document).ready(function() {
    $("#prices").on('click', 'a.click', function() {
        var rowid = $(this).attr("data-rowid");
        $(".hiddenstuff[data-rowid='" + rowid + "']").slideToggle(1000),
        $(this).toggleClass("faded");
    });
});

updated fiddle

edited Apr 29, 2014 at 23:02

answered Apr 29, 2014 at 16:54

William Newby

6215 silver badges14 bronze badges

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

7 Comments

TrapezeArtist Over a year ago

I'm not sure if I understood you correctly. I substituted your line of code in place of $(".hiddenstuff").slideToggle(1000),. Then the "hiddenstuff" div doesn't reveal at all.

William Newby Over a year ago

i created a fiddle for you and updated my answer. you can see how this works and adjust it to fit your actual html structure. i think the larger point is that jquery has some great searching functionality you can leverage to find the nearby hidden div and show it. you could inject IDs instead and it might even mean a theoretical quicker DOM search but in practice I like the next or parent method better for your case fiddle

TrapezeArtist Over a year ago

I see what you're doing now. I'm having a little difficulty getting it to work on my page, but I think that's only because the page is so complicated that I haven't quite got the <div> structure right yet. I'm off to get some dinner now and will return to the topic later. Thanks for your help.

TrapezeArtist Over a year ago

I've been experimenting with cut-down versions of my page, in order to get this working. It works in a very simplified version (obviously, because it works in the jsfiddle) but as soon as I put the "Enquire or Book" button in a table the "hiddenstuff" is no longer revealed. The "Enquire or Book" does fade correctly though, so I assume that I need to modify the line "$(this).parent().find(".hiddenstuff").slideToggle(1000)" in some way.

William Newby Over a year ago

Sounds like you are close. Perhaps you have a few other containers around your elements. If you at least have the <a> and the "hiddenstuff" on the same level, you can switch to $(this).siblings(".hiddenstuff").slideToggle(1000). if that doesn't work, post your rendered HTML and I can help create the proper jquery select to match it.

|

Bloodraven · Accepted Answer · 2014-04-29 17:47:24Z

0

If your structure is something like this:

<div class="container">
  <a href="javascript:;" class="click buttonSearchList">&nbsp;&nbsp; Enquire or  Book</a>
  <div class="hiddenstuff" style="display:none">
  <!-- HTML form in here -->
  </div>
</div>

You can do your js like this:

$(document).ready(function() {
    $("#prices").on('click', 'a.click', function() {
        $(this).siblings(".hiddenstuff").slideToggle(1000),
        $(this).toggleClass("faded");
    });
});

which is similar to William Newby answer, but a close look at your while loop, I'd think you could do this:

$(document).ready(function() {
    $("#prices").on('click', 'a.click', function() {
        var index = $(this).index();
        $(".hiddenstuff")[index].slideToggle(1000),
        $(this).toggleClass("faded");
    });
});

There are several ways of do it, I hope I was useful.

answered Apr 29, 2014 at 17:47

Bloodraven

617 bronze badges

3 Comments

TrapezeArtist Over a year ago

Your version using "siblings" instead of "parent" works just as well, but stumbles in the same way when I but the button in a table. I haven't been able to get any life out of the second version yet.

Bloodraven Over a year ago

The second version has a litle error I think, change the 4th line to "$($(".hiddenstuff")[index]).slideToggle(1000)," because otherwise is not jquery object but a html dom one, it shoud work, and is a lot more efficient than addind ids to everything

TrapezeArtist Over a year ago

I appreciate your input, Bloodraven, but I have now used William Newby's ID method. I couldn't resist trying out yours though, but it didn't work at first attempt. I had a page with two instances of the repeating code. Clicking on the first button worked. But clicking on the second button revealed the first instance of "hiddenstuff". I imagine a little bit of tweaking would get it working, but there really is no need now. Thanks again.

Collectives™ on Stack Overflow

jQuery Within a PHP While Loop

2 Answers 2

7 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Related