ajax InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Question

Very strange issue...I am trying to pass multiple values to a method in post. It works fine as long as I dont post as an object. But when I try to post as an object I get the error

Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

here is the code

This works

var x = $('#myDiv').val(canvas.toDataURL("image/png", 1.0);    
                $.ajax({
                    type:'POST',
                    url:"/myMethod/test",
                    data: x,
                    success:function (response) {
                }
            });

But this would NOT work

var x = $('#myDiv').val(canvas.toDataURL("image/png", 1.0);    
                    $.ajax({
                        type:'POST',
                        url:"/myMethod/test",
                        data: {x:x}, 
                        success:function (response) {
                        }
                    });

I am not sure why it is complaining when I try to send it as an object

Answer 1

This

var x = $('#myDiv').val(canvas.toDataURL("image/png", 1.0));

is a jQuery collection of DOM elements, as val() returns the collection when a value is set, and a string when the value is gotten, and you're setting the value, at least it seems like you are, even if the last parenthesis is missing, and you can't send that with ajax no matter how hard you try ?