Run jQuery Plugin after ajax form success

Question

I use jqueryForm plugin for updating an image without reloading page:

<script type="text/javascript" >
$(document).ready(function() {
    $('#submitbtn').click(function() {
        $("#viewimage").html('');
        $("#viewimage").html('Uploading...');
            $(".uploadform").ajaxForm({
            target: '#viewimage',
            }).submit();
    });
});
</script>

Afterwards i want to use imgAreaSelect plugin (that works perfect when solo)

<script type="text/javascript">
$(document).ready(function () {
    $('img').imgAreaSelect({
        aspectRatio: '166:90',
        minHeight: 90,
        minWidth: 166,
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="x2"]').val(selection.x2);
            $('input[name="y2"]').val(selection.y2);            
            $('input[name="width"]').val(selection.x2-selection.x1);
            $('input[name="height"]').val(selection.y2-selection.y1);        
        }
    });
});
</script>

Now second pluting doesn't work.

It seems that i have to use imgAreaSelect function right after jQuery Form success (there is such callback function in jQuery form documentation. Is it right way of thinking? How i have to do it? Thank you.

Answer 1

Use the plugin the way it was intended to be used.

$(document).ready(function () {
    $(".uploadform").ajaxForm({
        target: '#viewimage',
        beforeSubmit: function () {
            // this happens before the ajax request
            $("#viewimage").html('Uploading...');
        },
        success: function () {
            // this happens after the ajax request
            $('img').imgAreaSelect({...}); // removed options for this sample, add them back in your code.
        }
    });
});

You don't need click events or submit events, or even to trigger the submit event, this all gets handled by the plugin. This piece of code replaces both code snippets in your question.