XOAD HTML Questions & Answers

This tutorial assumes that you've read XOAD Page Skeleton.

What's XOAD HTML?

XOAD HTML is an extension that allows you to update the content and the style of a page. The best way to start using XOAD HTML is to show you a basic example. Take a look at this JavaScript code that updates a DIV element:

<div id="container">Text...</div>
<script type="text/javascript">

	function update()
	{
		var container = document.getElementById('container');

		container.innerHTML = 'Other text...';
		container.style.color = 'red';
	}

</script>
<a href="#server" onclick="update(); return false;">Update</a>

Here is the above example, but this time using XOAD HTML:

<?php

class Example
{
	function update()
	{
		// Note the '&' operator.
		$container =& XOAD_HTML::getElementById('container');

		$container->innerHTML = 'Other text...';
		$container->style['color'] = 'red';
	}
}

define('XOAD_AUTOHANDLE', true);

require_once('xoad.php');

?>
<?= XOAD_Utilities::header('.') . "\n" ?>

<script type="text/javascript">

var obj = <?= XOAD_Client::register(new Example()) ?>;

</script>

<div id="container">Text...</div>
<a href="#server" onclick="obj.update(); return false;">Update</a>

We have a class that is exported using XOAD_Client::register (if you still haven't read XOAD Page Skeleton go back and do it). This class has only one method update that takes no arguments and updates the DIV element. As you can see HTML manipulation is quite easy using XOAD HTML.

This tutorial is a bit different. It'll be organized as series of Questions and Answers. Let's get started.

Q: How to change the background color of all links?

A: Use XOAD_HTML::getElementsByTagName.

<?php

class Example
{
	function update()
	{
		$links =& XOAD_HTML::getElementsByTagName('a');

		$links->style['backgroundColor'] = 'yellow';
	}
}

define('XOAD_AUTOHANDLE', true);

require_once('xoad.php');

?>
<?= XOAD_Utilities::header('.') . "\n" ?>

<script type="text/javascript">

var obj = <?= XOAD_Client::register(new Example()) ?>;

</script>

<ul class="resources">
	<li><a href="http://www.xoad.org/news/">News</a></li>
	<li><a href="http://www.xoad.org/documentation/source/">Documentation</a></li>
	<li><a href="http://www.xoad.org/tutorials/">Tutorials</a></li>
	<li><a href="http://www.xoad.org/examples/">Examples</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=2">Bugs</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=3">Support Requests</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=4">Feature Requests</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=6">Public Forums</a></li>
	<li class="php-books"><a href="http://www.very-clever.com/books/php"><strong>PHP books</strong></a></li>
</ul>

<a href="#server" onclick="obj.update(); return false;">Update</a>

Q: How to disable a group of radio buttons?

A: Use XOAD_HTML::getElementsByName.

<?php

class Example
{
	function update()
	{
		$something =& XOAD_HTML::getElementsByName('something');

		$something->setAttribute('disabled', true);
	}
}

define('XOAD_AUTOHANDLE', true);

require_once('xoad.php');

?>
<?= XOAD_Utilities::header('.') . "\n" ?>

<script type="text/javascript">

var obj = <?= XOAD_Client::register(new Example()) ?>;

</script>

<form action="#" method="post">
	<fieldset>
		<legend>Choose something:</legend>
		<input type="radio" id="choice-1" name="something" /><label for="choice-1">Choice 1</label><br />
		<input type="radio" id="choice-2" name="something" /><label for="choice-2">Choice 2</label><br />
		<input type="radio" id="choice-3" name="something" checked="checked" /><label for="choice-3">Choice 3</label><br />
		<input type="radio" id="choice-4" name="something" /><label for="choice-4">Choice 4</label><br />
		<input type="radio" id="choice-5" name="something" /><label for="choice-5">Choice 5</label>
	</fieldset>
</form>

<a href="#server" onclick="obj.update(); return false;">Update</a>

Q: How to display an alert box?

A: Use XOAD_HTML::addScriptBlock.

<?php

class Example
{
	function alert()
	{
		XOAD_HTML::addScriptBlock('alert("Some text here...");');
	}
}

define('XOAD_AUTOHANDLE', true);

require_once('xoad.php');

?>
<?= XOAD_Utilities::header('.') . "\n" ?>

<script type="text/javascript">

var obj = <?= XOAD_Client::register(new Example()) ?>;

</script>

<a href="#server" onclick="obj.alert(); return false;">Alert</a>

Note that the script must end with semicolon. This will not work:

XOAD_HTML::addScriptBlock('alert("Some text here...")');
XOAD_HTML::addScriptBlock('alert("Other text here...")');

This will work (note the semicolons at the end of each line):

XOAD_HTML::addScriptBlock('alert("Some text here...");');
XOAD_HTML::addScriptBlock('alert("Other text here...");');

Tip: XOAD_HTML::addScriptBlock returns a reference to an object representing the script block. You can change the block contents:

$block =& XOAD_HTML::addScriptBlock('alert("Some text here...");');

$block->script = 'alert("Changed text...");';

Q: How to change the color of all links inside a list, having 'rel=external'?

A: Use XOAD_HTML::cssQuery (will be available in 0.6.0.0).

<?php

class Example
{
	function update()
	{
		$links =& XOAD_HTML::cssQuery('ul li a[rel="external"]');

		$links->style['color'] = 'red';
	}
}

define('XOAD_AUTOHANDLE', true);

require_once('xoad.php');

?>
<?= XOAD_Utilities::header('.') . "\n" ?>

<script type="text/javascript">

var obj = <?= XOAD_Client::register(new Example()) ?>;

</script>

<ul class="resources">
	<li><a href="http://www.xoad.org/news/">News</a></li>
	<li><a href="http://www.xoad.org/documentation/source/">Documentation</a></li>
	<li><a href="http://www.xoad.org/tutorials/">Tutorials</a></li>
	<li><a href="http://www.xoad.org/examples/">Examples</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=2" rel="external">Bugs</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=3" rel="external">Support Requests</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=4" rel="external">Feature Requests</a></li>
	<li><a href="http://forums.xoad.org/viewforum.php?id=6" rel="external">Public Forums</a></li>
	<li class="php-books"><a href="http://www.very-clever.com/books/php" rel="external"><strong>PHP books</strong></a></li>
</ul>

<a href="#server" onclick="obj.update(); return false;">Update</a>

Q: How to pass form values from/to the server?

A: Take a look at the Forms example. The full source code is available in the ZIP package.

Final Words

This tutorial will be constantly updated. If you have any questions or would like to discuss the tutorial feel free to do it in the forums.

Happy coding.

XOAD Logo