jQuery on(“paste”) for the first time doesn't

Question

Real deal problem for me, because I have no clue to resolve it.

jQuery script I wrote should grab the input value on "paste" action and pass it by ajax to codeigniter controller.

It actually works fine, but only if I paste the value for the second (and further) time. It works fine too when I change on("paste") to on("click") for some div or other DOM element.

Script:

<script type="text/javascript">
$("#link").on("paste", function(){
$("#thumbs").empty().html("<p>loading</p>");
var postData = {
  'url' : $("#link").val()
 }; 

 $.ajax({
     type: "POST",
     url: "/thumb/ajax/",
     data: postData , //assign the var here 
     success: function(msg){
    $("#thumbs").html( "Data Saved: " + msg );
     }

});

});

Any help would be appreciated

EDIT: one more hint.

val() in this particular script actually takes value before the paste action. If i write something to this input, then remove it and paste something else it would actually pass to the controller the value i wrote, not the one I pasted.

EDIT2: OK, I'm pretty sure that's jQuery problem with paste.

<script type="text/javascript">

    $("#link").on("paste", function(){
        $("#thumbs").empty().html("<p>loading</p>");
        var postData = {'url' : $("#link").val() }; 
        $("#thumbs").html($("#link").val());
    });


</script>

This script should add value from input to div#thumbs. It doesn't for the first paste action. On second it's actually works.

EDIT3: My friend gave me a hint. on("paste") works right on "paste" action and before the paste is actually done. If anyone give me a hint how to make a timeout to grab the value after the paste I can move on.

Answer 1

it works just fine here

DEMO

update:

you will have to stringify the object in order to send it to the server, include json2.js your code will look like

$("#link").on("paste", function(){
$("#thumbs").empty().html("<p>loading</p>");
var postData = {   'url' : $("#link").val(),   'test' : 'testtest'  };

     $.ajax({
         type: "POST",
         url: "your/url",
         data:JSON.stringify(postData),
         success: function(msg){
        $("#thumbs").html( "Data Saved: "  );
         }        
        });
      }); 

here is a DEMO i have included the json2.js from the cdn

Answer 2

It worked using setTimeOut, according to the solution found by sznowicki.

My example:

$("#search-product").on("paste", function(){
    let $element = $(this);
    setTimeout(function(){
        search($element)
    },0);
});

Thank you!

Answer 3

Problem solved.

Like I said before, "on("paste")" action is being done right on the actual paste. So function is being done before the value is pasted to the input. That's because first time paste grabs and pass the default value of the input (null for my example).

Solution is to set the timeout. Right code looks like that and works just fine.

$("#link").on("paste", function(){

setTimeout(function() {
    $("#thumbs").html("<p>loading</p>");
    var postData = {
      'url' : $("#link").val()
      };
    $.ajax({
         type: "POST",
         url: "/thumb/ajax/",
         data: postData , //assign the var here 
         success: function(msg){
        $("#thumbs").html( "Data Saved: " + msg );
            $(".thumb").click(function(){
            (this).attr('id');


        });

         }

    });
}, 500);

});

Problem solved, thanks @3nigma for support.

Answer 4

I ended up using 'oninput', which works fine unless you need to support IE8 or below.