Problem catching form submit with jQuery when using "display:none"

Question

Hi Guys,

I am trying to use jQupload to upload an image asynchronously. The script uses an iframe off of the page to upload and then catches the .load() event of the iframe to return the JSON message that is returned.

If I display the form at the bottom of a standard HTML page and include the javascript then it works fine. However, I would like to load the upload form into a modal window and I am using facebox for this. The form is therefore included with the style tag set to "display:none" at the bottom of the page and it displays in the modal window when a specific button is clicked.

Within the modal window, the form submit's without a problem and the iframe is populated, however the code the form's submit event is not being caught by the javascript. I have tried alerting a simple string in the function but I get no result. However, if I alert out a string using the "onsubmit" tag of the form then it works ok.

The following line of code executes ok and adds a target attr to the form:

$(this).attr("target",data.iframe);

This is the next line of code that is not firing within the modal window:

$(this).submit(function(){
                            alert('hello!');
                $("#"+data.iframe).load(function(){
                    var data1=$("#"+data.iframe).contents().find("body").html();
                    data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
                    if($.jQupload.callback[id]){
                        eval($.jQupload.callback[id]+"('"+data1+"')")
                    }
                    else{
                        if($.jQupload.output[id]){
                            $.jQupload.jsonMessage(data1)
                        }
                        else{
                            $.jQupload.defaultMessage(data1)
                        }
                    }
                    $("#"+data.iframe).contents().find("body").html("");
                    $("#"+data.iframe).unbind("load")
                })
            });

This code comes from within the jQupload functions which are called using the following 2 lines:

$("#image_upload_form").jqupload();
$("#image_upload_form").jqupload_form();

This is the full jQupload code and is being used as described at http://jqframework.com/jqupload_doc.html :

    /*  jQupload - jQuery Upload v0.1
 *  jQupload is distributed under the terms of the MIT license
 *  For more information visit http://jqframework.com/jqupload
 *  Copyright (C) 2010  jqframework.com
 * Do not remove this copyright message
 */
$.jQupload = {
    fadeOutTime:3000,
    callback:{},
    output:{},
    init: function(id,obj){
        if(obj.callback){
            $.jQupload.callback[id]=obj.callback
        }
        if(obj.output){
            $.jQupload.output[id]=obj.output
        }
        if(obj.fadeOutTime){
            $.jQupload.fadeOutTime=obj.fadeOutTime
        }
    },
    defaultMessage:function(data){
        alert(data)
    },
    jsonMessage:function(data){
        eval("data="+data);
        $("#"+$.jQupload.output[data.formid.value]).html(data.message).fadeOut($.jQupload.fadeOutTime)
    }
};

$.fn.extend({
    jqupload:function(obj){
        return this.each(function(){
            var id=this.id;
            if(typeof this.id=="object"){
                id=$(this).attr("id")
            }
            if(!obj)
                obj={};
            $.jQupload.init(id,obj)
        })
    },
    jqupload_form:function(){
        return this.each(function(){
            var id=this.id;
            if(typeof this.id=="object"){
                id=$(this).attr("id")
            }
            var data=$.extend(
                {},
                {iframe:id+"_iframe"},
                data
            );
            $("body").append("<iframe name="+data.iframe+' id="'+data.iframe+'"></iframe>');
            //$("#"+data.iframe).css({position:"absolute",left:"-1000px",top:"-1000px",width:"0px",height:"0px"});
            $("#"+data.iframe).css({position:"absolute",left:"0px",top:"0px",width:"500px",height:"500px"});
            $(this).attr("target",data.iframe);

            $(this).submit(function(){
                $("#"+data.iframe).load(function(){
                    var data1=$("#"+data.iframe).contents().find("body").html();
                    data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
                    if($.jQupload.callback[id]){
                        eval($.jQupload.callback[id]+"('"+data1+"')")
                    }
                    else{
                        if($.jQupload.output[id]){
                        }
                            $.jQupload.jsonMessage(data1)
                        else{
                            $.jQupload.defaultMessage(data1)
                        }
                    }
                    $("#"+data.iframe).contents().find("body").html("");
                    $("#"+data.iframe).unbind("load")
                })
            });
            return true
        })  
    }
});

Any ideas?

Answer 1

Matt, I believe the problem is the selector you're using not actually rigging anything up to the form:

$(this).submit(function() {...

only works in a certain context, it should be this to work everywhere:

$("#myFormId").submit(function() {....