Question

I am developing an upload script where you can upload an picture, which is directly previewed. After choosing the file it passes it to an php script which echos the picture. The jQuery in the first code inserts this into my preview . After the picture I am printing some input fields. In the input fields you can enter text you want to have on the picture, if you click preview it modifies the picture and shows it on the position the other picture was, but the input fields should stay there. My code:

<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>

In the body I have this:

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

I am echoing this:

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'/>";

So I want to close the preview div in my echo and open another one that I can change the html code in the first div (with the picture) without any change to the input fields. The html code should be like:

 <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>

The problem is, if I check the html code of the site it only shows the begin of the new but the closetag is not echoed. I also tried to put it in an php variable but also not working. Why is this? And how to fix?

Answer 1

Something looks wrong with your JavaScript code (the jQuery part).. It looks like there is an erroneous closing curly brace } here:

$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();
});

Looks like it should be:

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

Anyway, what you’re doing by trying to dynamically close that div and inject a new one could be more tricky than its worth. I’ve never tried to do that but I feel like that would not be cross-browser compatible even if you got it working in, say, Firefox for example.

Instead of using $preview as your target, why not wrap it in another div container and use that:

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

Then, your jQuery would look like this:

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

In which case, the resulting PHP would end up like:

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"/>';