<input>은 업데이트되지 않습니다

Question

내 코드는 숨겨진 iframe을 사용하여 업로드 한 다음 내 웹 페이지에 최대 4 개의 사진을 표시합니다.

아래 코드는 얼마나 많은 이미지가 업로드되었는지 추적하기 위해 현재 이미지 수에 1을 더합니다. 이 값을 내 웹 페이지의 간단한 입력 컨트롤 인 "thumbImageCount"에 저장하려고하면 입력 컨트롤의 값이 업데이트되지 않습니다.

아래의 PHP 코드에서 'parDoc'을 사용하는 이유는이 웹 페이지의 숨겨진 iframe 내부에서이 모든 PHP 코드가 발생하고 있으므로 iframe의 상위 문서, 내 웹 페이지의 문서 객체, (나는 방법의 Ajaxie 정렬의 '숨겨진 iframe을'techique을 사용하고 있습니다)하지 iframe이의 문서 : iframe이 부모 (내 웹 상에 '경고'상자를두고

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

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

공지 사항 outStr7에 페이지의) 문서. ALERT는 이미지 수가 성공적으로 증가했다고 전합니다.

outStr6에서 id가 'thumbImageCount'인 입력 요소에 동일한 이미지 개수를 저장합니다.

내 머리 속에, 이후에 나오는 outStr7의 경고 상자가 새로 증가하는 이미지 개수를 표시하고 있으므로 내 페이지에서 'thumbImageCount'입력 컨트롤을 사용해야합니다.

아닙니다. 다음은 내 웹 페이지의 'thumbImageCount'에 대한 html입니다.

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

내 웹 페이지에서 이미지를 업로드하고 표시 할 수 있습니다. 이렇게하려면 페이지가 이 아니고이 웹 서버에 다시 게시됩니다 (숨겨진 iframe 기술을 사용하여 피할 수 있음). 그 위에 알 동안

그래서 나는 0 (영)입니다 'imageCount'라는 PHP 변수에 내 thumbImageCount 입력 제어를위한 HTML 태그의 초기 값을 설정 - 내 웹 페이지 하나를로드하기 때문에 시간이 0으로 PHP 변수에 의해 초기화 된 후 그 입력 contro의 값는, (0), 위에서 내 숨겨진 iframe 대응의 PHP 코드의 선으로 업데이트 할 수 있어야한다 :

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

그러나 그것은 아니다 사고. 4 개 이미지를로드 한 후, 그 'thumbImageCount'입력 제어 4의 값으로 업데이트되어 있는지 확인하기 위해 내 웹 페이지에 '페이지 소스보기'를 수행하고, 이것은 내가 볼 것입니다 :

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

그래서 위의 PHP 코드에서 'outStrs'를 모두 살펴 본다면 이 모두 작동하고 있습니다. - 이미지가 내 웹 페이지에 잘 표시됩니다. outStr6 만 실패합니다.

무엇이 여기에 있습니까? 내 웹 페이지에서 올바르게 업데이트하기 위해 'thumbImageCount'가 필요한 이유는 새로 업로드 한 이미지에 '선택한 이미지'를 설정해야하기 때문입니다.

Answer 1

해결책은 여기에서 발견되지 않았다; 다시 게시하고이 질문을 재 게시해야했습니다 : document updating but getElementById() returns incorrect value?

궁극적으로이 문제는 페이지와 DOM이 버퍼링되어 발생하며 해결책은 DOM을 강제 업데이트하여 getElementById() thumbImageCount 입력 요소의 업데이트 된 상태를 검색하십시오. 분명히 페이지의 내용이 수정되면 DOM이 즉시 업데이트되지 않고 위의 링크에서 새 게시물에 설명되어있는대로 업데이트해야합니다.

Answer 2

코드에 근본적으로 잘못된 것은 없습니다. 입력 내용이 숨겨져 있지 않으면 값이 변경된 것을 볼 수 있습니다.소스 코드를 동적으로 변경되지 않기 때문에

그러나, "페이지 소스보기"를 통해 변화의 코드를 볼 수 없습니다 - DOM을로 알려진 메모리에서의 "복사"를, 않습니다.

앞으로 브라우저의 개발자 도구를 사용하여 동적 인 변경 사항을 검사하십시오. 따라서 iframe을 사용하여 "ajax"를 수행하지 마십시오.

Answer 3

@ Brian의 답변에 코드 출력에 대한 제안을 추가하고 싶습니다. 여러분이 그대로 코드를 출력 할 필요는 없습니다. 다음과 같이 여러 줄을 사용하는 것이 좋습니다.

echo <<<END 
<script type="text/javascript"> 
    var parDoc = parent.document; 
    parDoc.getElementById('justOpenedImage').innerHTML = '<div><img id=\'editImage\' class=\'normSizeImg\' src=\'$fullImagePath\' /></div>'; 
    parDoc.getElementById('picture_path_hidden').value = '$fullImagePath'; 
    parDoc.getElementById('$thumbWindowName').src = '$fullImagePath'; 
    parDoc.getElementById('$thumbWindowName').style.display = 'inline-block'; 
    parDoc.getElementById('thumbImageCount').value = '$curImageCount'; 
    alert('photoPreview.php, the new image count (aka curImageCount) is: $curImageCount'); 
</script> 
END; 

이 방법은 훨씬 깨끗해 보이며 읽기 쉽습니다. 변수가 아니라면 $을 이스케이프해야합니다. 문제는 아닌 것으로 보입니다.