TransAjax is an easy-to-use one line usage library to add expert AJAX features to your site.
Features:
- 2 functions (ajax + ajax_submit), where You can use callback or Dom-element as receiver
- More stable crossbrowser work
- Full featured TransAjax.exec( objArgs ) method
- Result type auto-detect (Text, XML, JSON, PHP-serialized object)
- Submit forms via AJAX
- Submit files via AJAX (iframe method)
- Crossbrowser functionality
- Build-in JS urlencode()
- TransAjax.setInnerHtml( objID, str ) to fix scripts in response body
- Global events TransAjax.onStart, TransAjax.onStop, TransAjax.onError
- PHP JSON helper function as part of library: ajax( $data [, $data_charset]);
License
You must use it AS IS. If You want more:
- please contact me sshuchkin@ sibvision.ru
Thank U for direct link to project page <a href="http://code.google.com/p/transajax/">TransAjax features</a> on your website
I want populate this tool and have karma bonus...
Usage:
<!-- news.php -->
<?php
if (isset($_GET['ajax'])) {
echo '<h1>News</h1>';
for ($i = 1; $i < 10; $i++) echo '<h2>News '.$i.'</h2>';
exit();
}
?>
<html>
<head>
<script type="text/javascript" src="transajax.js"></script>
</head>
<body>
<div id="divNews">
<a href="#" onclick="ajax('news.php?ajax=1', 'divNews'); return false">Get News</a>
</div>
</body>
</html>Snippets:
Basic
<!-- user.php -->
<?php
if (isset($_GET['ajax'])) {
sleep(2); // ajax emulator
if ($_GET['id'] == 5)
die('<h1>Great Sergey profile</h1>');
else
die('<span style="color: red">Unknown user</span>');
}
?>
<html>
<head>
<script type="text/javascript" src="transajax.js"></script>
</head>
<body>
<a href="#" onclick="view_profile_ajax(5); return false">View Sergey Profile</a><br/>
<a href="#" onclick="view_profile_ajax(6); return false">View Ivan Profile</a>
<div id="progress" style="display: none">Loading...</div>
<div id="profile"></div>
<script type="text/javascript">
<!--
function view_profile_ajax( id ) {
ajax('user.php?ajax=1&id='+id, _view_profile_ajax);
document.getElementById('progress').style.display = '';
}
function _view_profile_ajax( obj ) {
// TransAjax.setInnerHTML('profile', obj.responseText); // if we've scripts in response body
document.getElementById('profile').innerHTML = obj.responseText; // simple
document.getElementById('progress').style.display = 'none';
}
-->
</script>
</body>
</html>
More callbacks
<!-- index.php-->
<html>
<head>
<script src="transajax.js"></script>
</head>
<body>
<b>MyMovie</b> rating = <span id="rating4"><input type="button" onclick="rating_ajax(4)" value=" + " /></span>
<script>
<!--
function rating_ajax( id ) {
ajax('rating.php?id='+id, _rating_ajax);
}
function _rating_ajax( obj ) {
document.getElementById('rating'+obj.id).innerHtml = obj.rating;
}
</script>
</body>
</html>
<!-- rating.php -->
<?php
$id = (int) $_GET['id'];
if ($id) {
// some SQL, extract & calc rating to $data
die('{success: true, id: '.$id.', rating: "'.$data['rating'].'"}');
}
?>
Form submission via AJAX
<!-- contact.php -->
<?php
if (isset($_GET['ajax'])) {
sleep(2);
if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message']))
die('{success: false, error: "Name, Email and Message is required"'});
else
die('{success: true}');
}
?>
<html>
<head>
<script type="text/javascript" src="transajax.js"></script>
</head>
<body>
<form id="frmContact" action="contact.php?ajax=1" method="post">
Name:<br/>
<input type="text" name="name" /><br/>
Email:<br/>
<input type="text" name="email" />
Message: <br/>
<textarea name="message"></textarea><br/>
<input type="button" value="send" onclick="send_message_ajax();" />
</form>
<script>
<!--
function send_message_ajax() {
// "action" attribute used
ajax_submit('frmContact', _send_message_ajax);
}
function _send_message_ajax( obj ) {
if (obj.success) {
alert('Message sent.');
} else {
alert(obj.error);
}
}
-->
</script>
Global events
...
<img id="ajaxBusyImage" src="loading.gif" style="display: none" />
...
<script>
<!--
// TransAjax Busy state
TransAjax.onStart = function() { document.getElementById('ajaxBusyImage').style.display = "" };
TransAjax.onStop = function() { document.getElementById('ajaxBusyImage').style.display = "none" };
-->
</script>
