StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAjax, php output, iframes and JCrop
text
Body
copied!<p>I have implemented an AJAX upload with an iframe due to compatability however I am now trying to bind the result returned by the AJAX uplaod with the <code>jcrop</code> as the results are loaded in after.</p> <p>The PHP output is in this format:</p> <pre><code><img src="upload/'.$new_name.'" id="cropbox" />  <form action="crop.php" method="post" onsubmit="return checkCoords();"> <input type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" /> <input type="hidden" id="w" name="w" /> <input type="hidden" id="h" name="h" /> <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" /> </form> </code></pre> <p>My issue is that the <code>jcrop</code> doesn't bind with the image. </p> <p>Is this because the <code>jQuery</code> to bind it should be run after the AJAX upload has published the results? Or should it automatically bind with the image?</p> <p>The JS<code>enter code here</code> for the <code>jcrop</code> is as follows:</p> <pre><code><script type="text/javascript"> $(function(){ $('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords }); }); function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; </script> </code></pre> <p>Can anyone advise why the js isn't binding with the image? Or offer any advise?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload