Replace classname after ajax call - Jquery ajax

user2805507
February 13, 2020
171 views
0 votes
2 Answers

I am trying to replace classname after ajax has been loaded (updated to table) , when i did a console log on my code for

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
          console.log(x)
 });

it will print this, i am able to access the tag by clicking on it and see that the specific dom is being selected on my web. Everytime after ajax is called, it will refresh the table but not the page.

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody
1: tbody
2: tbody.linked-visual-table
3: tbody
rows: HTMLCollection(27) [tr.viz-tr-header, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr]
align: ""
ch: ""
chOff: ""
vAlign: ""
title: ""
lang: ""
translate: true

i tried this to log xhr and this is what it returns

{url: "/arc/sqlrun/jsonselect_parallel", type: "POST", isLocal: false, global: true, processData: true, …}
url: "/arc/sqlrun/jsonselect_parallel"
type: "POST"
isLocal: false
global: true
processData: true
async: true

when i tried to select a specific index on my html collection and i did console.log(x[3])

it will print , but i when i click on the tag was print out on my console log, it is not highlighting anything on my browser, i believed that all dom was being replace . what i am trying to achieve is

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
          console.log(x)
        //Find td that has string of 'go' and add class green
        //Find td that has string of 'Stop' and add class red 
 });

Ive been trying to tackle this problem for days but i feel i am missing some step. everytime when new data is loaded on table, it will remove classname that was assigned

i have tried queryselector and indexing of array, all have returned Node cannot be found in the current page.

update

i have implemented @manikant gautam solution, it appends to almost all but skip to the one i needed the class to be appended.

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
        //var x = document.querySelectorAll("tbody");
         console.log(x)
         addClasses();
      });

    function addClasses(){
        var x = document.getElementsByTagName("tbody")
         for (var i=0; i<x.length; i++){
              x[i].className += " custom";
         }

in my console log, it seems it is avoiding any custom class to be appended to that specific tag , but why?

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody..custom
1: tbody..custom
2: tbody.linked-visual-table.custom
3: tbody
4: tbody..custom
5: tbody..custom
6: tbody..custom
7: tbody..custom
8: tbody..custom
9: tbody..custom
10: tbody..custom
11: tbody..custom
__proto__: HTMLCollection

only at index 3 has values, all the the indexes on tbody other than 3 which has classname assign has no values at all. does this mean, it automatically create a new div after it is refresh on ajax?

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody..custom
1: tbody..custom
2: tbody.linked-visual-table.custom
3: tbody
rows: HTMLCollection(19)
length: 19
0: tr.viz-tr-header
1: tr
2: tr
3: tr

Answers

Try this.

$( document ).ajaxComplete(function(e, xhr, settings) {
  var x = document.querySelector("tbody");
  let td = x.querySelectorAll('td');
  td.forEach( item => {
    if(item.textContent.includes('go')){ // or can be more specific with `===`
      item.classList.add('green');
    } else if(item.textContent.includes('Stop')) {
      item.classList.add('red');
    }
  });
});

Example

(function() {
    var x = document.querySelector("tbody");
    let td = x.querySelectorAll("td");
    td.forEach(item => {
      if (item.textContent === "go") {
        item.classList.add("green");
      } else if (item.textContent === "Stop") {
        item.classList.add("red");
      }
    });
})();

.green {
        background-color: green;
      }

      .red {
        background-color: red;
      }

    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>go</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Stop</td>
        <td>go</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>go</td>
      </tr>
      <tr>
        <td>Stop</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>

.addClass('Green') you have to applied after matching condition.

  $( document ).ajaxComplete(function(e, xhr, settings) {
    var x = document.getElementsByTagName("tbody");
      console.log(x)
    //Find td that has string of 'go' and add class green
    //Find td that has string of 'Stop' and add class red 
    addClasses();
   });
    function addClasses(){
        var t = document.getElementById("table");
        var trs = t.getElementsByTagName("tr");
        var tds = null;

       for (var i=0; i<trs.length; i++){
            tds = trs[i].getElementsByTagName("td");
                  for (var n=0; n<tds.length;n++) {
               if(tds[n].innerHTML.contains("Go")){
                 $(tds[n]).addClass('Green');
               }
               if(tds[n].innerHTML.contains("Stop")){
                 $(tds[n]).addClass('Red');
               }
          }
        }
    }

Please signup or login to give your own answer.

Click here to cancel reply.

Replace classname after ajax call – Jquery ajax

Answers