以下の投稿の続きです。
【jQuery】.html()を使って自要素も含めたHTMLコンテンツの取得方法が知りたい

現在HTML,jQuery(JavaScript),PHP,cakePHP3を使ってアプリケーションを作っています。
仕様としては、**画面の要素をコピーしてそれを『順番を変えて』別画面に表示する。**というものです。

「別画面へ」押下時
↓

以下のコードだとその仕様を実装できるのですが、なぜか現場ではそれが実現できません。
ざっくり処理の流れとしては、
１．outerHTMLを使ってHTML文字列を取得し、
２．それをパラメータとしてPOST送信でコントローラに渡し、
３．最後にsetメソッドで別画面に順番を変えて表示しています。

そこで質問としては、結論から言うと
・なぜ現場ではできないのか知りたい。そのできない原因の可能性を推測でいいので教えていただきたい。
あるいは
・以下のコードで厳しそうなら他のやり方を教えていただきたい。
です。

画像のような動きを実現できているコードは以下です。

hoge.ctp

HTML
1<ul id="hoge">
2    <li class='a'>
3      <div>1番目</div><input type="text" value="1番目">
4      <div>1番目</div><input type="text" value="1番目">
5      <div>1番目</div><input type="text" value="1番目">
6    </li>
7    <li class='b'><div>２番目</div><input type="text" value="２番目"></li>
8    <li class='c'><div>３番目</div><input type="text" value="３番目"></li>
9</ul>
10<a href="javascript:document.frm1.submit()" onclick="hoge()">別画面へ</a>
11  <form name="frm1" method="POST" action="http://localhost/cakephp3/Sample/fuga" target="_blank">
12    <input type="hidden" name="firstHTML" value="">
13    <input type="hidden" name="secondHTML" value="">
14    <input type="hidden" name="thirdHTML" value="">
15  </form>
16
17
18<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
19<script>
20function hoge(){
21
22  var firstHTML = $('.a')[0].outerHTML;
23  var secondHTML = $('.b')[0].outerHTML;
24  var thirdHTML = $('.c')[0].outerHTML;
25
26  $("input[name='firstHTML']").val(firstHTML);
27  $("input[name='secondHTML']").val(secondHTML);
28  $("input[name='thirdHTML']").val(thirdHTML);
29
30}
31</script>
32

SampleController.php

php
1<?php
2namespace App\Controller;
3
4use App\Controller\AppController;
5
6class SampleController extends AppController
7{
8
9  public function hoge()
10  {
11
12  }
13
14  public function fuga()
15  {
16
17    // 現場ではこのように確認したが、HTMLは出力されずテキスト部分のみ出力された。
18    // $this->autoRender = false;
19    // var_dump($this->request->data);
20
21    $this->set('htmlData', $this->request->data);
22
23  }
24}
25
26

fuga.ctp

html
1
2<ul id="hoge">
3<?= $htmlData['firstHTML'] ?>
4<?= $htmlData['thirdHTML'] ?>
5<?= $htmlData['secondHTML'] ?>
6</ul>
7

現場でも同じやり方をしているのですが、なぜかできません。
どのようにできないかというと、別画面にHTML文字列を渡せずに中のテキストノード（ここで言う１番目、２番目、３番目）を渡しており、それが表示されているようなのです。

実際どこでおかしくなっているか検証しました。
javascriptのouterHTMLの段階、val()でinputタグに詰めこんでいる段階では、ちゃんとHTML文字列になっていて、
PHPのdataメソッドで受け取った段階、dataメソッドの中身をvar_dump()で確かめるとテキスト部分だけになっているのです。

このコードと現場のコードで変わっているところと言えば、
現場のコードは、コピー元の要素がやたら多く、HTML文字列がやたら長いということです。

ただPOST送信なので、ある程度のデータ量にも耐えられると思いますし、文字列の多さが原因であったとしてもテキストだけになってしまう理由がわかりません。

もし何かわかる方や推測できる方がいらっしゃいましたらアドバイスいただけると幸いです。

また他のやり方で実現する方法を知っている方がいらっしゃれば教えていただきたいです。

長くなりましたがよろしくお願い致します。

行動規範の内容に同意します

回答3件

原因解決のヒントになれば、というレベルの投稿です・・・。

dataメソッドの中身をprin_r()で確かめる

との事で、実際にどこに出力しているかわかりませんが、
単純に、print_r()、で出力すると、HTMLタグが仮に入っていても、普通にHTMLと解釈されてしまい、タグ部分は表示されていないのではないでしょうか？

var_dumpを使うとか、print_r()出力をhtmlspecialcharsして、前後<pre>タグで囲むとか、

とりあえず、正しいデータの中身をみてみてはいかがでしょうか。

サラッと検証してみました!

