Access denied when making ajax request in onpaste event

Question

In my asp.net mvc website I am making an ajax call to my server when the user pastes something in a certain textbox. This call used to work in IE 8, but now it stopped working in IE 11, giving me an access denied exception in my jQuery 1.7.1 at h.open(c.type,c.url,c.async).

Long research hinted me that it might be related to a CORS issue, but... every call is on the same domain.

<input type="text" id="Pasteexcelhere" name="Pasteexcelhere" />


   <script type='text/javascript' >
     $(function () {
         onp();
     });
     function onp() {
         obj = document.getElementById('Pasteexcelhere');    

         $('#Pasteexcelhere').on('paste', function (e) {              
             x = obj.value;
             $.ajax({
                 type: "POST",
                 url: "<%= Url.Action("PasteFromExcel", "RequestData" ) %>",
                 data: "{'data': '" + x + "'}",                   
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 traditional: true,                     
                 success: function (da) {
                     alert("success");
                 },
                 error: function (d) {
                     alert(d.statusText); // access denied
                 }
             });
         });
 </script>

When trying to make the same call directly, let's say via a simple link:

<a id="mylink" href="#" onclick="blubb();return false;">Pasted</a>

<script type='text/javascript' >
function blubb() {           
         obj = document.getElementById('Pasteexcelhere');
         x = obj.value;
         $.ajax({
             type: "POST",
             url: "<%= Url.Action("PasteFromExcel", "RequestData" ) %>",
                 data: "{'data': '" + x + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 traditional: true,                     
                 success: function (da) {
                     var propertyGrid = $('#RequestedTickers').data('tGrid');
                     propertyGrid.rebind({});

                 },
                 error: function (d) {
                     alert(d.statusText);
                 }

             });

         };
</script>

It works just as expected... (no access denied)

Does anybody have an idea how to get this to run?

Thanks!

Answer 1

Since it doesn't work only when pasting, the problem seems to be with the paste event-handler.

After searching for problems with IE11 and the paste-event I found among others "IE11 pasting clipboard data to an input element annoyance" on StackOverflow.

It might be a long shot, but a you could try the same "solution" (=workaround) that AlvinfromDiaspar provided as answer in that post:

$('#Pasteexcelhere').on('paste', function () { setTimeout(blubb, 100) });

Answer 2

I had a similar problem. The code was triggering jQuery AJAX request inside paste event listener. This caused the xhr.open(...) to throw an Invalid Argument exception from the jQuery code shown below. The exception occurred only when running the code in IE11:

jQuery.ajaxTransport( function( options ) {
var callback, errorCallback;

// Cross domain only allowed if supported through XMLHttpRequest
if ( support.cors || xhrSupported && !options.crossDomain ) {
    return {
        send: function( headers, complete ) {
            var i,
                xhr = options.xhr();

            xhr.open(
                options.type,
                options.url,
                options.async,
                options.username,
                options.password
            );

The change suggested by @lx fixed this. The code was changed from:

$('#my_input').on('paste', onPaste);

function onPaste(e)
{
    triggerAjaxCall(...)
}

to

$('#my_input').on('paste', onPaste);

function onPaste(e)
{
    setInterval(function () { triggerAjaxCall(...) }, 100);  
}

Answer 3

@lx thanks for this, your solution works however my solution doesn't use JQuery so I had to look further into it. I wasn't getting the access denied as @trykyn was however I was getting an issue of the textbox being blank after pasting ~(only a right click and paste) when fired direct from a <textarea onpaste="ThisIsMyPasteFunction()"></textarea>

I found that in my case I had to use onpaste="setTimeout(function () { ThisIsMyPasteFunction() }, 1) as even although ThisIsMyPasteFunction had a setTimeout(function () { anotherfunction() } , 1) inside it, it would always return as a blank textarea value until I set the setTimeout directly on the onpaste.

Hope that this helps others if they're not using JQuery in their code :-)

Very weird how right click and paste doesn't work but ctrl+v does

Regards Liam