Question

I’ve got a form that is loaded on to a page using ajax. The form is then submitted using the malsup jquery form plugin.

Strangely the form works when I add a firebug breakpoint line or an alert into this method, but when I remove the alert or debug, the submit code never runs.

function addAttachment(attachmentType, path){
var typeSplit = attachmentType.split(":");
if(path == null){
    path = "";
}
var url = "/add/" + typeSplit[0] + "/" + typeSplit[1];                
addOverlayDivs(); //adds div to load the form into
// load the form
var snippet = $('#overlay').load(url, function(response, status, xhr) {
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#overlay").html(msg + xhr.status + " " + xhr.statusText);
    }
});
var prefix = typeSplit[0];
var type = typeSplit[1];
//this alert will cause the submit form to work
alert("bind overlay called");//if I comment this out the formsubmit doesn't work

var options = { 
        target: null,   // target element(s) to be updated with server response 
        beforeSubmit: showRequest,
        success: showResponse,
        url:  "/add/" + prefix + "/" + type, 
        type:      "POST", 
        dataType:  "json" 
};  
$('#overlayForm').submit(function() { 
    $(this).ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});}

I’ve tried with and without using $(document).ready and that doesn’t make a difference.

Any ideas?

Answer 1

May be you need to call later part of your function after load completed,Try this

 $(document).ready(function(){ 

      function addAttachment(attachmentType, path){
        var typeSplit = attachmentType.split(":");
        if(path == null){
            path = "";
        }
        var url = "/add/" + typeSplit[0] + "/" + typeSplit[1];                
        addOverlayDivs(); //adds div to load the form into
        // load the form
        var snippet = $('#overlay').load(url, function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#overlay").html(msg + xhr.status + " " + xhr.statusText);

            }
                   Dowork();//function call after load complete
        });
    }


    function Dowork(){
          var prefix = typeSplit[0];
        var type = typeSplit[1];
        //this alert will cause the submit form to work


        var options = { 
                target: null,   // target element(s) to be updated with server response 
                beforeSubmit: showRequest,
                success: showResponse,
                url:  "/add/" + prefix + "/" + type, 
                type:      "POST", 
                dataType:  "json" 
        };  
        $('#overlayForm').submit(function() { 
            $(this).ajaxSubmit(options);
            // always return false to prevent standard browser submit and page navigation 
            return false; 
        });
    }
    });