Hi,

I have an html page which is designed using tables. I would like to know that if I click on a button located in one cell of the table, it should open another page in a new cell of a different table without refreshing the entire page. I tried using ajax, but nothing seems to be happening.

Please help.

Thank you in advance
Saswati

'Doesn't work' is a very generic. You need to come up with a specific problem if you want help. There are loads of AJAX tutorials out there, just read a few of them and if you are still stuck, post your code here.

Hi,

I understand that very much. Let me give you a part of the code to help you understand my problem.

This is the table cell which when one clicks

<td width="33%" style="text-align: center;"> <a href="javascriptisplayAlertTable('maincontenttable','AlerttablePage.html');" id="alerts"> Alerts </a> </td>

should display the requested page in the table

<table width="100%"><div id="maincontenttable">
<tr>
<td colspan="2" width="100%" align="center"><!-- START Script Block for Chart Rotating Pie-->
<div id="RotatingPieDiv" align="center"> Dashboard appears here. </div>
<script>
var jobProgressChart = new Charts("RotatingPie.swf", "RotatingPie", width, ht, "0", "1");
jobProgressChart.setDataXML("<chart></chart>");
jobProgressChart.render("RotatingPieDiv");
</script>

<!-- END Script Block for Chart RotatingPie-->
</td>
</tr>
<tr>
<td width="80%" style="text-align:right; horizontal-align:right;" >
<Button id="ShowResourceUtilizationButton" onclick="showResourceUtilization();">Resource Utilization View </Button>
</td>
<td>
<Button id="JPViewButton" onclick="showJobProgressView();">Job Progress View </Button>
</td>
</tr></div>
</table>

and the javascript function is

/*function DisplayAlerttable(id,url)
{
var req=false;
var width = windowWidth * 0.50;
var ht = windowHeight * 0.70;
if (window.XMLHttpRequest)
{
req=new XMLHttpRequest();//for non-IE browsers
}
else if(window.ActiveXObject)//for IE
{
try
{
req=new ActiveXObject("Mxml2.XMLHttp");
}
catch(e) {
try {
req=new ActiveXObject("Microsoft.XMLHttp");
} catch(e){}
}
}
else
return false;
}
if (req)
{
req.onreadystatechange= function()
{
loadpage(id,req);

}
}
req.open(GET,"AlerttablePage.html",true);
req.send(null);
}
function loadpage(id,req)
{
if(req.readyState==4)
{
if(req.status==200)
document.ajax.dyn="Received" + req.responseText;
else document.ajax.dyn="Error:" + req.status;
}
} */

Nothing happens. Please let me know where the mistake is.

Thanks a lot in advance
Saswati

I know this will work. Use iframes.
In the table that you want the new page to pop up (or into) place an iframe name it and you can now update it with javascript.

Like this

the in the javascript:

If you want the page loaded to be dynamic then you can use the write funtion of document.
ie)


iframes default to this ugly thing with scroll bars and borders, but all that can be eliminated with css, look it up. You do have google right?



Hope this helps


lemeno

Thanks a lot. My problem is solved

Saswati

Alright!! Hey what is the link to your page, I'd like to check it out?

I may need some help with that Ajax someday.....

I'll get in touch