Dec
27

DOM adding and deleting elements

Using DOM is possible add html elements or delete them without reload page, here and examplewith two functions to do that:

<head>
<script language=”javascript”>
function crear_td(colspan) {
// First we count how many elements exist to create an id
cuantos=document.getElementsByTagName(”td”).length;
cuantos=cuantos+1;
// Using innerHTML we create the new element in the element “listado” (container)
document.getElementById(’listado’).innerHTML+=’<td id=’+cuantos+’ colspan=’+colspan+’><a href=”#” onclick=”javascript:borrar_td(’+cuantos+’); return false;”>Remove</a></td>’;
}
function borrar_td(id) {
// First we select an element in our element container
var d = document.getElementById(’listado’);
// After we select element
var olddiv = document.getElementById(id);
// Finally delete them
d.removeChild(olddiv);
}
</script>
</head>
<body>
<p align=”center”>
colspan: <input type=”text” name=”txt_colspan” id=”txt_colspan” value=”2″ />
<input type=”button” name=”create_btn” value=”Add Cell” onclick=”javascript:crear_td(txt_colspan.value)” />
</p>
<table width=”700″ align=”center” border=”1″>
<tr id=”listado”>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>

Nov
12

XAJAX Star Rating

To create this Star rating first we must call XAJAX

require (’xajax/xajax.inc.php’);
$xajax = new xajax();

After we create a function with ul and li to create stars

function srating($stars){
$seleccionadas=$stars*30;
$salida=”
<ul class=’star-rating’>
<li class=’current-rating’ style=’width:”.$seleccionadas.”px;’>Currently 3.5/5 Stars.</li>
<li>
<a href=’#’ title=’1 star out of 5′ class=’one-star’ onClick=’xajax_srating(1);’>1</a>
</li>
<li>
<a href=’#’ title=’2 stars out of 5′ class=’two-stars’ onClick=’xajax_srating(2);’>2</a>
</li>
<li>
<a href=’#’ title=’3 stars out of 5′ class=’three-stars’ onClick=’xajax_srating(3);’>3</a>
</li>
<li>
<a href=’#’ title=’4 stars out of 5′ class=’four-stars’ onClick=’xajax_srating(4);’>4</a>
</li>
<li>
<a href=’#’ title=’5 stars out of 5′ class=’five-stars’ onClick=’xajax_srating(5);’>5</a>
</li>
</ul>
“;
$salida.=’<input type=”hidden” name=”frating” value=”‘.$stars.’” />’;
$respuesta = new xajaxResponse();
//Write div with id=”respuesta”the text in variable $salida
$respuesta->addAssign(”respuesta”,”innerHTML”,$salida);
//After we return the xajaxResponse object
return $respuesta;
}

Link AJAX object with function

$xajax->registerFunction(”srating”);
//Xajax object process any function
$xajax->processRequest();

And finally we call stars

<script type=”text/javascript”>
xajax_srating(0); //First call to XAJAX function
</script>
<div id=”respuesta”> </div>



Nov
12

Basic XAJAX example

1. Include the xajax class library:

require_once("xajax_core/xajax.inc.php");

2. Instantiate the xajax object:

$xajax = new xajax();

3. Register the names of the PHP functions you want to be able to call through xajax:

$xajax->registerFunction("myFunction");

4. Write the PHP functions you have registered and use the xajaxResponse object to return XML commands from them:

function myFunction($arg){// do some stuff based on $arg like query data from a database and

// put it into a variable like $newContent

$newContent = "Value of \$arg: ".$arg;    // Instantiate the xajaxResponse object

$objResponse = new xajaxResponse();

// add a command to the response to assign the innerHTML attribute of

// the element with id="SomeElementId" to whatever the new content is

$objResponse->assign("SomeElementId","innerHTML", $newContent);

//return the  xajaxResponse object

return $objResponse;

}

5. Before your script sends any output, have xajax handle any requests:

$xajax->processRequest();

6. Between your tags, tell xajax to generate the necessary JavaScript:

<?php $xajax->printJavascript(); ?>

7. Call the function from a JavaScript event or function in your application:

<div id="SomeElementId"></div>
<button onclick="xajax_myFunction('It worked!');"></pre>

That’s it. xajax takes care of most everything else. Your biggest task is writing the PHP functions and returning xajax XML responses from them– which is made extremely easy by the xajaxResponse class.

Nov
12

XAJAX

xajax is an open source PHP class library that allows you to easily create Ajax applications using HTML, CSS, JavaScript, and PHP.

Tutorials

  • Learn xajax in 10 Minutes » go
  • Processing Forms with xajax » go
  • Object Oriented Website Programming the Xajax Way » go
  • Script Context » go
  • Learn some of the basics of xajax with these wiki help pages. » Wiki Tutorials

Live Examples

Get a feel for some of the possibilities that xajax gives you with these demos:

Nov
06

Change Properties using DOM

We can change properties (css) using DOM to select an element,

- We only require use element’s id

- Select that element using getElementById( id )

- And change style using elem.style.fontWeight=”bold” (for example but we can use any property)

Here a little example:

<script language=”javascript”>
function changep(id) {
var elem, vis;
elem = document.getElementById( id );
vis = elem.style;
elem.style.fontWeight=”bold”
}
<table width=”500″ align=”center”>
<tr>
<td><div id=”texttochange”>My text</div></td>
</tr>
<tr>
<td><input type=”button” onClick=”javascript:changep(’texttochange’)” name=”btn_change” value=”Change” /></td>
</tr>
</table>

Oct
16

Welcome!

Welcome to to my blog. I’m astarting to fill with information about php, mysql, web 2.0.

top
© 2007 Miguel Manchego. All Rights Reserved. XHTML Powered by: Wordpress