failed to set the attribute in javascript

46
August 21, 2021, at 00:30 AM

I have a web app, frontend using HTML5, backend using Django.

I the JavaScript part I dynamically create the table header based on user selection in the previous page. But when I tried to set the data-field attribute to load the data dynamically, it could not work. although there's no error in F12 dev tool, the data could not shown in the table (I checked in dev tool, the data-field is there but no data shown in frontend. The first fixed one , course dose shown´╝ë.

      <table id="thisTable"  contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
                   id="bk-table"
                   data-toggle="table"
                   data-toolbar="#toolbar"
                   data-cookie="true"
                   data-cookie-id-table="materialId"
                   data-show-columns="true"
                   data-show-refresh="true"
                   data-show-fullscreen="true"
                   data-show-export="true"
                   data-height="650"
                    {#                   data-sticky-header="true"#}
                    {#                   data-sticky-header-offset-left="7em"#}
                    {#                   data-sticky-header-offset-right="7em"#}
                   data-click-to-select="true"
                   data-id-field="id"
                   data-show-footer="true"
                   data-url="/api/materials/"
                   data-query-params="queryParams"
                   data-remember-order="true"
                   data-pagination="true"
                   data-side-pagination="server"
                   data-total-field="count"
                   data-data-field="results">
                <thead class="thead-dark" >
                <tr contenteditable='true'>
                    <!--th  data-sortable="true" >ID</th-->
                    <th data-field="courseCode" data-sortable="true" data-formatter="renderCourse"></th>
                </tr>
                </thead>
            </table>

   <script>
const eText_iBookStore  = ['Course Code', 'Course Material Title', 'eISBN/VBID', 'iSBN']
              function queryParams(params) {
                    params['limit'] = localStorage['Format'];
                    params['discipline'] = localStorage['discipline'];
                    params['Add_Information'] = localStorage['Add_Information'];
                    if (params['Add_Information'] == "eText_iBookStore")
                    {
                        //document.getElementsByTagName("th")[0].setAttribute("data-field", "id");
                        //document.getElementsByTagName("th")[1].setAttribute("data-field", "courseCode");
        
                        //document.getElementsByTagName("th")[3].setAttribute("data-field", "book.isbn");
                        for (i=0;i<eText_iBookStore.length;i++)
                        {
                            var tr = document.getElementById('thisTable').tHead.children[0],
                                th = document.createElement('th');
                            tr.appendChild(th);
                        }
        
        
                        $( "table thead tr th" ).each(function( index ) {
        
                            $( this ).text(eText_iBookStore[index]);
                            console.log(eText_iBookStore[index]);
                            console.log( index + ": " + $( this ).text() );
                        });
        
                        document.getElementsByTagName("th")[2].setAttribute("data-field", "book.title");
        } }</script>

The data-field attribute dynamically loaded in js does not work like that added in HTML, (the former could not load data )

Answer 1
  • the code is working well and adding the attribute but you are creating unnecessary loop inside the loop of eText_iBookStore so i remove .each loop and added the array element directly
  • because i haven't something like your code inside my localStorage i just set a value to them and created the eText_iBookStore array
function queryParams(params) {
      params['limit'] = "data"
      params['discipline'] = "data"
      params['Add_Information'] = "eText_iBookStore"
      var eText_iBookStore = [1,2,3,4]
      if (params['Add_Information'] == "eText_iBookStore") {
          for (var i = 0;i < eText_iBookStore.length; i++) {
              var tr = document.getElementById('thisTable').tHead.children[0],
              th = document.createElement('th');
              th.innerText = eText_iBookStore[i];
              tr.appendChild(th);
          }
         document.getElementsByTagName("th")[2].setAttribute("data-field", "book.title");
    }
    
}
queryParams({})

READ ALSO
Creating a performant image skeleton with next/image

Creating a performant image skeleton with next/image

I'm trying to implementing a performant skeleton loader for Nextjs's image component

97
Python plotly-dash @app.callback()-function isn&#39;t triggered. What should I do?

Python plotly-dash @app.callback()-function isn't triggered. What should I do?

I am programming a multi-page app with Python dash-plotlyMy app

116