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

[donpro]

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="javascript:;" onclick="loadBookingContent('<?
php echo $SERVERPAGE_URL . SORT_BY_BOOKING; ?>','innerhbl')">Booking</
a></th>

<th scope="col"><a href="javascript:;" onclick="loadBookingContent('<?
php echo $SERVERPAGE_URL . SORT_BY_VESSEL; ?>','innerhbl')">Vessel</
a></th>

<th scope="col"><a href="javascript:;" onclick="loadBookingContent('<?
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 loadBookingContent()
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

 

[shimmyshack]

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="javascript:;" onclick="loadBookingContent('<?
php echo $SERVERPAGE_URL . SORT_BY_BOOKING; ?>','innerhbl')">Booking</
a></th>

<th scope="col"><a href="javascript:;" onclick="loadBookingContent('<?
php echo $SERVERPAGE_URL . SORT_BY_VESSEL; ?>','innerhbl')">Vessel</
a></th>

<th scope="col"><a href="javascript:;" onclick="loadBookingContent('<?
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 loadBookingContent()
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]

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="javascript:;" onclick="loadBookingContent('<?
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="javascript:;" onclick="loadBookingContent('<?
php echo $SERVERPAGE_URL . SORT_BY_VESSEL; ?>','innerhbl')">Vessel</
a></th>

<th scope="col"><a href="javascript:;" onclick="loadBookingContent('<?
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
loadBookingContent 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]

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="javascript:;" onclick="loadBookingContent('<?

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="javascript:;" onclick="loadBookingContent('<?
php echo $SERVERPAGE_URL . SORT_BY_VESSEL; ?>','innerhbl')">Vessel</
a></th>

<th scope="col"><a href="javascript:;" onclick="loadBookingContent('<?
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 loadBookingContent()
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="loadBookingContent('<?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="loadBookingContent('<?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="loadBookingContent('<?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_BOOKING,
'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="loadBookingContent('<?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

 

[Thomas 'PointedEars' Lahn]

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

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

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


PointedEars

 

[pr]

[...] my PHP code doesn't work in an external JS file.

For a more orderly way to pass PHP variables to your script, consider
something like:

<script type="text/javascript">
var params = {
serverPageURL: "<?php echo $SERVERPAGE_URL ?>",
byBooking: "<?php echo SORT_BY_BOOKING ?>",
byVessel: "<?php echo SORT_BY_VESSEL ?>",
byCutoff: "<?php echo SORT_BY_CUTOFF ?>"
};
</script>
<script src="mylibrary.js" type="text/javascript">

where mylibrary.js contains

function loadBookingContent(page, id) {
...
}

for example; and

<th><a href="equivalent.php" onclick=
"return loadBookingContent(params.serverPageURL + params.byBooking,
'innerhbl')">Booking</a></th>

<th><a href="equivalent.php" onclick=
"return loadBookingContent(params.serverPageURL + params.byVessel,
'innerhbl')">Vessel</a></th>

<th><a href="equivalent.php" onclick=
"return loadBookingContent(params.serverPageURL + params.byCutoff,
'innerhbl')">Cutoff</a></th>