How do I convert old onclick() code to DOM if a PHP variable is involved?
5 Message(s) by 4 Author(s) originally posted in javascript programming
| From: donpro |
Date: Sunday, October 28, 2007
|
Hi,
I have 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'd 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 does not work in an external JS file.
I'm relatively new at DOM but there must be a way.
Thanks,
Don
| From: shimmyshack |
Date: Sunday, October 28, 2007
|
wrote in message:
Hi,
I have 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'd 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 does not 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
| From: David Mark |
Date: Sunday, October 28, 2007
|
wrote in message:
Hi,
I have 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 do not 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'd 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.
| From: Thomas PointedEars Lahn |
Date: Sunday, October 28, 2007
|
wrote in message:
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'd be a good idea to remove the dependency
on client-side scripting -- you do want people without script
support to
book at your store, do not 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'd 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 does not 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'd 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'd 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'd ask myself whether or not it was necessary to
further "separate the JAVAScript code from the HTML" and'd probably
answer "no". However, if I were to answer "yes", then I'd use event
bubbling. And if I wouldn't knew what that was, I'd ask Google.HTH
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
| From: Thomas PointedEars Lahn |
Date: Sunday, October 28, 2007
|
wrote in message:
$me = preg_replace('/?.*/', '', $_SERVER['PHP_SELF']);
$me = preg_replace('/\?.*/', '', $_SERVER['PHP_SELF']);
PHP's PCRE-based
engine isn't 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>
Next Message: How to flag onclick() and confirm() using DOM
Blogs related to How do I convert old onclick() code to DOM if a PHP variable is involved?
Im new to javascript and Im a little stuck I have a textbox which ...
how
do I make a link show a certain element of the page when clicked on? basically
onclick="open this
code". hey guys, I'm looking for a bulletproof way of doing a popup; any suggestions? I suggest Kevlar.
...
*question* Take multiple results records based on a multiple ...
and irisblaze you never installed
java on FC or ubuntu have you? or an
old debian. zzz. in fact I don't think those distros have
java by default
do they? they can't distribute them by default because it's not all OSS yeet
...
perhaps someone could help me with this I have a Text node that I ...
i made them using the
dom using hte setAttribute method is there another way i should be doing it? and the border around the images, right? **around the windows. right now i just
do button.setAttribute("
onclick","callbackFunction()");
...
i have a problem i have an object which comes from an array with ...
I have "A HREF="download_toolbar.htm" target="_self"
onClick="parent.home.location.href='download.htm'"" and I am trying to remove the frame part of it it was taken from some
old code of mine and now the frames no longer exist
...
Hey I have a question So Ive got a button that says onclick ...
to pass arguments to function that I prototyped within an object,
do I have to pass it through the parent object first? guess not it sseems to work. Anyonw here has a clue on how can I send to a web server my
DOM generated
code using JS
...
hi I have a web form that I submit to an email script and Ive got ...
Something else you might want to
do is set a CSS class and add/remove that rather than manipulating the style directly That's quite a bit neater. I'll
do a google search and see if I can find a sample. I actually meant the actual
code,
...