<input>不会更新

Question

My code uses a hidden iframe to upload then display up to 4 photos on my web page.

The code below adds 1 to the count of current images to keep track of how many have been uploaded. When I try to store this value into the "thumbImageCount", which is a simple input control on my web page, the input control's value is not updating.

The reason for the 'parDoc' in the PHP code below is -- all this PHP code is happening inside my web page's hidden iframe, and I need to update the iframe's parent document, the document object for my web page, not the iframe's document (I'm using the 'hidden iframe' techique in a Ajaxie sort of way):

 echo '<script type="text/javascript">'."
";
 echo 'var parDoc = parent.document;' . "
";

 $curImageCount = $curImageCount + 1;
 $outStr = "parDoc.getElementById('justOpenedImage').innerHTML = '<div><img id=\'editImage\' class=\'normSizeImg\' src=\'$fullImagePath\' /></div>';";
 $outStr3 = "
 parDoc.getElementById('picture_path_hidden').value = '" . $fullImagePath . "';";
 $outStr4 = "
 parDoc.getElementById('" . $thumbWindowName . "').src = '" . $fullImagePath . "';";
 $outStr5 = "
 parDoc.getElementById('" . $thumbWindowName . "').style.display = 'inline-block';";
 $outStr6 = "
 parDoc.getElementById('thumbImageCount').value = '" . $curImageCount . "';";
 $outStr7 = "
 alert('photoPreview.php, the new image count (aka curImageCount) is: " . $curImageCount . "');";
 echo $outStr;  
 echo $outStr3;  
 echo $outStr4;  
 echo $outStr5;  
 echo $outStr6;  
 echo $outStr7;  
 echo "
".'</script>';

Notice in outStr7 the iframe puts up an 'alert' box on the parent (my web page's) document. THAT ALERT tells me the image count has successfully incremented.

Notice that in outStr6 I save that same image count into an input element with the id of 'thumbImageCount'.

So in my mind, since the alert box in outStr7, which comes after outStr6, is showing the correct newly-increment image count, so should the 'thumbImageCount' input control on my page.

IT DOESN'T. Here is the html for the 'thumbImageCount' on my web page:

 <input id="thumbImageCount" name="thumbImageCount" type="hidden" 
                                 value="<?php echo $imageCount ?>" />

My web page allows uploading and displaying 4 images. And to do this, the page is not re-posted to the web server (I avoid that by using the hidden iframe technique).

So while you notice above that I set the initial value in the html tag for my thumbImageCount input control to a PHP variable called 'imageCount', which is 0 (zero) -- since my web page only loads one time, that input contro's value, after being initialized by the PHP variable to zero (0), should be able to be updated by this line of my hidden iframe's PHP code from above:

 $outStr6 = "
 parDoc.getElementById('thumbImageCount').value = '" . $curImageCount . "';";

But it's not happening. After loading 4 images, I do a 'view page source' on my web page to see if that 'thumbImageCount' input control has been updated to a value of 4, and this is what I see:

 <input id="thumbImageCount" name="thumbImageCount" type="hidden" 
                                 value="0" />

So if you look at all the 'outStrs' in my PHP code above, all those are working -- the images appear fine on my web page. Only outStr6 fails.

What am I missing here? The reason I need the 'thumbImageCount' to update correctly on my web page is I need to set the 'selected image' to the newly-uploaded image.

Answer 1

The solution was not found here; I had to repost and reframe this question, which I did at: document updating but getElementById() returns incorrect value?

Ultimately the problem was being caused by the page, the DOM, being buffered and the solution was to force the DOM to update so that getElementById() would retrieve the updated state of the thumbImageCount input element. Apparently when something on the page is modified, the DOM does not update immediately, and I had to force it to update, which is described in a new post at the above link.