javascript - 每当我单击cakephp时如何使用ajax更改状态

Question

我还想在单击它们时更改我的状态消息。这是我要应用的图像

如图所示，当我点击它时，事件状态需要更改为非事件状态。我可以使用编辑页面来完成，但现在我想在单击“页面加载时处于事件状态”时更改状态。这是我的代码ctp文件

<td class="center">
        <?php if($listings['status']=="1") { ?>
            <span class="label label-success">Active</span>
            <?php } else if($listings['status']=="0")   {?>

            <span class="label label-error">Inactive</span>

            <?php } ?>
        </td>

这是 Controller 代码

if ((!empty($this->request->data['action'])) && (!empty($this->request->data['ids'])))
    {
          $action=$this->request->data['action'];
          $ids=$this->request->data['ids'];
            switch($action)
            {
                case "active":
                $this->request->data['status']="1";
                foreach($ids as $id)
                {

                    $this->Listing->id = $id;
                    $this->Listing->save($this->request->data);
                }
                $this->Session->setFlash(__('Active Successfully'),'default',array('class' => 'alert alert-success'), 'alert');
                $this->redirect(array('controller'=>'Listing','action' => 'index'));
                break;
                case "inactive":
                $this->request->data['status']="0";
                foreach($ids as $id)
                {

                    $this->Listing->id = $id;
                    $this->Listing->save($this->request->data);
                }
                $this->Session->setFlash(__('InActive Successfully!'),'default',array('class' => 'alert alert-success'), 'alert');
                $this->redirect(array('controller'=>'Listing','action' => 'index'));

                break;

请帮助我并告诉我如何使用 ajax 或 jquery 做到这一点。

Answer 1

试试这个:

HTML: <button type="button" class="active" data-id="2">Active/button>

//Note that data-id ...It's just an attribute I created, and the value "2" I //believe will be dynamic in your case -Probably that college ID in the DB

JavaScript(需要 Jquery)

<script>
  $(document).on('click', 'button[data-id]', function(event) {
    event.preventDefault();
    var collegeID = $(this).attr('data-id');

    $.ajax({
        url: 'changeStatus',
        type: 'POST',
        dataType: 'json',
        data: {id: collegeID},
        success: function(data){
            if (data['status'] == "success") {
                $('button[data-id]').removeClass('active').addClass('inactive');
                /*Class active and inactive should be in your CSS with color according to their names*/
            };
        }
    });

});
</script>

Controller :

public function changeStatus(){
    $this->autoRender = false;
    if ($this->request->is('ajax')) {
        $data = $this->request->data;

        /*The id that was passed thru data-id attribute is here: */
        //$data['id'] Use it to update your DB


        //After successful update
        $response = array('status' => 'success');
        return json_encode($response);
    }
}

然后最后但并非最不重要的是你的路线:

Router::connect('/changeStatus', array('controller' => 'yourcontroller', 'action' => 'changeStatus'));

希望有所帮助。祝你好运