Working outside loop, but not inside

[craig]

Hey,

I've got some php that's pulling entries from a table, and displaying
entries as well as giving a toggle effect to some. I put in some
static html to confirm that the effect is working inside the file, but
inside the php code the effect doesn't work... here's a snippet:
while ($count<=$num_teams)
{
echo "<tr><td>Player ".$count . "</td><td class='players'><div
onclick='Effect.toggle('blinddown1', 'slide'); return false;'><span
class='red'>{click to reserve a player spot}</span></div>
<div id='blinddown1'style='display:none; width:175px; height:100px;
background:#FFF;'>Random Text that doesn't matter</div></td></tr>";
$count++;
}

Does anyone see something that I'm missing? I'm assuming its some
stupid little mistake, but I've messed with it for like 3 hours with
no progress.

Thanks

[Tom]

You have an id hardcoded to the div inside the loop - ids have to be
unique on the page - I'm assuming you mean to append $count to the id
instead of hardcoding the digit 1

Tom

[craig]

That's right, yes. I tried that at one point:

$count=$count+2;

while ($count<=$num_teams)
{
echo "<tr><td>Player ".$count . "</td><td class='players'><div

onclick='Effect.toggle('blinddown".$count."', 'slide'); return

false;'><span class='red'>{click to reserve a player spot}</span></
div>

<div id='blinddown".$count."'style='display:none; width:175px;

height:
100px; background:#FFF;'>Random Text that doesn't matter</div></td></
tr>";
$count++;
}

However, it still wasn't working, so I decided to mess around with it
and just hard-code 1 in there. In my previous experience it will
toggle the first occurrence of the div id, so I was just trying to
avoid potential syntax errors until I figured it out...but I still
have not

[Rick Waldron]

There is a much cleaner way to do this... check it out (tested and passed)

This goes in <script> tags, or in your external js file:


document.observe('dom:loaded', function () {
  $$('.blinders').each(function (b) {
   
    b.observe('click', function () {
      this.next().toggle('blinddown', 'slide');     
    });
  });
});



And the PHP really should be written like this:
<?php

$count=$count+2;
while ( $count <= $num_teams)
{
  ?>
  <tr>
    <td>Player <?php echo $count ?></td>
    <td class='players'>
      <div class="blinders red">

        {click to reserve a player spot}

      </div>
      <div style='display:none; width:175px;height:100px; background:#FFF;'>

        Random Text that doesn't matter
      </div>
    </td>
  </tr>

  <?php
  $count++;
} 
?>

Notice only ONE var is echo'ed. with all those double quotes your asking PHP to eval everything inside it, even when there are no vars to parse - thats not fair to PHP.

Having inline handlers is something you will vastly regret in the future, so i did away with those and let the .each() deal with assigning behaviours

Tested in FF3 & IE 7


Rick

[Rick Waldron]

Oh yeah... and this was your problem;


onclick='Effect.toggle('blinddown1', 'slide'); return false;'>

would've worked as:

onclick="Effect.toggle('blinddown1', 'slide'); return false;">


You cant use single quotes inside of single quotes.

[Alex McAuley]

you have at least one syntax error here

<div id='blinddown".$count."'style='display:none; width:175px;
height:
100px; background:#FFF;'>Random Text that doesn't matter</div></td></
tr>";

.... There is no space between id='' and style=''..... put a space in and
try it again!

[Alex McAuley]

seeing Ricks reply... it is better to go with his method ... Obviously
sometimes it is not allways viable to go with non-inline handlers but it is
best to go with them when you dont need to get anymore information from an
element that its ID or perhaps its next sibling etc etc

also in PHP i would recommend using single quotes for echoing to reduce the
load on the php ... (as Rick suggested!!)

[Rick Waldron]

A quick google for "php single quotes vs double quotes" will help you understand the difference and what it means to the overhead and scalability of your code. I picked this article from said google results:

http://andrewgatenby.com/single-quotes-and-double-quotes-in-php



