Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ajaxSubmit not compatible with jQuery>=1.12.1 #495

Closed
senendds opened this issue Apr 6, 2016 · 12 comments
Closed

ajaxSubmit not compatible with jQuery>=1.12.1 #495

senendds opened this issue Apr 6, 2016 · 12 comments

Comments

@senendds
Copy link

senendds commented Apr 6, 2016

I don't know if this plugin is still supported (it seems it's not), but in case anyone is interested, there is a problem with this code in ajaxSubmit:

    if (!options.dataType && options.target) {
        var oldSuccess = options.success || function(){};
        callbacks.push(function(data) {
            var fn = options.replaceTarget ? 'replaceWith' : 'html';
            $(options.target)[fn](data).each(oldSuccess, arguments);
        });
    }

because, in jQuery 1.12.1, they have changed the function each() from

    // Execute a callback for every element in the matched set.
    // (You can seed the arguments with an array of args, but this is
    // only used internally.)
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    },

to

    // Execute a callback for every element in the matched set.
    each: function( callback ) {
        return jQuery.each( this, callback );
    },

That means that the success callback function is called without parameters.

@rajeshdk
Copy link

Hi This code is not working with new Jquery 2.2

$(document).on('change', '#image_upload_file', function () {
var progressBar = $('.progressBar'), bar = $('.progressBar .bar'), percent = $('.progressBar    .percent');

$('#image_upload_form').ajaxForm({
beforeSend: function() {
    progressBar.fadeIn();
    var percentVal = '0%';
    bar.width(percentVal);
    percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    bar.width(percentVal);
    percent.html(percentVal);
},
success: function(html, statusText, xhr, $form) {       
    var obj = $.parseJSON(html);    
    if(obj.status){     
        var percentVal = '100%';
        bar.width(percentVal);
        percent.html(percentVal);
         $("#imgArea img").load(function() {
         $(this).hide();
         $(this).fadeIn('slow');
          }).attr('src', 'images/logo.jpg?'+ new Date().getTime());

    }else{
        alert(obj.error);
    }
},
complete: function(xhr) {
    progressBar.fadeOut();          
}   
}).submit();        

});`

Is there anyway to fix it, thanks

@kavin-90
Copy link

Working Fine on 2.2.3 no problem at all

Code

// Post Tweet
var msg = $('#message');
$("#twitter").attr("disabled", true);
$('#twitter-post').keyup(function(e){
val = $(this).val().trim();
if(val.length == 0){
$("#twitter").attr("disabled", true);
}
else{
$("#twitter").attr("disabled", false);

$("#compose").ajaxForm({
beforeSend: function(data) {
e.preventDefault();
msg.empty();
},
complete: function(xhr) {

var obj = JSON.parse(xhr.responseText); 

var msg_content = obj.msg;

var html_body_success = "<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><span class='glyphicon glyphicon-remove'></span>"+ msg_content +"</div>";

var html_body_error = "<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><span class='glyphicon glyphicon-remove'></span>"+ msg_content +"</div>";

if(obj.success){
msg.html(html_body_success);

$('#twitter-post').clearInputs();
$("#twitter").attr("disabled", true);
} else {
msg.html(html_body_error);
}

$('div.dz-success').remove();

}
});
}
});

@senendds
Copy link
Author

As I said, it is the success callback what is not working. You have to change this line

$(options.target)[fn](data).each(oldSuccess, arguments);

with something like

$(options.target)[fn](data).each(function(){
   oldSuccess.call(this, data, status, xhr);
});

@kavin-90
Copy link

kavin-90 commented Apr 21, 2016

Works no Problem with Success too
jQuery Form Plugin
version: 3.51.0-2014.06.20

jQuery v2.2.3

// Post Tweet
var msg = $('#message');
$("#twitter").attr("disabled", true);
$('#twitter-post').keyup(function(e){
val = $(this).val().trim();
if(val.length == 0){
$("#twitter").attr("disabled", true);
}
else{
$("#twitter").attr("disabled", false);

$("#compose").ajaxForm({
beforeSend: function(data) {
e.preventDefault();
msg.empty();
},
success: function(xhr) {

var obj =  xhr;

var msg_content = obj.msg;

var html_body_success = "<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><span class='glyphicon glyphicon-remove'></span>"+ msg_content +"</div>";

var html_body_error = "<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><span class='glyphicon glyphicon-remove'></span>"+ msg_content +"</div>";

if(obj.success){
msg.html(html_body_success);

$('#twitter-post').clearInputs();
$("#twitter").attr("disabled", true);
} else {
msg.html(html_body_error);
}

$('div.dz-success').remove();

}
});
}
});

@senendds
Copy link
Author

The problem only happens if (!options.dataType && options.target).

You are not specifying a target, that's why you don't meet the problem.

@xael-fry
Copy link

I confirm the issue, I have exactly the same issue after upgrading jquery

@titus65
Copy link

titus65 commented Jun 4, 2016

Same problem here with ajaxForm (success is called with undefined form object) when upgrading from jq 1.7.2 to 1.12.3

@kevindb
Copy link
Contributor

kevindb commented Feb 21, 2017

Are you still experiencing this issue with version 4.0.1+?

@kevindb kevindb closed this as completed Feb 21, 2017
@titus65
Copy link

titus65 commented Feb 22, 2017 via email

@kevindb
Copy link
Contributor

kevindb commented Feb 22, 2017

Would you please create an example of the error on CodePen or JSFiddle?

@vkurup
Copy link

vkurup commented Feb 22, 2017

Here's a quick example: https://jsfiddle.net/etdssL0h/10/

@kevindb
Copy link
Contributor

kevindb commented Feb 22, 2017

Thank you, @vkurup, that's very helpful to understanding the issue.
Would someone please submit a pull request with the necessary fix? @senendds perhaps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants