編集ボタンを押しても反応しない

Question

前提・実現したいこと

cakephpのバージョン２系で車両管理システムのマスタ画面を作っています。
物理テーブル名はmt_work_reasonsです。
編集ボタンを押して、編集画面を表示させたいです。

発生している問題・エラーメッセージ

データベースに登録したデータを編集したいのですが、編集ボタンを押してもなにも反応が無くえらーも出ませんでした。

該当のソースコード

コントローラ
<?php
App::uses('AppController', 'Controller');

class MtWorkReasonsController extends AppController {

    public function index() {
    }


    public function search() {

        $this->autoRender = false;
	    $this->response->type('json');

        if ($this->request->is('get')) {

            $work = $this->work_reasons();

            return json_encode(['success' => 'success', 'data' => $work ]);
        }


        $this->response->statusCode(403);
        return json_encode(['error' => ['message' => '仕様で定義されていないMETHODです。']]);
    }

    public function detail($id = 0) {
        $this->autoRender = false;
        $this->response->type('json');

        // $idの確認
        if (! ctype_digit($id) && $id !== 0) {
            $this->response->statusCode(403);
            return json_encode(['error' => ['message' => 'ID以外の値が渡されました。'. $id]]);
        }


        if ($this->request->is('get')) {

            $work = $this->MtWorkReason->find('first', ['conditions' => ['id' => $id]]);

            if (empty($work)) {
                $this->response->statusCode(404);
                return json_encode(['error' => ['message' => '未登録のIDが指定されました。'. $id]]);
            } else {
                return json_encode(['success' => 'success', 'data' => $work]);
            }
        } elseif ($this->request->is('post')) {

            if ($id > 0) {
                $this->request->data['MtWorkReason']['id'] = $id;
                $this->MtWorkReason->id = $id;
                $data['id'] = $id;
            } else {
                $this->MtWorkReason->create();
            }

            if ($this->MtWorkReason->save($this->data)) {
                if ($id <= 0) {
                    $id = $this->MtWorkReason->id;
                }

                return json_encode(['success' => 'success', 'data' => $this->request->data]);
            } else {
                $this->response->statusCode(500);
                return json_encode(['error' => ['message' => '保存に失敗しました。']]);
            }
        } elseif ($this->request->is('delete')) {
            // 削除

            if ($id > 0) {
                /* if ($this->User->find('count', ['conditions' => ['MtOffice_id' => $id]]) > 0) {
                 *     $this->response->statusCode(403);
                 *     return json_encode(['error' => ['message' => '使用中の権限です。未使用にしてから削除してください。']]);
                 * } */

                $this->MtWorkReason->id = $id;
                if ($this->MtWorkReason->delete($id, true)) {
                    return json_encode(['success' => 'success', 'data' => []]);
                } else {
                    $this->response->statusCode(500);
                    return json_encode(['error' => ['message' => '削除に失敗しました。']]);
                }

            } else {
                $this->response->statusCode(403);
                return json_encode(['error' => ['message' => 'IDを送信してください。']]);
            }
        }

        $this->response->statusCode(403);
        return json_encode(['error' => ['message' => '仕様で定義されていないMETHODです。']]);
    }


    private function work_reasons() {
        return $this->MtWorkReason->find('all', ['order' => 'order_no']);
    }
}

ビュー
<?php
echo $this->Html->css('modal',[ 'inline' => false ]);
echo $this->Html->css('animate.min.css',[ 'inline' => false ]);
echo $this->Html->css('dialog',[ 'inline' => false ]);
echo $this->Html->css('loading-modal',[ 'inline' => false ]);
echo $this->Html->css('MtWorkReason/index.css',[ 'inline' => false ]);

echo $this->Html->script('webapi.js',[ 'inline' => false ]);
echo $this->Html->script('modal.js',[ 'inline' => false ]);
echo $this->Html->script('loading-modal.js',[ 'inline' => false ]);
echo $this->Html->script('animate.js',[ 'inline' => false ]);
echo $this->Html->script('dialog.js',[ 'inline' => false ]);
echo $this->Html->script('view/MtWorkReasons/index.js',[ 'inline' => false ]);

