ZeptoBlog

Thanks for the review Russ. Dealing with browser differences truly is the biggest headache when dealing with ajax and HTML DOM manipulation using javascript. Little by little, however, one learns little techniques that work in many, if not all, browsers.

Invoking xajax functions through a link tag is best handled like this:

<a href=”xajax_myFunction(); return false;” onclick=”xajax” >click me</a>

According to standards, returning false from an event tells the browser to cancel the default action, which in this case is to follow the link instead of waiting for the xajax call to return. Standards also do not technically allow “javascript:” in the href attribute.

Returning false from the event works for Forms as well:

<form id=”myForm” onsubmit=”xajax_myFunction (xajax.getFormValues (xajax.$(’myForm’))); return false;” >
<input type=”text” id=”myText” name=”myText” />
<input type=”submit” value=”click me” />
</form>

When debugging, keep in mind that even if you have a “return false;” if any of the javascript before the “return false;” breaks, the javascript parser will often stop before it reaches the return and the default action will be executed (i.e. submitting the form or following the link) anyway!

Another little thing that confuses a lot of people is that <tr> tags inserted using javascript have to be added to a tbody tag and not directly to a table tag if you want it to work in both IE and Firefox.

On a bright note, hopefully the new plugin API in the upcoming version of xajax (0.5) will allow community members to create useful plugins for xajax that will abstract a lot of this kind of esoteric knowledge needed to manipulate the DOM using javascript into easy-to-use plugins. It will also allow users to create plugins that xajax can use to incorporate third party libraries like scriptaculous and moofx that are designed to simplify the kinds of DOM manipulations that developers typically want to make. That way we can keep xajax itself lightwight, but allow people to optionally extend it in ways that others can be easily distributed and shared. We have a beta of xajax 0.5 out right now which is available from the community forum or you can check out the latest from the trunk of the sourceforge SVN repository.

The tests folder that comes packaged with xajax is an under-utilized feature. It is full of short, useful (hopefully working ) example code for most of the functions offered by xajax.

Next time you run into a problem with xajax and javascript DOM manipulation, feel free to IM me before you waste too much time on something that I may be able to help you solve in a few minutes.

Thanks J.
It seems to me that in some cases it would be better to manipulate the DOM instead of using innerHTML. Plug-ins that will handle those kind of details could be really useful.

In my current project, I am doing inline updates to a database table. There are a couple of design decisions that I had to make:

1. When I first build the page, do I create two table rows for each database row - one for display and one for edit - and use the CSS display style to turn them on and off?
2. Do I put all the form values in one table column so I can keep them in one form element or have a different form element for each column.

In the end I decided to do a replacement of the table columns to go from viewing the data row to editing the data row to reduce the initial page load size. I then decided to a separate form element for each column because I wanted the form elements to appear under the correct table header and I was able to use xajax.getFormValues() along with array_merge() to pull all the entered data together very cleanly.

I have problem using href in xajax. My code is like this

addAssign(”div1″,”innerHTML”,”This is Admin”);
return $objResponse;
}

function showJSeekers()
{
$objResponse = new xajaxResponse();
$objResponse -> addAssign(”div1″,”innerHTML”,”This is JSeekers”);
return $objResponse;
}

// Instantiate the xajax object. No parameters defaults requestURI to this page, method to POST, and debug to off
$xajax = new xajax();

//$xajax->debugOn(); // Uncomment this line to turn debugging on

// Specify the PHP functions to wrap. The JavaScript wrappers will be named xajax_functionname
$xajax->registerFunction(”showAdmin”);
$xajax->registerFunction(”showJSeekers”);

// Process any requests. Because our requestURI is the same as our html page,
// this must be called before any headers or HTML output have been sent
$xajax->processRequests();
?>

jBurst Admin
printJavascript(’../’); // output the xajax javascript. This must be called between the head tags ?>

Admin
JSeekers
JSeekers
JSeekers

The button that calls xajax_showJSeekers() just works fine and neither of the objects. To try the page please check

http://www.jburst.com/ajax/xajax/examples/jburst_admin.php

It works neither in IE nor FireFox.

Thanks,
Reza

That was great. Now it works. Thanks Russ. I appreciate that

Yes, there is. The concept is not too hard, though I’ve not done it so I can’t say how hard the execution is. My first thought on implementing something like this would be to have a div with scroll bar. As the user scrolls down you can call the xajaxResponse->addAppend() to add new items to the bottom of the list. The key is to know how many items to add to the list as the scroll bar moves.

I’m guessing that the code didn’t show up correctly in your comment Reza. Is the function doBodyOnLoad supposed to be a php or javascript function. I’m just not sure what I am missing. Will you provide more information?

I have set this code to change the default error handler

// Set error handling and logging functions
error_reporting(0);
$old_error_handler = set_error_handler(”jErrorHandler”);

I get this error:

Undefined index: query in the file xajax.inc.php on line 938