jQuery вызов php скрипт, который echos 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-код сайта он показывает только начало нового, но closetag не повторил. Я также попытался поместить его в переменную 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"/>';