On 9 mei, 12:12, zava...@[EMAIL PROTECTED]
wrote:
> 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
DI=
V,
> > > > I can read the content and it tells me
> > > > the changed content (even though the browser doesn't show the
change=
d
> > > > 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=3D"http://www.w3.org/1999/xhtml">
> > > > <head>
> > > > <title>Div Test</title>
> > > > <meta http-equiv=3D"Content-Type" content=3D"text/html;
> > > > charset=3Diso-8859-1" />
>
> > > > <style type=3D"text/css">
> > > > div#hiddenDiv{
> > > > =A0 =A0position:absolute;
> > > > =A0 =A0width:500px;
> > > > =A0 =A0height:400px;
> > > > =A0 =A0top:50%;
> > > > =A0 =A0left:50%;
> > > > =A0 =A0margin-top:-210px;
> > > > =A0 =A0margin-left:-310px;
> > > > =A0 =A0text-align:center;
> > > > =A0 =A0display:none;
> > > > =A0 =A0z-index:100;
> > > > }
> > > > </style>
>
> > > > <script type=3D"text/javascript">
> > > > <!--
>
> > > > function doaction(show,queryfile,params) {
> > > > =A0 ajaxSimpleText(queryfile, 'htmlText');
>
> > > > =A0 setHiddenDiv(true);
> > > > }
>
> > > > function setHiddenDiv(show){
> > > > =A0 =A0var htmlDisp =3D
do***ent.getElementById("htmlText").innerHTM=
L;
> > > > =A0 =A0if(htmlDisp.length > 10){
> > > > =A0 =A0 =A0 =A0 =A0
=A0do***ent.getElementById("hiddenDiv").innerHTM=
L =3D htmlDisp;
> > > > =A0 =A0 =A0 =A0 =A0
=A0do***ent.getElementById("hiddenDiv").style.di=
splay =3D (show) ?
> > > > "block" : "none";
> > > > =A0 =A0 =A0 =A0 =A0
=A0do***ent.getElementById("hiddenDiv").style.zI=
ndex=3D100;
> > > > =A0 =A0} else {
> > > > =A0 =A0 =A0 =A0 =A0
=A0setTimeout(function(){setHiddenDiv(true);},10=
00);
> > > > =A0 =A0}
> > > > }
>
> > > > function changeSlct(sid){
> > > > =A0 =A0var selected_table =3D
do***ent.getElementById(sid).selectedI=
ndex;
> > > > =A0 =A0do***ent.getElementById(sid).innerHTML =3D 'blah';
> > > > }
>
> > > > function dispHTML(divid){
> > > > =A0 =A0alert('innerHTML of DIV ' + divid + ':\n' +
> > > > do***ent.getElementById(divid).innerHTML);
> > > > }
>
> > > > // -->
> > > > </script>
>
> > > > <script language=3D'javascript' type=3D'text/javascript'>
> > > > =A0<!--
> > > > =A0function ajaxSimpleText(queryfile,divName){
>
> > > > =A0 var ajaxRequest; =A0// The variable that makes Ajax possible!
>
> > > > =A0 try{
> > > > =A0 =A0// Opera 8.0+, Firefox, Safari
> > > > =A0 =A0ajaxRequest =3D new XMLHttpRequest();
> > > > =A0 } catch (e){
> > > > =A0 =A0// Internet Explorer Browsers
> > > > =A0 =A0try{
> > > > =A0 =A0 =A0 =A0 =A0 =A0ajaxRequest =3D new
ActiveXObject('Msxml2.XML=
HTTP');
> > > > =A0 =A0} catch (e) {
> > > > =A0 =A0 try{
> > > > =A0 =A0 =A0ajaxRequest =3D new ActiveXObject('Microsoft.XMLHTTP');
> > > > =A0 =A0 } catch (e){
> > > > =A0 =A0 =A0// Something went wrong
> > > > =A0 =A0 =A0alert('Your browser broke!');
> > > > =A0 =A0 =A0return false;
> > > > =A0 =A0 }
> > > > =A0 =A0}
> > > > =A0 }
>
> > > > =A0 if(ajaxRequest){
>
> > > > =A0 ajaxRequest.open('GET', queryfile, true);
> > > > =A0 =A0// Create a function that will receive data sent from the
ser=
ver
> > > > =A0 =A0ajaxRequest.onreadystatechange =3D function(){
> > > > =A0 =A0 if(ajaxRequest.readyState =3D=3D 4 && ajaxRequest.status
=3D=
=3D 200){
> > > > =A0 =A0 =A0var ajaxDisplay =3D do***ent.getElementById(divName);
> > > > =A0 =A0 =A0ajaxDisplay.innerHTML =3D ajaxRequest.responseText;
> > > > =A0 =A0 }
> > > > =A0 =A0}
> > > > =A0 =A0ajaxRequest.send(null);
> > > > =A0 }
> > > > =A0}
> > > > =A0 =A0//-->
> > > > =A0</script>
> > > > </head>
> > > > <body>
>
> > > > <div id=3D"htmlText" style=3D"display:none;"></div>
> > > > <div id=3D"hiddenDiv"></div>
>
> > > > <form method=3D"get" name=3D"testform1">
> > > > =A0<table cellspacing=3D"5" cellpadding=3D"0" border=3D"0"
bgcolor=
=3D"#AAAAAA"
> > > > width=3D"500">
> > > > =A0 =A0<tr>
> > > > =A0 =A0 =A0 =A0 =A0 =A0<td colspan=3D"2">This form is directly
inser=
ted in the original
> > > > page<br>Changing the value of '1' should change the 'select' from
2<=
/
> > > > td>
> > > > =A0 =A0</tr>
> > > > =A0 <tr>
> > > > =A0 =A0<td style=3D"text-align:right;">1</td>
> > > > =A0 =A0<td style=3D"text-align:left;">
> > > > =A0 =A0 <select name=3D"slct1"
onChange=3D"changeSlct('divslct2');">=
> > > > =A0 =A0 =A0<option value=3D"s11">1</option>
> > > > =A0 =A0 =A0<option value=3D"s12">2</option>
> > > > =A0 =A0 </select>
> > > > =A0 =A0</td>
> > > > =A0 =A0<td style=3D"text-align:right;">2</td>
> > > > =A0 =A0<td style=3D"text-align:left;">
> > > > =A0 =A0 <div id=3D"divslct2">
> > > > =A0 =A0 =A0<select name=3D"slct2">
> > > > =A0 =A0 =A0 <option value=3D"s21">1</option>
> > > > =A0 =A0 =A0 <option value=3D"s22">2</option>
> > > > =A0 =A0 =A0</select>
> > > > =A0 =A0 </div>
> > > > =A0 =A0</td>
> > > > =A0 </tr>
> > > > =A0</table>
> > > > </form>
> > > > <input type=3D"submit" onClick=3D"dispHTML('divslct2');"
value=3D"sh=
ow HTML
> > > > DIV select 2">
>
> > > > <script type=3D"text/javascript">
> > > > <!--
> > > > doaction(true,'testform.html','');
> > > > //-->
> > > > </script>
>
> > > > </body>
> > > > </html>
>
> > > > AND this is the inserted content by AJAX:
>
> > > > <br>
> > > > <br>
> > > > <form method=3D"get" name=3D"testform2">
> > > > =A0<table cellspacing=3D"5" cellpadding=3D"0" border=3D"0"
bgcolor=
=3D"#BBBBBB"
> > > > width=3D"500">
> > > > =A0 =A0<tr>
> > > > =A0 =A0 =A0 =A0 =A0 =A0<td colspan=3D"2">This form is inserted in
a =
DIV by using
> > > > AJAX.<br>Changing the value of '3' should change the 'select' from
4=
</
> > > > td>
> > > > =A0 =A0</tr>
> > > > =A0 <tr>
> > > > =A0 =A0<td style=3D"text-align:right;">3</td>
> > > > =A0 =A0<td style=3D"text-align:left;">
> > > > =A0 =A0 <select name=3D"slct3"
onChange=3D"changeSlct('divslct4');">=
> > > > =A0 =A0 =A0<option value=3D"s31">a</option>
> > > > =A0 =A0 =A0<option value=3D"s32">b</option>
> > > > =A0 =A0 </select>
> > > > =A0 =A0</td>
> > > > =A0 =A0<td style=3D"text-align:right;">4</td>
> > > > =A0 =A0<td style=3D"text-align:left;">
> > > > =A0 =A0 <div id=3D"divslct4">
> > > > =A0 =A0 =A0<select name=3D"slct4">
> > > > =A0 =A0 =A0 <option value=3D"s41">a</option>
> > > > =A0 =A0 =A0 <option value=3D"s42">b</option>
> > > > =A0 =A0 =A0</select>
> > > > =A0 =A0 </div>
> > > > =A0 =A0</td>
> > > > =A0 </tr>
> > > > =A0</table>
> > > > </form>
> > > > <input type=3D"submit" onClick=3D"dispHTML('divslct4');"
value=3D"sh=
ow HTML
> > > > DIV select 4">
>
> > > > You can see that the form that has NOT been inserted by AJAX work
ju=
st
> > > > 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...- Tekst uit
oorspronkel=
ijk bericht niet weergeven -
>
> - Tekst uit oorspronkelijk bericht weergeven -
I am not using a framewok because I just started to use AJAX for some
simple things.
I will probably start using a framework, but I think using it like
this will improve my understanding
of AJAX and I get to train my understanding of JavaScript at the same
time.
|
