質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.22%

jQueryのappendが2回繰り返されて表示される

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,737

Kama

score 10

動的にプルダウンを変更したいため、下記のようなPHPとJavaScriptを動かしましたが
先日(具体的な日付は不明)より、なぜか2回表示されてしまうようになりました。

まずPHPで配列から<option>タグを生成
<?php
$array_course = array('Aコース' => 'Aコース', 'Bコース' => 'Bコース', 'Cコース' => 'Cコース');
foreach($array_course as $key => $value){
$coursestr .= '<option value="'.$key.'">'.$value.'</option>';
}
 ?>

下記HTMLを記述しておいて
<select class="course"></select>

下記JavaScriptにてappend
<script type='text/javascript'>
$(function(){
$('select.course').append('<?php echo $coursestr; ?>');
});
</script>

すると

表示が2回重複されて書き出されてしまいます。
実際にはき出されたHTML(DOM)が

<select class="course">
<option value="Aコース">Aコース</option>
<option value="Bコース">Bコース</option>
<option value="Cコース">Cコース</option>
<option value="Aコース">Aコース</option>
<option value="Bコース">Bコース</option>
<option value="Cコース">Cコース</option>
</select>

と表示されてしまいます。
consoleで調べたところVMxxxx.jsというものが見つかり、恐らくこれが二回目に実行されているかと思います。

海外のサイトでも同じような現象について質問・回答を見つけましたが
英語が読めず、具体的な解決策がわからないままでおります。

http://stackoverflow.com/questions/17367560/chrome-development-tool-vm-file-from-javascript

こちら、1度で出力を停める方法はありますでしょうか?
どなたかご教示いただければと思います。

なにとぞ宜しくお願い致します。


〈追記〉参照のためJavaScriptのログを貼り付けました
イメージ説明
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

コンタクトフォームというのはContact Form 7のことですかね?
プレーンなWordPress 4.3.1・テーマTwenty Fifteen
Contact Form 7 4.3をインストール
コンタクトフォームに[select menu-XXX class:course]で空のセレクトタグを作成。
コンタクトフォームを埋め込んだページのテンプレートに示されていたPHPとjavascriptのコードを追記して試してみました。
スクリプトは1度しか呼ばれることはなく、selectタグも恐らく意図されている通りであろう下記出力となりました。
<select name="menu-XXX" class="wpcf7-form-control wpcf7-select course" aria-invalid="false">
  <option value="">---</option>
  <option value="Aコース">Aコース</option>
  <option value="Bコース">Bコース</option>
  <option value="Cコース">Cコース</option>
</select>

特にWordPressの場合は質問者様の環境は既に色々なプラグインやテーマのカスタマイズが行われているものですので、恐らく別のプラグインやスクリプトが原因で2回実行されているのではないかと思います。
まずは、問題を切り分ける所から初められるのが良いかと思います。

1. テーマを公式のプレーンのものに変えてみる -> 今のテーマ内に問題が有る
2. 1つ1つプラグインを停止してみる -> 停止したプラグインの中に原因がある
3. wp_enqueue_script()で読み込んでいるスクリプトを外してみる -> 外したスクリプトに原因

jQuery Mobileを使われているのであれば下記リンクに書かれているような可能性もあるかもしれません。
jQuery Mobileでscriptタグが2回実行されてハマった


原因究明よりとにかくまず解決しておきたいと言うことであれば、あまりよろしくないですがappend()なので追加されてしまっているのですからhtml()で丸っと置き換えてしまえば2回呼びされても1回呼び出した時と同じになるかと思います。
$(function(){
  $('select.course').html('<?php echo $coursestr; ?>');
});


追記: コメント欄にも書いたのですが、Ajaxで読み込まれたファイル内にscriptがあった時 ChromeのdevToolではVMxxxx として表示されるっぽい?ので

本件に関しては、プラグインか。他のスクリプトがAjaxでセレクトタグの中にオプションを追加するスクリプトを含む部分を再度読み込んでいるのかもしれません。

