I have a list and I want to let users reorder the list. For the front-end functionality, I am using UIkit. The list can be reordered on the front end up but I am having a difficult time figuring out how to save the list order to the database.
In the table, there is a "sort" row. So what I am trying to do is update the sort row according to how the user orders the list.
I am trying to do this by getting the order of the items by their IDs then I am using ajax to send the data to the controller. Right now when I reorder the list the response is 200 Ok and the payload shows the project id and the ids in the order that the user set. What I do not know how to do is use that data to update the database. I was thinking I could loop through the ids and set the "sort" to the index of the loop, but I am unsure about how to do this in CakePHP.
The other thing I am sure of is if I should be using the list method that was already defined or if I should create a new method to handle this functionality.
Any help would be appreciated.
This is what I have so far.
List page Jquery code:
UIkit.util.on('.uk-sortable', 'stop', function (item) {
let ids = ""
$('.uk-sortable tr').each(function() {
id = $(this).attr('id'); //this is the project id
if(ids =='') {
ids = id;
}else {
ids = ids + ', '+id ;
}
});
console.log($(this).data('id'));
$.ajax({
url:'admin/cost/list',
type: 'POST',
dataType: 'json',
data: {
'id': $(this).data('id'),
'ids':'ids='+ids,
},
success:function() {
UIkit.notification(`sent successfully`, 'success');
}
});
$this->loadModel('Projects');
$this->loadModel('Costs');
$this->loadModel('CostUpdates');
$this->loadModel('Pays');
$this->loadModel('PayDetails');
$this->loadModel('Specs');
//my code so far
if ($this->request->is('ajax')) {
$id = $this->request->getQuery('id');//project id
$ids = $this->request->getQuery('ids');//items ids, ordered by user
//this is the query to select the items I need to update
$q_update = $this->Specs->find();
$q_upddate->where([
'Specs.project_id' => $project_id,
'Specs.publish' => Configure::read('CST_APP.MST_FLAG.PUBLISH.OPENED'),
'Specs.status' => Configure::read('CST_APP.MST_FLAG.STATUS.CLOSED'),
'Specs.mng_kbn1' => Configure::read('CST_APP.MST_FLAG.COST_TYPE.NORMAL'),
'Specs.price1 IS NOT' => NULL,
]);
// get separate ids
$arr = explode(',',$ids);
//loop and update sort by the index?
for($i=1;$i<=count($arr);$i++)
{
How to update the database in the loop
}
}
//
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
About the technologies asked in this question
PHP
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license. https://www.php.net/
CakePHP
CakePHP is a framework that has been around since 2005 and is known for the convenience it gives web developers. It needs very modest settings, does not require the use of XML or YAML files. It has its own ORM, which sets it apart from other similar tools. In terms of security, it is also doing well, in particular, it has a protection system against CSRF attacks. https://cakephp.org/
JQuery
JQuery is arguably the most popular JavaScript library with so many features for modern development. JQuery is a fast and concise JavaScript library created by John Resig in 2006. It is a cross-platform JavaScript library designed to simplify client-side HTML scripting. Over 19 million websites are currently using jQuery! Companies like WordPress, Facebook, Google, IBM and many more rely on jQuery to provide a kind of web browsing experience. https://jquery.com/
UIkit
UIkit is another popular frontend wrapper that is arguably a little underrated in terms of CSS capabilities. In addition to many features similar to those found on other popular platforms, there are several useful specialized components. https://getuikit.com/
Welcome to webdevask.com
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Get answers to specific questions
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Help Others Solve Their Issues
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.
Get the solution ↓↓↓
