Refresh table content

 Subscribe in a reader

 

I am developing an email invitation system, just like Gmail provides in bottom left corner box ('Invite a friend' box)

 

I want to know that after entering the email & submitting the from, how is it possible to reload only that block of invitation form,

 

Not the whole page. I know ajax will be used for that, but I am still new for ajax, Though I can used XAJAX package which is pretty simple, But they don't provide such feature that I need, or may be they provide, I have never found it in its documentation.

 

Whatever, if I get any reference from you friends for this "Referesh the block on page" technique, It will be very helpful for me & also others who needs the same thing.

 

Thanks in advance

 

function CreateNewHttpObject () //Create an Instance of HTTP request.

{

var xmlHttp=null;

try{ // Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest( );

}

catch (e){ // Internet Explorer

try{

xmlHttp=new ActiveXObject( "Msxml2.XMLHTTP" );

}

catch (e){

xmlHttp=new ActiveXObject( "Microsoft. XMLHTTP") ;

}

}

return xmlHttp;

 

}

function DisplayOutput (divID, dataSource)

{

var dataSource;

 

dataSource=invitati on.php?email= ''+document. getElementById( 'txtemail' );

var ObjHttp= new CreateNewHttpObject ();

if(ObjHttp)

{

var obj = document.getElement ById(divID) ;

ObjHttp.open( "GET", dataSource);

ObjHttp.onreadystat echange = function()

{

if (ObjHttp.readyState == 4 && ObjHttp.status == 200)

obj.innerHTML = ObjHttp.responseTex t;

}

ObjHttp.send( null);

}

}

</script>

and set method call in send invitation button as

 

onsubmit="return DisplayOutput( 'DivContainer' );"

 

where DivContainer is your expected display area by the output of invitation.php file.

hope it helps you.

 

that can easily be done with Prototype's AJAX.Updater -
http://www.prototyp ejs.org/api/ ajax/updater

All you do is call in the JS module, and then issue a statement like this
giving the <div> you want to update :-

new Ajax.Updater( 'mytable' , '/display_table. php', { method: 'post', evalScripts: true} );
 

By: rekha singh | 31 Mar 2010