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
