CODEWITHSUNDEEP
javascriptphpjquery
dericcain
dericcain

Reputation: 2290

Using content editable to submit changes with ajax and PHP

I have a page that dynamically produces multiple lines which contain a <p contenteditable="true">. I want to submit the changes to that field on the blur event. I am using the HTML data attribute to assign a number to each field which makes it unique.

Here is the code that I have so you can see what I mean.

PHP - This dynamically produces the fields

 $row = ''; 
    while($row = mysqli_fetch_array($results)) {
        echo '<tr><td class="columnButton vertAlign"><button data-complete="'.$row['id'].'" class="btn btn-success btn-sm completeTask" action="completeTask" method="POST">Complete</button></td><td class="vertAlign"><div class="task"><p class="taskText" data-task="'.$row['id'].'" contenteditable="true">'.$row['list'].'</p></div></td><td class="vertAlign columnButton"><button method="POST" action="delete" type="submit" class="deleteTask btn-sm btn btn-danger pull-right" data-id="'.$row['id'].'">Delete</button></td></tr>';
    }

jQuery - This will handle the AJAX POST

var dataTask = $(this).attr('data-task');
    $('.taskText').on('blur', function(){
        alert(dataTask);
    });

I am trying to use the alert to show that the blur event is working, but it is not. If I can get this alert to work with each contenteditable field, I can get my AJAX to work. How can I assign this event to each contenteditable field and make it work?

Upvotes: 1

Views: 1251

Answers (1)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Because you are creating <p> tag with class taskText class from jquery itself(dynamically created html),that is why you have to bind event blur as shown below :

Try this :

$(document).on('blur','.taskText',function(){
   var dataTask = $(this).attr('data-task');
   alert(dataTask);
});

OR

$('body').on('blur','.taskText',function(){
   var dataTask = $(this).attr('data-task');
   alert(dataTask);
});

See More here :- http://api.jquery.com/on/

Upvotes: 2

Related Questions