@Alex,
I honestly can't think of any scenario where it is ok to use inline handlers, but I'm definitely interested in hearing your argument regarding them. I'm of the belief that complete separation of logic is imperative and should be regarded as best practice (or even, "only practice")... thoughts?

@Craig,
Apparently Effect.toggle() does not like the element chained to it... odd. Anyway, you can improve this much further.... I've posted a demo.
http://genevajs.com/misc/demo-ps-list-0010.php





Rick

[Alex McAuley]

@Rick -- Okay here is a good one.....

 

 

A very dynamic site where you need to pull varying variables

-- excuse the psudeo code !! just proving its needed sometimes !!

 

    funciton doSomething({options}) {

 

    new Ajax.Updater(options.element,options.url, {

       

                           method:options.method,

                           evalScripts: options.evalscripts,

                        parameters: {

                                       options.parametersName: options.params

}    

onComplete: options.onCompleteFunction // Not sure if would work - as i've never tried

 

});

}

 

 

<div onclick="doSomething({element:'myDiv',url:'myurl.php',evalscrips:true,parametersName:'postbody',params:'<?php echo($myVeryDynamicVariableIJustRecievedFromAnotherAjaxRequestThatTheDocumentCouldNotPossiblyKnowWithoutUpdatingLotsOfHiddenVariables); ?>',onCompleteFunction:'function(){alert(\'Hi\');}'});"> </div>

 

Now without inline handlers i would have to make alot of functions.. this way i can reuse my code and just change the inputs ....

 

I will state i dont do this often but sometimes it is needed as a script cannot always get the variables it needs as some change dynamically from other requests and outside factors

 

I built an extremely dynamic Web Desktop over the last 2 years which is alot faster than anything else out there... One of the main factors it stays fast is the client memory is not clogged up with huge initial downloads of functions that only get used every now and again!.

 

 

My view is each to thier own .... If it aint broke dont fix it and if everyone wrote code the same then the internet would be boring !!

 

I would be interested to see how you would tackle problems like the one above as i've never really discussed it with anyone before

 

Regards

Alex

----- Original Message -----

From: Rick Waldron

To: prototype-s...@googlegroups.com

Sent: Thursday, June 04, 2009 4:06 PM

Subject: [Proto-Scripty] Re: Working outside loop, but not inside

[Rick Waldron]

@Alex,

I think i met all of your criteria:
http://genevajs.com/misc/demo-ps-list-0011.php

i left the js in the main file so you could reference. dig it.


Rick

[craig]

I've implemented what Rick (Thank You!) suggested, and it seems to
have solved the recognition problem. The only minor problem I'm still
having is that instead of a sliding effect, the div just abruptly
appears without sliding. It's as if it knows the div needs to be
displayed onclick, but not that it should call a slide. I'm assuming
its because I'm just using <script> tags as opposed to pasting that
into one of the js files. Which file should I be putting it in? I
examined the scriptaculous and prototype files for similar looking
code, but being a supernoob I'm reluctant to just throw it in
there.

On Jun 4, 2:29 pm, Rick Waldron <waldron.r...@gmail.com> wrote:
> @Alex,
>
> I think i met all of your criteria:http://genevajs.com/misc/demo-ps-list-0011.php
>
> i left the js in the main file so you could reference. dig it.
>
> Rick
>
> On Thu, Jun 4, 2009 at 12:20 PM, Alex McAuley <
>

> > *From:* Rick Waldron <waldron.r...@gmail.com>
> > *To:* prototype-s...@googlegroups.com
> > *Sent:* Thursday, June 04, 2009 4:06 PM
> > *Subject:* [Proto-Scripty] Re: Working outside loop, but not inside

[Rick Waldron]

Yeah, i discovered the same gotcha...

the JS should actually look like this:

    document.observe('dom:loaded', function () {
      $$('.blinders').each(function (b) {

        b.observe('click', function () {

          Effect.toggle(this.next(), 'blind');
          // or like this if you used the second version posted: Effect.toggle(this.down(), 'blind');
        });
      });
    });

