I need some expert advice on Ajax.
I have some difficulties updating a <div> tag inside a table with Ajax.
My html looks like this:
------------------------
...
[HTML]<table>
<tr>
<td>
<img src="../photos/abc_thumb.jpg" onClick="Load_Full_Size('abc')" />
<div id="abc" ></div>
</td></tr>
</table>
[/HTML]...
------------------------
The content I want to add inside <div> tag is the following (extra) <img> tag:
[HTML]<img src="../photos/abc_full_size.jpg" />
[/HTML]
This will be done by a php script which is already tested & functioning.
------------------------
The Ajax for this task is like following:
Expand|Select|Wrap|Line Numbers
- var objXMLHttpReq1 = createXMLHttpReq();
- var urlPhotoPhp = "showphoto.php?photo=";
- function Load_Full_Size(strItemPhoto)
- {
- objXMLHttpReq1.open("GET", urlPhotoPhp + escape(strItemPhoto) , true);
- objXMLHttpReq1.onreadystatechange = Response_Handler_Photo();
- objXMLHttpReq1.send(null);
- }
- function Response_Handler_Photo()
- {
- if (objXMLHttpReq1.readyState == 4)
- {
- document.getElementById(strItemPhoto).innerHTML = objXMLHttpReq1.responseText;
- }
- }
- function createXMLHttpReq()
- {
- var objXMLHttpReq;
- if (window.XMLHttpRequest)
- {
- // Other Browsers
- //
- objXMLHttpReq = new XMLHttpRequest();
- }
- else if (window.ActiveXObject)
- {
- // IE
- //
- objXMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
- }
- return objXMLHttpReq;
- }
Apparently, the whole thing works when <div> is outside the table, but I need the full size pic inside the table :/
Any ideas? Thanks.