Проблема с отправкой формы при помощи jQuery при использовании «display: none» - PullRequest
Новая
       28

Проблема с отправкой формы при помощи jQuery при использовании «display: none»

0 голосов
/ 20 февраля 2010

Я пытаюсь использовать jQupload для асинхронной загрузки изображения. Сценарий использует для загрузки iframe со страницы, а затем перехватывает событие ifload () iframe для возврата возвращаемого сообщения JSON.

Если я отображаю форму внизу стандартной HTML-страницы и включаю JavaScript, тогда она работает нормально. Тем не менее, я хотел бы загрузить форму загрузки в модальное окно, и я использую Facebox для этого. Поэтому форма включена с тегом стиля, установленным в «display: none» внизу страницы, и отображается в модальном окне при нажатии определенной кнопки.

В модальном окне отправка формы без проблем и заполнение iframe, однако код javascript не перехватывает событие отправки формы. Я пытался предупредить простую строку в функции, но я не получил результата. Однако, если я выдаю строку с помощью тега «onsubmit» в форме, она работает нормально.

Следующая строка кода выполняется нормально и добавляет целевой атрибут в форму: 

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

Это следующая строка кода, которая не запускается в модальном окне: 

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

Этот код поступает из функций jQupload, которые вызываются с использованием следующих двух строк: 

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

Это полный код jQupload и используется, как описано в 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
        })  
    }
});

Есть идеи?

1 Ответ

0 голосов
/ 20 февраля 2010

Мэтт, я полагаю, проблема в том, что вы используете селектор, на самом деле ничего не настраивая до формы: 

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

работает только в определенном контексте, оно должно работать везде: 

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