CODEWITHSUNDEEP
phpjavascript
Andre Martov
Andre Martov

Reputation: 77

While-loop divs not reacting

I have a list of divs created using a while-loop

while($row = mysql_fetch_array($result)){
$output = "<div id='drag'>$row[id] - $row[name] - $row['email']</div>";
echo $output;}

When I try to make those divs highlighted for a few seconds. Only the first div seems to be reacting.

$("#drag").effect("highlight", {}, 2000);

Is there any strategy to make all the output be highlighted this way? And is there a way to make a certain div or divs highlighted?

Upvotes: 1

Views: 151

Answers (3)

RHSeeger
RHSeeger

Reputation: 16262

Using multiple items in a page with the same id is disallowed and, though it may work for some use cases, will cause problems in others (as you're seeing). In general, you'll want to use classes unless ids are required. I'd also recommend that you specify the selector more distinctly that you would with the id (ie, more elements).

For my own code, I tend to use an id for the page body (ie, which page it is) and distinct elements on the page (header content, main content, right rail content, footer content). It's rare that I use ids anywhere else (though it's been known to happen).

Once you switch it over to a class, you can easily change your JS to do something like

$("div.drag").effect("highlight", {}, 2000);

If possible, adding something more distinct to the div.drag path so that you won't wind up effecting other parts of the page you hadn't considered/written when you worked on this.

Upvotes: 0

Subail Sunny
Subail Sunny

Reputation: 287

id is used to give a div unique id. so in the while loop you are giving same id in the loop to all div. that's why when you are trying to highlight, it is effecting first div.

try this code:

while($row = mysql_fetch_array($result)){
    $output = "<div class='drag'>$row[id] - $row[name] - $row['email']</div>";
    echo $output;
}

after that apply effect to that class drag

$(".drag").effect("highlight", {}, 2000);

hope it will help you :)

Upvotes: 0

Louis-Philippe Huberdeau
Louis-Philippe Huberdeau

Reputation: 5431

IDs must be unique by definition. You can use classes instead.

while($row = mysql_fetch_array($result)){
    $output = "<div class='drag'>$row[id] - $row[name] - $row['email']</div>";
    echo $output;
}

Then...

$(".drag").effect("highlight", {}, 2000);

Upvotes: 5

Related Questions