Ajaxでcakephpのタグを使い、その中でさらにJSの変数を使いたい

Question

cakephpとAjaxを使って以下のようなコードを書いています。

やりたいことは以下です。
①sampleBtnのボタンを押す
②idをedit_hogeに渡す
③edit_hogeの中でそのidからnameを取得
④特定のdiv要素に、取得してきたnameをvalue値に設定したテキストボックスをappend

③までは以下のコードでできています。
最後appendするところなのですが、cakephpのFormを使いたいので、以下のように記載しているのですが、
value値にjsの変数を代入すると、テキストボックスに「+ hoge_name +」と文字列として表示されています。

jsの中にPHPタグを記載し、その中でjsの変数の値を使いたいのですが、どうように書けば良いでしょうか。
ご教示お願いいたします。

$('.sampleBtn').click(function() {
    var id = $(this).data('id');
    ajax = $.ajax(
        {
            type:"POST",
            url:"/hoge/edit_hoge",
            async:false,
            dataType: "JSON",
            data:
            {
                "id":id
            },
            success:function(res)
            {
                var hoge_name = res.name;
                $('div #hoge-detail').append('<p><?=$this->Form->input('name', ['label' => false, 'value' => + hoge_name + '])?></p>'
                ...
                ...
                ...
                (中略)

わからないのは、以下の箇所の書き方のみです。

$('div #hoge-detail').append('<p><?=$this->Form->input('name', ['label' => false, 'value' => + hoge_name + '])?></p>'

Answer 1

PHPでサーバサイドでレンダーされた後にJavaScriptが実行されるためPHPタグの中でJS変数は呼び出せません。
(PHPが先にレンダーされるのでPHPの変数をJSで呼び出す事は出来ます。)

以下のようにすればいけそうな気がします。

$('div #hoge-detail').append('<p><?=$this->Form->input('name', ['label' => false])?></p>')
$('[name="name"]').val(res.name)

Comments

[Discord]

ありがとうございます！
やりたかったことが実現できました！

Answer 2

$('div #hoge-detail').append('<p><?=$this->Form->input('name', ['label' => false, 'value' => + hoge_name + '])?>

これをインラインのjsで書いているならPHPのショートタグ表示でアペンドするタグの
内容が最初から表示されていると思います。

success時に代入されるhoge_nameをなにやら利用したがっているように見えますが
htmlのロード時に確定してしまう処理なのでajax呼んできても参照されません。

• 最初に実行されるもの
• ajaxでとってこれるもの

が、別だということを理解して下さい

Comments

[Discord]

ご回答ありがとうございます。
おっしゃることはわかったのですが、hoge_nameには値が入っていて、valueに直接値を設定すれば反映されるので、おそらく書き方変えればうまくいくような気がするのです。
シングルクォートの中にシングルクォートあるからダメなのかな、とも思うのですが。。

[yambejp]

考え方が違います。
ajaxでapendする内容（もしくはその素材）をとってくる必要があります。
そのためには「/hoge/edit_hoge」がそういった仕様のapiである必要があります

開発ツールでchromeならelements、firefoxならインスペクターで
appendの中身が初期状態から固定であることを確認してみて下さい