How to target form to iframe with Ajax?

Question

I'm still newbe to jQuery so I can't figure out everything on my own. I have simple form for uploading images, jQuery plugin for progress bar which I styled in terms of material design, and iFrame with uploaded files. The thing is, I cannot target that form to iframe, it somehow stops, I assume a conflict in code.

This is HTML:

<form action="upload-sys.php" class="upload" enctype="multipart/form-data" method="post" target="galleryframe">
     <input class="chooseimg" id="fileToUpload" name="fileToUpload" type="file" /> 
     <input name="submit" type="submit" value="UPLOAD" />&nbsp;
</form>

<div class="progress">
    <div class="bar">
         &nbsp;</div>
</div>

<iframe name="galleryframe" onload="javascript:resizeIframe(this);" src="gallery-sys.php"></iframe>

jQuery:

<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
    var bar = $('.bar');
    $('form').ajaxForm({
        beforeSend: function() {
            var percentVal = '0%';
            bar.width(percentVal)
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
        }
    }); 
})();                   
</script>

I don't understand why it doesn't send data to iframe. Then I could reload just iframe source with php and show new images immediately.

I found out I can redirect whole page (but obviously that's not what I need) with adding this:

complete: function() {
    window.location.href = "url-of-target-page";
}

I also tried:

complete: function(responseText, statusText) {
     target.html(responseText);
     var target = 'galleryframe';
}

but no luck.

Could anyone guide me on this one?

Answer 1

I couldn't wait so I tried harder and found a solution I needed. I did research here and wrote code which does that. Here it is:

$(document).ready(function() { 
    var options = { 
        beforeSend: nullWidth,
        uploadProgress: flexibleWidth,
        success: finalized,
    }; 
    $('#galleryform').ajaxForm(options); 
}); 

function nullWidth(options) { 
        var bar = $('.bar');
        var percentVal = '0%';
        bar.width(percentVal);
}
function flexibleWidth(event, position, total, percentComplete) { 
        var bar = $('.bar');
        var percentVal = percentComplete + '%';
        bar.width(percentVal);
}
function finalized(responseText, attr) {
        $('#uploadResult').contents().find('body').html(responseText);
        $('#galleryframe').attr("src", $('#galleryframe').attr("src"));
        var bar = $('.bar');
        var percentVal = '0%';
        bar.width(percentVal);
}

Answer 2

complete: function(responseText, statusText) {
     target.html(responseText);
     var target = 'galleryframe';
}

You have two problems:

1. You are giving target a value after you try to use it
2. The value is a string, not a jQuery object, so it doesn't have an html method.

You need something more like:

jQuery('iframe[name="galleryframe"]').
    contents().
    find('body').
    html(responseText);