On May 9, 11:33 am, Martin <mar...@[EMAIL PROTECTED]
> wrote:
> On 9 mei, 11:09, Erwin Moller
>
>
>
> <Since_humans_read_this_I_am_spammed_too_m...@[EMAIL PROTECTED]
> wrote:
> > Martin schreef:
>
> > > Hello,
>
> > > I have the following problem:
>
> > > In a page I insert some HTML with a DIV by AJAX.
> > > Whenever I try to insert other HTML into the content of this DIV by
> > > using innerHTML it doesn't work.
> > > But the strange thing is that after replacing the content of that
DIV,
> > > I can read the content and it tells me
> > > the changed content (even though the browser doesn't show the
changed
> > > content)
> > > I tested it with IE7 and Firefox and both browsers act the same.
>
> > > Here is the code of the initial page:
>
> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
> > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> > > <html xmlns="http://www.w3.org/1999/xhtml">
> > > <head>
> > > <title>Div Test</title>
> > > <meta http-equiv="Content-Type" content="text/html;
> > > charset=iso-8859-1" />
>
> > > <style type="text/css">
> > > div#hiddenDiv{
> > > position:absolute;
> > > width:500px;
> > > height:400px;
> > > top:50%;
> > > left:50%;
> > > margin-top:-210px;
> > > margin-left:-310px;
> > > text-align:center;
> > > display:none;
> > > z-index:100;
> > > }
> > > </style>
>
> > > <script type="text/javascript">
> > > <!--
>
> > > function doaction(show,queryfile,params) {
> > > ajaxSimpleText(queryfile, 'htmlText');
>
> > > setHiddenDiv(true);
> > > }
>
> > > function setHiddenDiv(show){
> > > var htmlDisp = do***ent.getElementById("htmlText").innerHTML;
> > > if(htmlDisp.length > 10){
> > > do***ent.getElementById("hiddenDiv").innerHTML =
htmlDisp;
> > > do***ent.getElementById("hiddenDiv").style.display =
(show) ?
> > > "block" : "none";
> > > do***ent.getElementById("hiddenDiv").style.zIndex=100;
> > > } else {
> > > setTimeout(function(){setHiddenDiv(true);},1000);
> > > }
> > > }
>
> > > function changeSlct(sid){
> > > var selected_table = do***ent.getElementById(sid).selectedIndex;
> > > do***ent.getElementById(sid).innerHTML = 'blah';
> > > }
>
> > > function dispHTML(divid){
> > > alert('innerHTML of DIV ' + divid + ':\n' +
> > > do***ent.getElementById(divid).innerHTML);
> > > }
>
> > > // -->
> > > </script>
>
> > > <script language='javascript' type='text/javascript'>
> > > <!--
> > > function ajaxSimpleText(queryfile,divName){
>
> > > var ajaxRequest; // The variable that makes Ajax possible!
>
> > > try{
> > > // Opera 8.0+, Firefox, Safari
> > > ajaxRequest = new XMLHttpRequest();
> > > } catch (e){
> > > // Internet Explorer Browsers
> > > try{
> > > ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
> > > } catch (e) {
> > > try{
> > > ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
> > > } catch (e){
> > > // Something went wrong
> > > alert('Your browser broke!');
> > > return false;
> > > }
> > > }
> > > }
>
> > > if(ajaxRequest){
>
> > > ajaxRequest.open('GET', queryfile, true);
> > > // Create a function that will receive data sent from the server
> > > ajaxRequest.onreadystatechange = function(){
> > > if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
> > > var ajaxDisplay = do***ent.getElementById(divName);
> > > ajaxDisplay.innerHTML = ajaxRequest.responseText;
> > > }
> > > }
> > > ajaxRequest.send(null);
> > > }
> > > }
> > > //-->
> > > </script>
> > > </head>
> > > <body>
>
> > > <div id="htmlText" style="display:none;"></div>
> > > <div id="hiddenDiv"></div>
>
> > > <form method="get" name="testform1">
> > > <table cellspacing="5" cellpadding="0" border="0" bgcolor="#AAAAAA"
> > > width="500">
> > > <tr>
> > > <td colspan="2">This form is directly inserted in the
original
> > > page<br>Changing the value of '1' should change the 'select' from
2</
> > > td>
> > > </tr>
> > > <tr>
> > > <td style="text-align:right;">1</td>
> > > <td style="text-align:left;">
> > > <select name="slct1" onChange="changeSlct('divslct2');">
> > > <option value="s11">1</option>
> > > <option value="s12">2</option>
> > > </select>
> > > </td>
> > > <td style="text-align:right;">2</td>
> > > <td style="text-align:left;">
> > > <div id="divslct2">
> > > <select name="slct2">
> > > <option value="s21">1</option>
> > > <option value="s22">2</option>
> > > </select>
> > > </div>
> > > </td>
> > > </tr>
> > > </table>
> > > </form>
> > > <input type="submit" onClick="dispHTML('divslct2');" value="show
HTML
> > > DIV select 2">
>
> > > <script type="text/javascript">
> > > <!--
> > > doaction(true,'testform.html','');
> > > //-->
> > > </script>
>
> > > </body>
> > > </html>
>
> > > AND this is the inserted content by AJAX:
>
> > > <br>
> > > <br>
> > > <form method="get" name="testform2">
> > > <table cellspacing="5" cellpadding="0" border="0" bgcolor="#BBBBBB"
> > > width="500">
> > > <tr>
> > > <td colspan="2">This form is inserted in a DIV by using
> > > AJAX.<br>Changing the value of '3' should change the 'select' from
4</
> > > td>
> > > </tr>
> > > <tr>
> > > <td style="text-align:right;">3</td>
> > > <td style="text-align:left;">
> > > <select name="slct3" onChange="changeSlct('divslct4');">
> > > <option value="s31">a</option>
> > > <option value="s32">b</option>
> > > </select>
> > > </td>
> > > <td style="text-align:right;">4</td>
> > > <td style="text-align:left;">
> > > <div id="divslct4">
> > > <select name="slct4">
> > > <option value="s41">a</option>
> > > <option value="s42">b</option>
> > > </select>
> > > </div>
> > > </td>
> > > </tr>
> > > </table>
> > > </form>
> > > <input type="submit" onClick="dispHTML('divslct4');" value="show
HTML
> > > DIV select 4">
>
> > > You can see that the form that has NOT been inserted by AJAX work
just
> > > fine.
>
> > > You can test it online at:
> > >http://adsdev.intelli-gens.com/test.html
>
> > > I hope someone can clarify where it's going wrong.
>
> > > Thanks
>
> > Hi,
>
> > Without looking through all your code, I noticed you use JavaScript in
> > the response that is used to replace the innerHTML.
> > That doesn't work.
>
> > Regards,
> > Erwin Moller- Tekst uit oorspronkelijk bericht niet weergeven -
>
> > - Tekst uit oorspronkelijk bericht weergeven -
>
> Hi Erwin,
>
> But it works just fine for the first form (which is already in the
> initial page)
> the second form uses the same functions as the first so it should act
> the same way.
why not a framework, prototype, mootools, jquery...
|
