CODEWITHSUNDEEP
javascriptjqueryajaxbootbox
Mark Hill
Mark Hill

Reputation: 1839

Illegal Invocation using ajax and bootbox

Good morning everyone.

So I've been working on this system using the bootbox plugin for jquery to make a nice series of windows and forms that do order processing and management and whatnot. In this particular case, I have a receiving function that upon the click of a link, fetches the order data, then builds a form and sends that form back. Then when I click submit it should still process but in this case I am getting an illegal invocationerror. I have tried this function both with the ajax outside of the bootbox call, and inside the callback under success. I have had zero luck both ways, so I am hoping someone can help me solve this problem.

Here is my code below: 

$('#new-inventory').on('click', '.receive', function(e){
    e.preventDefault();
    var id = $(this).data('id');
    $.ajax({
        url : 'assets/server/home/receive.php',
        type : 'POST',
        data : {id : id},
        dataType : 'JSON',
        success : function(data){
            bootbox.dialog({
                title : "Receive Tires",
                className : 'receive-tires-window',
                message : "<main class='row'>"+
                    "<section class='col-xs-12'>"+
                        data.message+
                    "</section>"+
                "</main>",
                buttons : {
                    success : {
                        label : 'Receive',
                        className : 'btn-success',
                        callback : function(){

                            e.preventDefault();
                            var formData = new FormData($('#rcvfrm')[0]);
                            $.ajax({ //error received right here
                                url : 'assets/server/home/process_receiving.php',
                                type : 'POST',
                                data : formData,
                                dataType : 'JSON',
                                success : function(data){
                                    if(!data.errors){
                                        bootbox.alert(data.message, function(){
                                            location.reload();
                                        });
                                    }else{
                                        bootbox.alert(data.message);
                                    }
                                }
                            });

                            return false;
                        }
                    },
                    danger : {
                        label : 'Cancel',
                        className : 'btn-danger',
                        callback : function(){

                        }
                    }
                }
            });

            $('.receive-tires-window').on('shown.bs.modal', function(){
                $('.receive-tires-window #recv_date').datepicker();
            });

        }
    });
});

Upvotes: 0

Views: 309

Answers (1)

Olli K
Olli K

Reputation: 1760

This is because jQuery ajax automatically tries to coerce the data to a string, which you have in an incoercible formadata object.

To fix this, you need to add these two options to the second request:

processData: false,
contentType: false

You can read more detailed explanation for the options on the documentation. See also this and this questions.

Upvotes: 1

Related Questions