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

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.