ちなみに、ほぼ、アップされているソースと同じですが、単純なPHPのみ使用なので、若干モディファイしてあります。
hoge.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4	<meta charset="UTF-8"/>
5	<meta http-equiv="content-language" content="ja"/>
6	<title>TEST</title>
7	<!-- jquery -->
8	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
9</head>
10<body>
11
12<ul id="hoge">
13    <li class='a'>
14      <div>1番目</div><input type="text" value="1番目">
15      <div>1番目</div><input type="text" value="1番目">
16      <div>1番目</div><input type="text" value="1番目">
17    </li>
18    <li class='b'><div>２番目</div><input type="text" value="２番目"></li>
19    <li class='c'><div>３番目</div><input type="text" value="３番目"></li>
20</ul>
21<a href="javascript:document.frm1.submit()" onclick="hoge()">別画面へ</a>
22  <form name="frm1" method="POST" action="fuga.php" target="_blank">
23    <input type="hidden" name="firstHTML" value="">
24    <input type="hidden" name="secondHTML" value="">
25    <input type="hidden" name="thirdHTML" value="">
26  </form>
27
28
29<script>
30//
31function hoge(){
32	//
33  var firstHTML = $('.a')[0].outerHTML;
34  var secondHTML = $('.b')[0].outerHTML;
35  var thirdHTML = $('.c')[0].outerHTML;
36	//
37  $("input[name='firstHTML']").val(firstHTML);
38  $("input[name='secondHTML']").val(thirdHTML);
39  $("input[name='thirdHTML']").val(secondHTML);
40	//
41}
42
43</script>
44
45</body>
46</html>

fuga.php

php
1<!DOCTYPE HTML>
2<html>
3<head>
4	<meta charset="UTF-8"/>
5	<meta http-equiv="content-language" content="ja"/>
6	<title>FUGA</title>
7	<!-- jquery -->
8	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
9</head>
10<body>
11
12<ul id="hoge">
13<?php
14echo $_POST['firstHTML'];
15echo $_POST['secondHTML'];
16echo $_POST['thirdHTML'];
17 ?>
18</ul>
19
20</body>
21</html>

これで、問題なく動作してますね、、、

投稿2016/04/08 20:07

編集2016/04/08 21:10

ItoTomonori

総合スコア1283

k499778

2016/04/08 20:16

回答ありがとうございます。そうですね。タグ部分は表示されてはいませんが、HTML要素が取れていることは確認できていたのでこのようなやり方をとっていました。現場では、HTML自体出力されなかったので。またdataメソッドの中身をビューに表示するということも致しました。しかし、テキスト部分が表示されるだけで、HTMLが表示されませんでした。現場ではここまで検証しています。ただもう少しわかりやすくするために少し投稿に追記します。アドバイスありがとうございます。

k499778

2016/04/09 05:01

返答ありがとうございます。家に帰ってから試してみてまた回答させていただきます。ご丁寧な対応感謝です。

k499778

2016/04/09 05:09 編集

なるほど。今さらっと見ただけですが、コントローラクラスを使わずに実装しているということでしょうか？確かにコントローラクラスを経由しておかしくなっているので、そのやり方だといける可能性も見えてきます。実際現場ではcakephp3を使っていて、他のctpファイルに遷移するためにはコントローラクラスのアクションを経由しないといけないと思っていたのですが、ctpからctpに直接値を渡すことはできるのでしょうか？お忙しいとは思いますが、お答えいただけたら嬉しいです。

k499778

2016/04/09 05:31

実際に試してみて、動きとしては問題なく、動きました。ただ上記の懸念点が残ります。

ItoTomonori

2016/04/09 05:47

すいません、私、あまりcakeには詳しくなく（というかcake使うとブラックボックスが多くなるため、私は実務では使いませんので・・・）、正直分かりかねるというところです。

k499778

2016/04/09 05:57

そうなんですね。ただ丁寧に対応いただき感謝しています。ありがとうございます。

行動規範の内容に同意します

cake側でstrip_tagsしているとは考えにくいんですけどね・・・
$_POSTをvar_dumpしてみたらどうでしょうか？

投稿2016/04/09 09:00

shi_ue

総合スコア4437

k499778

2016/04/09 16:17 編集

回答ありがとうございます。自分のコードの$htmlData['firstHTML'] や$_POST['firstHTML'];をvar_dump()すると --- string(208) " 1番目 (テキストボックス)1番目 1番目 (テキストボックス)1番目 1番目 (テキストボックス)1番目 --- と表示されます。ただうまくいっていない現場では、 fuga.ctpファイル(仮)の該当箇所をvar_dump()すると文字列だけ、ここで言う --- 1番目 1番目 1番目 --- のような表示のされ方をしていました。

k499778

2016/04/09 17:49

もしおわかりであれば教えていただきたいのですが、このPOST送信でhtmlコンテンツを飛ばすやり方以外にこの仕様を実現できるいい方法はないでしょうか？ある程度の推測や考え方、キーワードだけでもいいのでアドバイスいただけると幸いです。いろいろ聞いてしまい、申し訳ありません。

行動規範の内容に同意します

現場で実際にここにあげているソースをまんま適応してみました。
現場のcakePHP3にここの３つのファイルを作成し、実行すると
うまくいきませんでした。

HTMLコンテンツがテキスト部分に変わるという現象が起きました。

差分といえば、ｎamespaceくらいです。
何かここで現場特有の処理、たとえばurl内にタグがあればタグ落ちさせるといったこと。があるのでしょうか。
現状はわかったんですが、解決策は未だ謎に包まれたままです。

投稿2016/04/11 14:37

k499778

総合スコア599