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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4045閲覧

google マテリアルデザインについて

S.T

総合スコア93

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/10/06 05:12

編集2015/10/14 02:02

お世話になります!

Googleのマテリアルデザインを使用して、Web制作を行っています。

一部ハマってしまった箇所があり、この度質問させていただきました!

http://www.getmdl.io/components/index.html#tables-section

上記URLを参考にテーブルを作りました。
システムの仕様上、動的に表示データを書き換えなければならないため、列の要素をjqueryで追加したり削除したりしているのですが、
列を丸ごと削除してしまうと、マテリアルデザインが自動で生成したチェックボックスまでもが消えてしまいます。
この消えてしまったチェックボックスを再生性するのにハマッてしまい、色々試しているのですが、消してしまったチェックボックスを正しい状態で再生成する方法がわからず、この度質問させていただきました。

また、下記URLがヒントだと思っているのですが、いまいちうまくいきません。。。

http://www.getmdl.io/started/index.html

下記に問題となっているHTML、JS、PHPのコードを記載します。

動きとしましては、

  1. inputタグでchangeイベント発火
  2. inputタグに入力されたIDをajax通信でPOST
  3. POSTされたIDをDBから検索し、IDに緋もづいている情報をテンプレートに投げる(3番のソースコードは割合しています。)
  4. 出来上がったテンプレート情報をajaxに返す。

以上、よろしくお願いします!

###ソースコード

HTML

1<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 2 <thead> 3 <tr> 4 <th class="mdl-data-table__cell--non-numeric">ID</th> 5 <th class="mdl-data-table__cell--non-numeric">記事タイトル</th> 6 <th class="mdl-data-table__cell--non-numeric">カテゴリ</th> 7 <th class="mdl-data-table__cell--non-numeric">登録日</th> 8 <th class="mdl-data-table__cell--non-numeric">公開日</th> 9 <th class="mdl-data-table__cell--non-numeric">記事を見る</th> 10 </tr> 11 </thead> 12 <tbody> 13 @include('admin.column.column_list') 14 </tbody> 15</table>

PHP

1@foreach ($column as $key => $value) 2<tr> 3 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->id !!}</td> 4 <td class="mdl-data-table__cell--non-numeric " >>{!! $column[$key]->title !!}</a></td> 5 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->category_name !!}</td> 6 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->created_at !!}</td> 7 <td class="mdl-data-table__cell--non-numeric " >{!! $column[$key]->release_date !!}</td> 8 <td class="mdl-data-table__cell--non-numeric " ><span class="webview"><a href="" target="_blank"><i class="material-icons">web</i>見る</a></span></td> 9</tr> 10@endforeach

javascript

1//検索 2$(document).on('change','#findID',function() { 3 var id = $("#findID").val(); 4 $.ajax({ 5 type : "POST", 6 url : "find.php", 7 data : { 8 "id":id 9 }, 10 scriptCharset : "UTF-8", 11 success : function(data){ 12 $("tbody").children().remove() 13 $("tbody").children().append(data); 14 }, 15 error : function(){ 16 // 17 } 18 }); 19}); 20 21 22

###解決後ソースコード

javascript

1function someFunction() { 2 3 var table = document.createElement('table'); 4 table.className = 'mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp'; 5 6 var thead = document.createElement('thead'); 7 table.appendChild(thead); 8 9 var tr = document.createElement('tr'); 10 table.appendChild(tr); 11 12 var th = document.createElement('th'); 13 th.className = 'mdl-data-table__cell--non-numeric'; 14 th.textContent = 'ID'; 15 table.lastChild.appendChild(th); 16 17 var tbody = document.createElement('tbody'); 18 table.appendChild(tbody); 19 20 return table; 21}; 22 23 24$(document).on('change','#findID',function() { 25 var id = $("#findID").val(); 26 $.ajax({ 27 type : "POST", 28 url : "find.php", 29 data : { 30 "id":id 31 }, 32 scriptCharset : "UTF-8", 33 success : function(data){ 34 var table = someFunction(); 35 table.lastChild.innerHTML = column 36 componentHandler.upgradeElement(table); 37 $("table").remove() 38 $("form").append(table); 39 40 }, 41 error : function(){ 42 // 43 } 44 }); 45});

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_S_

2015/10/11 20:49

問題となっているhtmlコードとJavaScriptコードを見せてもらえますか? (必要な部分だけで結構です。)
S.T

2015/10/13 02:32

お世話になります! 問題となっている部分のコードを追加編集いたしましたので、どうぞよろしくお願いいたしますm(__)m
guest

回答2

0

MDLモジュールのコードを流し読みしてみましたが、componentHandler.upgradeDom() で、DOMの再構築を行うようです。
しかし、すでにマテリアルデザイン適用済みのDOMをスキップするようで、このケースですとテーブル自体は適用済みですので効果がないようです。
また、componentHandler.downgradeElements() でデザインを戻すことが出来るようで、コードを見てみると deconstructComponentInternal() が内部で呼ばれ、Material***.prototype.mdlDowngrade_() によってダウングレードされるようです。しかし、すべてのコンポーネントに .mdlDowngrade_() が提供されているわけではなく MaterialDataTable には存在しないようでした。

結論として、MaterialDataTable.prototype.mdlDowngrade_() を自前で書くか、テーブル全体を毎回作り直して componentHandler.upgradeDom() を呼ぶか、のどちらかしかないと思います。

投稿2015/10/14 02:01

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2015/10/14 02:04

あら、解決済みでしたか。
guest

0

ベストアンサー

私のローカルの環境で色々試しましたが、
おっしゃる通りチェックボックスの機能が無効化されてどうしようもなくなりますね。

時間がないので私の環境では試せないのですが、以下の手法を試みてみてはどうでしょうか?

⒈material.min.jsをローカルに落とし、以下の部分を名前をつけた関数にする。

JavaScript

1//before 2window.addEventListener("load",function(){...}) 3//after 4function loadFunction(){...} 5window.addEventListener("load", loadFunction)

2.tableのタグ構成をphpで出力された瞬間と同じ形にしてJavaScriptで生成する。
3.loadFunction()をテーブル更新時に実行する。

JavaScript

1$(document).on('change','#findID',function() { 2 var id = $("#findID").val(); 3 $.ajax({ 4 type : "POST", 5 url : "find.php", 6 data : { 7 "id":id 8 }, 9 scriptCharset : "UTF-8", 10 success : function(data){ 11 // $("tbody").children().remove() 12 // $("tbody").children().append(data); 13 14 someFunction(); // 初期のテーブルのタグ状態を生成する関数を作成してください 15 loadFunction(); 16 }, 17 error : function(){ 18 // 19 } 20 }); 21});

時間があればこちらでも試したいと思います。

投稿2015/10/13 14:33

編集2015/10/13 14:35
K_S_

総合スコア419

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S.T

2015/10/14 02:00

お忙しいところ、色々試していただきましてありがとうございます!! ご指摘いただいた内容で、再度色々試してみた結果やっとこの問題を解決することができました! 解決したコードは、質問内容を編集したので確認いただけますと幸いです! どうやら、クラスを設定している状態で「componentHandler.upgradeElement(table);」を実行すると、マテリアルデザイン用にアップグレードされるみたいです。 本当に助かりました!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問