?>
<h1>事由マスタ</h1>

<a href="#new" data-bind="click: newDetail">新規登録</a>
<table>
    <thead>
        <tr>
            <th></th>
            <th>事由番号</th>
            <th>事由名</th>
            <th>表示順</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: work_reasons">
        <tr>
            <td><a href="#edit" data-bind="click: showDetail">編集</a></td>
            <td data-bind="text: MtWorkReason.work_reason_number"></td>
            <td data-bind="text: MtWorkReason.work_reason"></td>
            <td data-bind="text: MtWorkReason.order_no"></td>
            <td><a href="#delete" data-bind="click: deleteDetail">削除</a></td>
        </tr>
    </tbody>
</table>




<div class="modal work_reason-edit-modal" style="display:none">
    <div class="modal-window">
        <div class="modal-header">
            <h2 class="modal-title">事由編集</h2>

            <button class="modal-close-button modal-cancel-button">&times</button>
        </div>
        <div class="modal-content">

            <?php echo $this->Form->create('MtWorkReason', ['id' => 'work_reasonEditForm',
                                                        'action' => 'detail',
                                                        'submit' => 'return false',
                                                        'inputDefaults' => ['label' => false, 'div' => false, 'legend' => false] ])?>

            <div class="input ">
                <label for="" >事由番号</label>

                <input name="data[MtWorkReason][work_reason_number]" data-bind="value: detail.work_reason_number"/>
            </div>

            <div class="input ">
                <label for="" >事由名</label>

                <input name="data[MtWorkReason][work_reason]" data-bind="value: detail.work_reason"/>
            </div>

            <div class="">
                <label for="" class="info-item-header">表示順</label>

                <!-- ko if: detail.id() > 0 -->
                <select name="data[MtWorkReason][order_no]" data-bind="options: orderNumbers, value: detail.orderNo"></select>
                <!-- /ko -->

                <!-- ko if: detail.id() <= 0 -->
                <span data-bind="text: newOrderNumber"></span>
                <input name="data[MtWorkReason][order_no]" type="hidden" data-bind="value: newOrderNumber"/>
                <!-- /ko -->

            </div>

            <div class="modal-buttons">
                <button class="modal-decide-button decision-button"
                        id ="work_reasonSaveButton"
                        type="button"
                        data-bind= "click: saveDetail">保存</button>
                <button class="modal-cancel-button cancel-button" type="button">キャンセル</button>
            </div>

            <?php echo $this->Form->end(); ?>
        </div>
    </div>
</div>

<?php echo $this->element('loading-modal'); ?>
<?php echo $this->element('dialog'); ?>

試したこと

打ち間違いだと思い探したのですが、自分では探すことができませんでした。

補足情報（FW/ツールのバージョンなど）

足りない情報などありましたら、コメントにお願いします。

Comments

[m.ts10806]

ファイルが違うのでしたらコードブロックもわけてください

[kuuhaku4262]

了解しました。

Answer 1

index.jsの39行目が原因でした。
work_reason-edit-modalと入力しなくてはいけないところを、work_reasons-edit-modalと入力してしまっていたため編集ボタンが反応しませんでした。
該当箇所を直したところ、問題なく動きました。

Answer 2

type="button"

submitでないとフォーム送信はしませんが、JavaScriptで制御されてたりしますか？

Comments

[kuuhaku4262]

javascriptで制御しています。

[kuuhaku4262]

index.jsのソースコードです。
文字数オーバーになってしまうので、こちらに書かせていただきます。

$(function() {

// knockout.jsの設定
var work_reasonModel = function() {
var self = this;

self.work_reasons = ko.observableArray([]);

self.detail = { id: ko.observable(0),
orderNo: ko.observable(1),
work_reason_number: ko.observable(2),
work_reason: ko.observable(3),
};

/*** 表示順のリスト ***/
self.orderNumbers = ko.computed(function() {
return Array.from(Array(this.work_reasons().length), (v, k) => k + 1);
}, self);

/*** 新規登録時の表示順 ***/
self.newOrderNumber = ko.computed(function() {

return this.work_reasons().length + 1;
}, self);

/** イベント設定 **/
function addEvents(work_reason) {

/*** 詳細表示 ***/
work_reason.showDetail = function() {
console.log('テスト');
self.detail.id(work_reason.MtWorkReason.id);
self.detail.orderNo(work_reason.MtWorkReason.order_no);
self.detail.work_reason_number(work_reason.MtWorkReason.work_reason_number);
self.detail.work_reason(work_reason.MtWorkReason.work_reason);

openModal(work_reason, '.work_reasons-edit-modal');

}.bind(work_reason);

/*** 削除 ***/
work_reason.deleteDetail = function() {
var id = work_reason.MtWorkReason.id;
if (id <= 0) {
return;
}

if (! confirm(work_reason.MtWorkReason.work_reason + 'を削除しますか？')) {
return;
}

openLoadingModal();
var url = '/car-maintenance/MtWorkReasons/detail/' + id;

webapi.send(url, "DELETE")
.done(function( res ) { // 成功
if (res.success) {
openDialog('.dialog', "データ削除しました。", 'success');

self.updateList();
} else {
openDialog('.dialog', "データ削除に失敗しました。\n" + res.error.messaofficee, 'warn');
}
closeLoadingModal();

}).fail(function( jqXHR, textStatus, errorThrown ) {
openDialog('.dialog', "データ保存に失敗しました。\n" + jqXHR.responseJSON.error.messaofficee, 'warn');
closeLoadingModal();
});

}.bind(work_reason);

return work_reason;

}

// データ全体にイベント設定
function addEventToArray(work_reasons) {
return work_reasons.data.map(addEvents);
}

/*** 画面表示データ更新 ***/
self.updateList = function() {
openLoadingModal();

$.getJSON( "/car-maintenance/MtWorkReasons/search", function( data ) {
if (data.success) {
data.data = addEventToArray(data);

self.work_reasons( data.data);
} else {
openDialog('.dialog', 'データ取得に失敗しました。', 'warn');
}
closeLoadingModal();
});
};

/*** 新規登録 ***/
self.newDetail = function() {

this.detail.id(0);
this.detail.work_reason_number('');
this.detail.work_reason('');
this.detail.orderNo(1);

openModal('.new-btn', '.work_reason-edit-modal');
}.bind(self);

/*** 保存 ***/
self.saveDetail = function() {
openLoadingModal();

var url = '/car-maintenance/MtWorkReasons/detail';
var id = this.detail.id();

if (id > 0) {
url = url + '/' + id;
}

$('#work_reasonEditForm').attr('action', url);

webapi.sendForm('#work_reasonEditForm')
.done(function( res ) { // 成功

if (res.success) {
openDialog('.dialog', "データを保存しました。", 'success');
} else {
openDialog('.dialog', "データ保存に失敗しました。\n" + res.error.message, 'warn');
}

self.updateList();

}).fail(function( jqXHR, textStatus, errorThrown ) { // 失敗
console.log( 'ERROR', jqXHR, textStatus, errorThrown );

closeLoadingModal();

openDialog('.dialog', "データ保存に失敗しました。\n" + jqXHR.responseJSON.error.message, 'warn');
});

this.updateList();
};

self.updateList();
};

ko.applyBindings(new work_reasonModel());

$('#work_reasonEditForm').on('submit', function() {
$('#work_reasonSaveButton').trigger('click');
return false;
});
});

[m.ts10806]

ちゃんと読んでませんが、関連するところだけで良いとは思います。要は送信ボタンが押された関連のところだけ

[kuuhaku4262]

時間がある時に、修正します。