[Alex McAuley]

That was a very basic example i wrote !!...

 

Plus your code is not re-usable which was kinda my point and its about 50 lines where as mine would fit into perhaps 10 or so... inline is alot more flexible...

 

In basic examples yes this way does work but is memory expensive and alot of work !!!...

 

As i said - each to thier own in thier coding style ... while inline is still valid xhtml i will continue to use it

 

Also ... is the "record" node on the href's valid xhtml ? because i cant see it on the list of valid nodes!... And i would rather use inline callees than use invalid xhtml!

[Rick Waldron]

What about when all that inline markup is output from a loop...lots of rendered source code that will likely look like spaghetti? The markup created by my example is just:
(i've changed "record" to "name" in the example)

<li class="clicker"><a id="a_001" name="001" href="javascript:;">Mystery Character #001</a>

Furthermore, it takes on average 100ms to load and render the initial data from the server and between 10-20ms to click-load-process the second server call. Numbers aside - that's super fast, but profiling and net monitoring from one server to one client machine isnt proof of anything.

Anyway... glad we could open that up to more conversation.

Rick

[Alex McAuley]

My point still stands that it is a simple example... when we delve deeper into more complex examples it becomes garder and harder!!... Also fom what i can remember about the code it took 2 requests to complete as opposed to 1.... surely that is not memory efficient...

 

I dont deny it can probably all be done with non inline i just dont aggree that its better to do it due to script size, time to write, number of requests, memory & scalability.....

 

To the best of my knowledge OOP is used for the re-usablility of code/functions (certainly in php anyway), i for one like to reuse my functions in PHP, Javascript and other languages if only to keep the size of things to a minimum and my code is written for me not for other people to be able to read (luckily) !!!

 

This is probably a good debate to have in an open group like this as alot of people new to Javascirpt programming are told not to inline things but not really explained the real reasons why or why not to!! - same with php and ' vs " !!

 

Long day for me time to hit the hay !

[Rick Waldron]

The first ajax request was following your variable's name as a guidleline :)

$myVeryDynamicVariableIJustRecievedFromAnotherAjaxRequestThatTheDocumentCouldNotPossiblyKnowWithoutUpdatingLotsOfHiddenVariables

"Just recieved from another ajax request" (how do you intend to update the value of the inline onclick="" from this other mystery ajax request? good luck with that in IE)

"without updating lots of hidden variables" (good thing i used the element's allotted internal memory and clearly have 0 "hidden variables")


My use of the element's object for storage of data is common practice, so common that the proto-core team has added it as a standard feature of prototype in an upcoming version: http://www.prototypejs.org/2009/2/16/pimp-my-code-1-element-storage
...which was just a replication of jQuery's $.fn.data

I wrote that in 20 minutes... my apologies for not creating a reusable OO structure. Which, by definition, inline handlers are considered "procedural"  and DEFINITELY not OO.


I strongly suggest you read this article: http://www.quirksmode.org/js/events_early.html

All of a sudden I feel like i'm having an argument about whether or not one should use <font> tags or properly structured CSS that remains OUT of your markup.


Just for fun, replicate my example, but with your method. I'm just curious to see how you would accomplish what we're discussing.



Rick



 

[Alex McAuley]

Chill out dude i wasn't arguing, As i said -again- that was a simple example.

 

My bad on the 2 Ajax requests i forgot my original statement about making one or more on the initial page

 

I also did not say inline handlers were OOP nor my code was OOP but Prototype JS is written in an OOP fashion - i think you missed the point -again-

 

While it might be common practice it is NOT valid XHTML again point missed.

 

I dont even understand what you mean about CSS markup and<font> blah blah lol it makes no sense.

 

MY point is valid and still stands .. your code was alot of lines mine wasn't, Your code in that example is NOT re-usable and inline is.

 

You write your way, i'll write mine simple as that

 

I guess this is not the place to have this debate after all

 

/Peace