tailieunhanh - Publishing AJAX and PHP - part 26

Một nhiệm vụ mới được thêm vào bằng cách nhấp vào nút Add nhiệm vụ này hoặc bằng cách nhấn phím Enter. Các yêu cầu AJAX thực tế được gửi bởi chức năng quá trình. Chức năng này xử lý việc gửi yêu cầu cho tất cả ba hành động (danh sách sắp xếp lại / thêm nhiệm vụ / xóa nhiệm vụ), bằng cách xác định các hành động được thực hiện như một tham số. | AJAX Drag and Drop This code asks the user for confirmation and if this is received hides that element from the screen and calls process which sends the HTTP request. In index .php there s a small block of code that dynamically creates the tasks list ul id tasksList class sortableList onmouseup process tasksList updateList php myTasksList new TasksList echo myTasksLi st- BuildTasksList ul A new task is added by clicking on the Add this task button or by pressing the Enter key. The actual AJAX request is sent by the process function. This function handles the sending of requests for all three actions reorder list add task delete task by specifying the action to be performed as a parameter. When adding a new task the first parameter of the process function is the ID of the text field in which we ve just typed a new task. input type button name submit value Add this task onclick process txtNewTask addNewTask The database update after list reordering is triggered by an onmouseup event inside the unordered list with id tasks List our sortable list. The event calls the process function which takes as its first parameter the list s ID. ul id tasksList class sortableList onmouseup process tasksList updateList Because we ll be sending an array of values to the server we need to serialize that data and we do this through serialize our home-made function. This function counts how many li elements we ve got then loops through each one of them and add its ID to the string. We also need to cut off the trailing _ on the returned value. function serialize listlD count the list s items var length listlD . var serialized loop through each element for i 0 i length i get current element var li listlD .childNodes i get current element s id without the text part var id id append only the number to the ids array serialized encodeURlComponent id _ return the array with the trailing _ cut off return .