How do I convert old onclick() code to DOM if a PHP variable is involved?

**shimmyshack** · Oct 28 '07, 01:55 PM

Re: How do I convert old onclick() code to DOM if a PHP variable is involved?

On Oct 28, 4:06 am, donpro <donpro-2...@rogers.com wrote:

Hi,
>
I've created a table where the header columns link to an AJAX function
which calls a PHP file and returns content - the purpose is to sort
the table on the heading.
>
The code snippet is:
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_BOOKING ; ?>','innerhbl') ">Booking</
a></th>
>
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_VESSEL; ?>','innerhbl') ">Vessel</
a></th>
>
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_CUTOFF; ?>','innerhbl') ">Cutoff</
a></th>
>
The $SERVERPAGE_URL variable also contains one parameter, a session ID
>
I would like to convert this to DOM and store the code in an external
JS file thereby separating the JavaScript code from the HTML.
However, I need to pass the first content of the loadBookingCont ent()
function but my PHP code doesn't work in an external JS file.
>
I'm relatively new at DOM but there must be a way.
>
Thanks,
Don

if your table is one of many in the page then give the table an id
your external js should just spot this id
then cycle through the three column headers (the links)
and for each attach an onclick to the link sending the innerHTML value
of that link as the sort by paramter
you shouldnt need a session id in the url, this suggests an old style
php installation or programming style. also innerhbl is being repeated
so I question whether you need to pass that as a paramter as well.
thus all you do is code for a "toogle" method sending which you want
to toggle, the php script returns html of the new table (including the
headings though it doesnt not need to) and away you go.
thus you dont actually need php in your external js file at all

**David Mark** · Oct 28 '07, 02:15 PM

Re: How do I convert old onclick() code to DOM if a PHP variable is involved?

On Oct 28, 12:06 am, donpro <donpro-2...@rogers.com wrote:

Hi,
>
I've created a table where the header columns link to an AJAX function
which calls a PHP file and returns content - the purpose is to sort
the table on the heading.
>
The code snippet is:
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_BOOKING ; ?>','innerhbl') ">Booking</
a></th>
>

First off, you need to give those links proper href's. Pass the sort
field to the PHP script that generates the page. That script needs to
look for that parameter and sort accordingly. Then users without
script can sort your tables. Even if you don't care about
accessibility, this lays the perfect foundation for your AJAX
enhancement.

<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_VESSEL; ?>','innerhbl') ">Vessel</
a></th>
>
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_CUTOFF; ?>','innerhbl') ">Cutoff</
a></th>
>
The $SERVERPAGE_URL variable also contains one parameter, a session ID
>
I would like to convert this to DOM and store the code in an external
JS file thereby separating the JavaScript code from the HTML.

Attach an onclick hander to the body and watch for anchor tags with
href's that contain the sort field parameter. Pass the href to the
loadBookingCont ent function. So that it downloads just the sorted
table (not the entire page), use a header to tell the PHP script that
it is an AJAX call.

**Thomas 'PointedEars' Lahn** · Oct 28 '07, 03:15 PM

Re: How do I convert old onclick() code to DOM if a PHP variableis involved?

donpro wrote:

I've created a table where the header columns link to an AJAX function
which calls a PHP file and returns content - the purpose is to sort
the table on the heading.
>
The code snippet is:
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?

Are you using XHTML and are you declaring the `scope' attribute in your
internal subset? If not, the `th' element has no `scope' attribute in
Valid HTML. http://validator.w3.org/

The `javascript:;' attribute value is nonsense. You should cancel the
`click' event instead. And it would be a good idea to remove the dependency
on client-side scripting -- you do want people without script support to
book at your store, don't you?

php echo $SERVERPAGE_URL . SORT_BY_BOOKING ; ?>','innerhbl') ">Booking</
a></th>
>
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_VESSEL; ?>','innerhbl') ">Vessel</
a></th>
>
<th scope="col"><a href="javascrip t:;" onclick="loadBo okingContent('< ?
php echo $SERVERPAGE_URL . SORT_BY_CUTOFF; ?>','innerhbl') ">Cutoff</
a></th>
>
>
The $SERVERPAGE_URL variable also contains one parameter, a session ID
>
I would like to convert this to DOM and store the code in an external
JS file thereby separating the JavaScript code from the HTML.
However, I need to pass the first content of the loadBookingCont ent()
function but my PHP code doesn't work in an external JS file.
>
I'm relatively new at DOM [...]

It shows. Your notion of "converting to DOM" is based on the misconception
that you are currently not using the DOM, which in fact you do by employing
intrinsic event handler attributes.

Therefore, my first attempt of refactoring your code would be HTML refactoring:

<th class="col"><a href="<?php
echo preg_replace('/?.*/', '', $_SERVER['PHP_SELF']);
?>?sort=booking " onclick="loadBo okingContent('< ?php
echo $SERVERPAGE_URL . SORT_BY_BOOKING ;
?>', 'innerhbl'); return false">Booking</a></th>

<th class="col"><a href="<?php
echo preg_replace('/?.*/', '', $_SERVER['PHP_SELF']);
?>?sort=vessel " onclick="loadBo okingContent('< ?php
echo $SERVERPAGE_URL . SORT_BY_VESSEL;
?>', 'innerhbl'); return false">Vessel</a></th>

<th class="col"><a <a href="<?php
echo preg_replace('/?.*/', '', $_SERVER['PHP_SELF']);
?>?sort=cutoff " onclick="loadBo okingContent('< ?php
echo $SERVERPAGE_URL . SORT_BY_CUTOFF;
?>', 'innerhbl'); return false">Cutoff</a></th>

Then I would refactor the PHP code:

<?php
$sort_cols = array(
'Booking' =SORT_BY_BOOKIN G,
'Vessel' =SORT_BY_VESSEL ,
'Cutoff' =SORT_BY_CUTOFF );

$me = preg_replace('/?.*/', '', $_SERVER['PHP_SELF']);

foreach ($sort_cols as $key =$val)
{
?>
<th class="col"><a href="<?php
echo "${me}?sort =" . strtolower($key );
?>" onclick="loadBo okingContent('< ?php
echo $SERVERPAGE_URL . $val;
?>', 'innerhbl'); return false"><?php
echo $key;
?></a></th>
<?php
}
?>

And only *then* I would ask myself whether or not it was necessary to
further "separate the JavaScript code from the HTML" and would probably
answer "no". However, if I were to answer "yes", then I would use event
bubbling. And if I would not knew what that was, I would ask Google.

HTH

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

**Thomas 'PointedEars' Lahn** · Oct 28 '07, 03:25 PM

Re: How do I convert old onclick() code to DOM if a PHP variableis involved?

Thomas 'PointedEars' Lahn wrote:

$me = preg_replace('/?.*/', '', $_SERVER['PHP_SELF']);

$me = preg_replace('/\?.*/', '', $_SERVER['PHP_SELF']);

PHP's PCRE-based engine is not that forgiving.

PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

How do I convert old onclick() code to DOM if a PHP variable is involved?

How do I convert old onclick() code to DOM if a PHP variable is involved?

Comment

Comment

Comment

Comment