Martin schreef:
> 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)
Yes, that is normal HTML.
> the second form uses the same functions as the first so it should act
> the same way.
I also thought 'it should' untill I tested. ;-)
Never assume too much.
Return this as your AJAX response and place it in a div:
<script type="text/javascript">
alert('Do you see this alert?');
</script>
Try it and you'll see what I mean.
Regards,
Erwin Moller
|
