jQuery вызывает php-скрипт, который выводит div, но не отображается

Question

Я занимаюсь разработкой сценария загрузки, в котором вы можете загрузить изображение с предварительным просмотром.После выбора файла он передает его в скрипт php, который отображает картинку.JQuery в первом коде вставляет это в мой предварительный просмотр.После рисунка я печатаю некоторые поля ввода.В полях ввода вы можете ввести текст, который вы хотите иметь на картинке, если вы нажмете на предварительный просмотр, он изменит изображение и покажет его в том положении, в котором находилось другое изображение, но поля ввода должны остаться там.Мой код:

<script type="text/javascript"><!--//--><![CDATA[//><!--

$j(document).ready(function() {      
$j('#photoimg').live('change', function() { 
    $j("#preview").html('');
    $j("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
    $j("#imageform").ajaxForm({
        target: '#preview'
        }

    }).submit();
});

}); 
 //--><!]]></script>

В теле у меня есть это:

<div id='preview'>
</div>

Я повторяю это:

echo "<img src='uploads/".$actual_image_name."'  class='preview'><br  />";
echo "</div><div id='preview3'>";
echo "Line 1 <input type='text' id='cardtext1' name='cardtext1' value='1'/>";

Поэтому я хочу закрыть предварительный просмотр divв моем эхо и откройте еще один, который я могу изменить HTML-код в первом div (с изображением) без каких-либо изменений в полях ввода.HTML-код должен выглядеть следующим образом:

 <div id='preview'>
 <img src='uploads/test.jpg'  class='preview'><br  />
 </div>  <====this one is missing
 <div id='preview3'>
 <input type='text' id='cardtext1' name='cardtext1' value='1'/>
 </div>

Проблема в том, что, если я проверяю HTML-код сайта, он показывает только начало нового, но метка закрытия не отображается.Я также пытался поместить его в переменную php, но тоже не работал.Почему это?И как исправить?

Answer 1

Что-то не так с вашим кодом JavaScript (часть jQuery) .. Похоже, здесь есть ошибочная закрывающая фигурная скобка }:

$j('#photoimg').live('change', function() { 
    $j("#preview").html('');
    $j("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
    $j("#imageform").ajaxForm({
        target: '#preview'
    } // <-- right here
    }).submit();
});

Похоже, что должно быть:

$j("#imageform").ajaxForm({
    target: '#preview'
}).submit();

В любом случае, то, что вы делаете, пытаясь динамически закрыть этот div и ввести новый, может быть более сложным, чем его стоит.Я никогда не пытался сделать это, но я чувствую, что это не будет кросс-браузерной совместимостью, даже , если у вас работает, скажем, в Firefox, например.

Вместо использования $preview в качестве цели, почему бы не обернуть его в другой контейнер div и использовать это:

<div id="container">
    <div id="preview"></div>
</div>

Тогда ваш jQuery будет выглядеть так:

$j('#photoimg').live('change', function() { 
    $j("#container").html('')
        .html('<img src="loader.gif" alt="Uploading...."/>');
    $j("#imageform").ajaxForm({
        target: '#container'
    }).submit();
});

В этом случае полученный PHP будет иметь вид:

echo '<div id="preview">',
     "<img src=\"uploads/{$actual_image_name}\" class=\"preview\"><br />",
     '</div><div id="preview3">',
     'Line 1 <input type="text" id="cardtext1" name="cardtext1" value="1"/>';