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

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

ただいまの
回答率

90.47%

  • jQuery

    6926questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,996

S.T

score 69

お世話になります!

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に返す。

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


ソースコード

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
    <tr>
       <th class="mdl-data-table__cell--non-numeric">ID</th>
       <th class="mdl-data-table__cell--non-numeric">記事タイトル</th>
       <th class="mdl-data-table__cell--non-numeric">カテゴリ</th>
       <th class="mdl-data-table__cell--non-numeric">登録日</th>
       <th class="mdl-data-table__cell--non-numeric">公開日</th>
       <th class="mdl-data-table__cell--non-numeric">記事を見る</th>
   </tr>
   </thead>
   <tbody>
       @include('admin.column.column_list')
   </tbody>
</table>

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


//検索
$(document).on('change','#findID',function() {
     var id = $("#findID").val();
     $.ajax({
        type : "POST",
        url  : "find.php",
        data : {
            "id":id
        },
        scriptCharset : "UTF-8",
        success : function(data){
            $("tbody").children().remove()
            $("tbody").children().append(data);
        },
        error : function(){
            //
        }
    });
});



解決後ソースコード

function someFunction() {
    
    var table = document.createElement('table');
    table.className = 'mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp';
    
    var thead = document.createElement('thead');
    table.appendChild(thead);
    
    var tr = document.createElement('tr');
    table.appendChild(tr);
    
    var th = document.createElement('th');
    th.className = 'mdl-data-table__cell--non-numeric';
    th.textContent = 'ID';
    table.lastChild.appendChild(th);
    
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    
    return table;
};


$(document).on('change','#findID',function() {
     var id = $("#findID").val();
     $.ajax({
        type : "POST",
        url  : "find.php",
        data : {
            "id":id
        },
        scriptCharset : "UTF-8",
        success : function(data){
            var table = someFunction();
            table.lastChild.innerHTML = column
            componentHandler.upgradeElement(table);
            $("table").remove()
            $("form").append(table);
            
        },
        error : function(){
            //
        }
    });
});


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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • KondoSatoru

    2015/10/12 05:49

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

    キャンセル

  • S.T

    2015/10/13 11:32

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

    キャンセル

回答 2

checkベストアンサー

0

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

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

⒈material.min.jsをローカルに落とし、以下の部分を名前をつけた関数にする。
//before
window.addEventListener("load",function(){...})
//after
function loadFunction(){...}
window.addEventListener("load", loadFunction)

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

$(document).on('change','#findID',function() {
     var id = $("#findID").val();
     $.ajax({
        type : "POST",
        url  : "find.php",
        data : {
            "id":id
        },
        scriptCharset : "UTF-8",
        success : function(data){
            // $("tbody").children().remove()
            // $("tbody").children().append(data);

            someFunction(); // 初期のテーブルのタグ状態を生成する関数を作成してください
            loadFunction();
        },
        error : function(){
            //
        }
    });
});

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/10/14 11:00

    お忙しいところ、色々試していただきましてありがとうございます!!

    ご指摘いただいた内容で、再度色々試してみた結果やっとこの問題を解決することができました!

    解決したコードは、質問内容を編集したので確認いただけますと幸いです!

    どうやら、クラスを設定している状態で「componentHandler.upgradeElement(table);」を実行すると、マテリアルデザイン用にアップグレードされるみたいです。

    本当に助かりました!ありがとうございます。

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/10/14 11:04

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

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る

  • jQuery

    6926questions

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