調べ方:
devTool > Networkタブ
XHRを選択して問題の有るページでリロード
リストが表示されるので、リストを選択し > Responsタブとかで、読み込まれたファイル中にセレクトタグの中にオプションを追加するスクリプトを含む部分が読み込まれてないか探してみる
のが良いかもしれません。
キャプチャ

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/29 14:53

    ご教示ありがとうございます。
    申込フォームだったため、取り急ぎ動作するよう.htmlで書き換えたところ
    正常に動作するようになりました。
    本当にありがとうございます。

    ただ今後もjQueryは使う予定なので、もうすこし勉強して解決できればと思います。

    ご指示いただいきましたとおり、themeの変更やプラグインの停止なども検証ましして改めてご報告できればと思います。
    *まだ貼り付けたようなキャプチャ画像のようなかたちでコンソールがでてきているので、何かしら他の原因があるとは思います。

    みなさん、本当にありがとうございました。

    キャンセル

  • 2015/09/29 15:27

    VM scriptってものの知識がないので、この回答は根本的な問題解決にはなってないのでもうしわけないです。
    ページテーマに
    ```
    jQuery.ajax({
    url: '/test.html',
    dataTyle: 'html',
    type: 'get'
    }).done(function(res){
    jQuery('body').append(res);
    });
    ```
    とし、test.htmlには下記scriptを記述しました。
    ```
    <script type='text/javascript'>
    console.log('test.html');
    </script>
    ```
    これでちょっと試してみたところ、Ajaxで読み込んだHTMLにjavascriptがあり、そこでconsole.logするとChromeではVMxxxxと表示されるっぽい???

    であれば、表示されているページのscriptを含んでいる部分ががAjaxで読み込まれてもう一度追加されているのが原因なのかもしれません。
    ChromeのdeveloperツールのNetwork欄を開き XHR を選択して問題のあったページをリロード。リストに表示されるものの中にセレクトタグの中身を変更するscriptが含まれているものがあれば、それが原因になっているのかもしれません。

    キャンセル

0

コードには問題が見当たりませんので他に原因があると思われます。
これだけ見るとJavaScriptが不要に思えますが、PHPで出力するのではダメなのでしょうか。

これだけでは原因を特定できませんのでPHPが出力したHTMLを確認して開示してください。

(9/29 14:42追記)
繰り返すようですが、php で echo するのではダメなのでしょうか。
挙げられている条件だけならば、下記コードで期待通りに動作するはずです。

<select class="course"><?php echo $coursestr; ?></select>

echoした結果は
<option value="Aコース">Aコース</option>
<option value="Bコース">Bコース</option>
<option value="Cコース">Cコース</option>
と表示されます。

であるならば、JavaScript コードは下記のようになりますが、SyntaxError で強制終了される為、これが真実ならば別の処理で2回 option 要素が挿入されている事になります。

$(function(){
// この下の行で「SyntaxError: Unexpected token ILLEGAL」になる
$('select.course').append('<option value="Aコース">Aコース</option>
<option value="Bコース">Bコース</option>
<option value="Cコース">Cコース</option>');
});

挙げられている条件だけならば上のコードから改行を除くだけで期待通りに動作します(jsfiddleで確認済)
Edit fiddle - JSFiddle

<select class="course"></select>

<script>
'use strict';
$(function(){
$('select.course').append('<option value="Aコース">Aコース</option><option value="Bコース">Bコース</option><option value="Cコース">Cコース</option>');
});
</script>

おそらく、実際には書いていない条件が複数あるのでしょう。
まず、問題の切り分けして下さい。
PHPが出力するHTMLを適当な場所に保存して不要な箇所を削除して動作に違いが出るか確認しましょう。
そして、問題が際限される最小限のコードがわかったらどの部分に原因があるかを突き止めます。
それでもわからなければ、最小限のコードをここに貼って質問してみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/29 14:20

    コンソール画面のキャプチャを追加させていただきました。
    何かの手がかりになれればと思います。

    キャンセル

  • 2015/09/29 14:46 編集

    Kamaさん
    親コメントに追記しました。
    挙げられている条件には原因がないと思われます。問題を切り分けして最小限のコードを特定すると良いと思います。
    何となく、他で既にoption要素の挿入処理があって、jQueryで2回目の処理が走っているような気もします。jQueryの該当コードを削除したら期待通りに動作した、なんて落ちがありそうな気がします。

    キャンセル

  • 2015/09/29 15:00

    think49さん
    コメントありがとうございます。
    私の説明が悪かったのですが、wordpressのContact form 7を使っている事に加え、他のプラグインも使用している事も含め、恐らく何かしら衝突が起こっているのかもしれません。

    ひとつずつechoできればと思いますが、コースの種類が変動することと、 Form 7 というブラグインを使っているため、どうにかこうにか外部?からできればと思っていました。

    think49さんからのアドバイスも含め、もう一度確認できればと思います。
    色々とご教示いただきまして本当にありがとうございます。

    キャンセル

0

PHP「foreach」の閉じ( これ → } )がある場所が問題ではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/29 13:42

    申しわけございません、記載ミスです。
    きちんとforeachの閉じタグはありました。
    *申しわけございません。。編集訂正します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる