[RESOLVED] AJAX - Insert Table Row

Tracer

Not being to familiar with Javascript, I am looking for a simple solution. I basically want to fire off an AJAX request to the server (on a form POST) which will run a php function and return a New Table Row to the original requesting page in TABLE 1, Remove a Table row on the original page TABLE 2, without refreshing the entire page contents.

Can anyone point me to some simple examples? I have found a multitude of AJAX frameworks via google - SAJAX appears to be the front runner... Although I can't seem to find any simple examples of Inserting a table row.

TIA

niroshan

Im quite not sure what your trying to do here, But Why dont you try to regenerate the table again from the backend php application and send it to frontend vis AJAX.

Its much easier than trying to appened the exsiting table using the Javascripts DOM model.

Regards,
Niroshan

kitchin

Here's a working example. You should add some error checking to the JS, and security to the PHP.

Note, the url in makeRequest(url) must be local, not a http:// address to some other server.

test.html

<html><head>

<script language="javascript"><!--

///////////////////////////////////////
// basic AJAX functions ///////////////
// Adapted from: http://developer.mozilla.org/en/docs/AJAX:Getting_Started
///////////////////////////////////////

  var http_request = false;

  function makeRequest(url) {
	http_request = false;
	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE
		try { http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try { http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	if (http_request) {
		http_request.onreadystatechange = handleResponse;
		http_request.open('GET', url, true);
		http_request.send(null);
	} else {
		alert('Error in makeRequest, cannot create an XMLHTTP instance');
	}
  }

  // browser fires this periodically until readyState == 4
  function handleResponse() {
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			use_ajax_response(http_request.responseText);
		} else {
			alert('Error in handleRepsonse, readyState==4');
		}
	} // ignore other firings
  }

///////////////////////////////////////
///// end basic AJAX functions
///////////////////////////////////////


///////////// test: /////////////////////

  var testi= 0;

  function use_ajax_response(st) {
	// alert('AJAX says: ' + st);
	if (st.substring(0,6)=='delete') {
		// alert('deleting row: ' + st.substring(6));
		delrow('tt', st.substring(6));
	} else {
		addrow('tt', st); 
	}
  }


////////////////////////////////////////////////////////////////
/// DOM stuff, see http://www.quirksmode.org/dom/intro.html
////////////////////////////////////////////////////////////////

  function addrow(tbid, st) {
	var tb= document.getElementById(tbid);
	var tr= document.createElement('TR');
	testi++;
	tr.id= 'tr' + testi;
	tb.appendChild(tr);
	var td= document.createElement('TD');
	tr.appendChild(td);
	td.innerHTML= 'AJAX: tr' + testi;
	var td2= document.createElement('TD');
	tr.appendChild(td2);
	td2.innerHTML= st;
  }

  function delrow(tbid, trid) {
	var tb= document.getElementById(tbid);
	var tr= document.getElementById(trid);
	tb.removeChild(tr);
  }

/////////////////////////////////////////

// --></script>
</head><body>

<ul>
<li>
<a href="#" onClick="makeRequest('test.php?x=kitty'); return false;">add kitty</a>
<li>
<a href="#" onClick="makeRequest('test.php?x=cat'); return false;">add cat</a>
<li>
<a href="#" onClick="makeRequest('test.php?x=tr2&delete=1'); return false;">delete tr2</a>
<li>
<a href="#" onClick="makeRequest('test.php?x=tr3&delete=2'); return false;">delete tr3</a>
</ul>

<table border="1">
<tbody id="tt">
<tr><td>START</td><td>sample</td></tr>
</tbody>
</table>

</body></html>

test.php

<?php
  // add securty before using
  $x= $_REQUEST['x'];
  if (!empty($_REQUEST['delete'])) {
	print "delete$x";
	exit;  // no extra text
  }
  print "You sent x=$x at " . date('r');
?>

thorpe

I have found a multitude of AJAX frameworks via google

I think you'll also find that allot of these frameworks are bloated overkill. Ajax is pretty straight forward, and often the results you need can be achieved with a few simple functions.

Here is a nice simple tutorial, written by the guy who invented php.

Hope it helps.

Tracer

Thorpe, Thanks - that was exactly what I needed... For anyone else here is som stripped down code:

ajax_front.html

<HTML>
<head>
<script language="javascript"><!--
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', 'ajax_backend.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function sndReqArg(action,arg) {
    http.open('get', 'ajax_backend.php?action='+action+'&arg='+arg);
    http.onreadystatechange = handleResponse;
    http.send(null);
  }

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

    if(response.indexOf('|' != -1)) {
        update = response.split('|');
        document.getElementById(update[0]).innerHTML = update[1];
        document.getElementById(update[2]).innerHTML = update[3];
    }
}
}
--></script>
</head>
<body>
 <a href="javascript:sndReq('table1')">[foo]</a><br>
 <hr>
 <table border=0 width=100%>
 <tr><td bgcolor=red>
 			<div id="table1">
 			</div>
 	 </td>
 	 <td bgcolor=yellow>
 	 		<div id="table2">
 	 		</div>
 	 </td>				
 </tr>
</body>
</html>

ajax_backend.php

<?php
if($_REQUEST['action']=='table1')
{ echo "table1|TABLE 1|table2|table2"; } 
?>