Hello.

Yuzayu MDL (getmdl.io), in particular, we are working with the table. The goal is to load an AJAX table with the possibility to select each of the positions. The checkboxes in this table are js made by the MDL library. Problem:
With this solution, JS does not process the table, that is, only styles are applied, without checkboxes. There are no problems with the loadable code, if you insert it directly into the original checkbox page, they work. In theory, you need to somehow force javascript to re-process a new piece of code obtained from ajax. How to solve this problem? Thank you in advance

function ShowGoods(distr) { console.log(distr); if (distr.classList.contains('checked')) distr.classList.remove('checked'); else { $.ajax({ url: '/core/interface/goods/showdistr.php', type: 'POST', dataType: 'html', data: { distributor: distr.value, city: 'spb' }, success: function(responce) { $('#add-goods').html(responce); }, error: function() { return 0; } }); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> <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">Material</th> <th>Quantity</th> <th>Unit price</th> </tr> </thead> <tbody id='add-goods'> <!-- рабочий код --> <tr> <td class="mdl-data-table__cell--numeric">1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> <!-- пример подгружаемого кода: <tr> <td class=\"mdl-data-table__cell--numeric\">1</td> <td>2</td> <td>3</td> </tr> -->

  • this is the Чекбоксы в этой таблице делаются js библиотекой MDL should be done after the ajax-result is append to the page. - Jean-Claude
  • how? the table appears after some user action. Moreover, it is expertly established that if the two rows of the table on the page already exist (normal), then the third (with ajax) will already be without a tick ... I know which library is responsible for this. So how to make her "make a tick"? - Vyacheslav Potseluyko
  • @ Jean-Claude I will explain, may be incorrectly formulated. The checkboxes are formed by the framework, for my appearance only the class "mdl-data-table - selectable" is added for their appearance. - Vyacheslav Potseluyko
  • I say, you add this class - js is initialized and forms checkboxes, after loading data with ajax, it does not understand that it is necessary to form daws again - give the command to the js-script to form new checkboxes, that is, to initialize the script again. - Jean-Claude

2 answers 2

Read carefully the section Use MDL on dynamic websites https://getmdl.io/started/index.html and especially on the line componentHandler.upgradeElement(button); - this is exactly what you need to do after a successful ajax request.

 <div id="container"/> <script> var button = document.createElement('button'); var textNode = document.createTextNode('Click Me!'); button.appendChild(textNode); button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect'; componentHandler.upgradeElement(button); document.getElementById('container').appendChild(button); </script>

An example of a script that adds a button and, accordingly, an mdl upgrade according to the instructions

 <!DOCTYPE html> <html> <head> <title>titile</title> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.css"> <style> body { padding: 50px; } button { margin: 0 5px !important; } </style> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $('#add').on('click', function() { $('body').append('<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Button</button>'); componentHandler.upgradeElement($('button').last().get(0)); }); }); </script> </head> <body> <input type="button" value="Добавить галку" id="add"> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Button</button> </body> </html>

  • Thank you so much! The next time I will be more careful to smoke manuals ... - Vyacheslav Potseluyko

Many thanks to the respondents, I’ll clarify after smoking github google: https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes the official solution to this question I’ll clarify: we’ll add the checkboxes and then

 componentHandler.upgradeDom();

Perhaps there are more rational solutions if I find it - I will add