Sagewire Logo

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, ...


Programming | Sports | Autos

copyright 2006
Valid XHTML 1.0 Transitional