Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

matching the value of two different data- attributes

I am trying to match the value or two different data- attributes in jQuery.

I have a table that has rows like so 

<table>
  <tr data-id="001">
    <td>a parent</td>
  </tr>
  <tr data-parent-id="001">
    <td> a child</td>
  </tr>
</table>

I need to find all children and if they have a class say "error" apply the class error to the parent row as well. I'm way over thinking this and as such its not working. 

     // child = $().attr(data-parent-id)
    // parent = $().attr(data-id)

    // find row with data-parent-id

// if data-parent-id has class 
    // error
        // apply matching class to parent
    // warning
        // apply matching class to parent
    // info
        // apply matching class to parent

//else if
    // ok
        // do nothing
Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I think I can help you with this, but I'm a little confused. The tags you put data-id and data-parent-id on do not have a parent-child relationship. They are siblings.

Also, which element(s) are the error classes going to be on? The tr tags or the td tags?

John Weland
John Weland
42,478 Points

The are siblings however its using jquery.treetable.js so even though they are siblings the rows with the parent-id attribute are hidden until the pseudo parent is clicked and then they expand out to be visible. (I didn't build it, I was just asked to make it pretty and add some functionality to it.

The error classes will be on the rows. The most severe class should populate to the pseudo parent. so if there are... say three pseudo children one with info one with warning and one with error, error should populate up to the pseudo parent.

1 Answer

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Here is what I came up with, let me know if this works for you. I made it into a function so that you can call it whenever the error class is added to a child.

function errorClass() {
  // Get all parent elements (elements that contain a data-id attribute)
  var $parents = $('[data-id]');

  // Iterate over all parents
  $parents.each(function() {
    // Get all children of this parent
    var $children = $("[data-parent-id='" + $(this).attr('data-id') + "']");

    // Check if any of the children have the error class
    if ($children.hasClass('error')) {

      // Add the error class to this parent
      $(this).addClass('error');
    }
  });
}
John Weland
John Weland
42,478 Points

works like a charm, thanks

John Weland
John Weland
42,478 Points

Basically this table is getting info from various servers here at work and any process that is having an issue reports here.

The guy that was working it is on vacation for a week and it launches in two week. They just handed me the project and a list of features and said. Go, two weeks, get it done. Now I have to figure out why when it refreshes the data it returns to the top of the screen, when your working 3000 rows down and it does that it sucks.

Its currently using a location.reload, but the data is being populated via ajax it should just over write the data in each row without reloading.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Could you do something like this?

// get the scroll position before the ajax runs
var scrollPosition = $(window).scrollTop();

// do ajax stuff

// when ajax is complete, scroll to the previous position
$(window).scrollTop(scrollPosition);
John Weland
John Weland
42,478 Points

Worked...

The previous coder wrote that on an ajax reload it rebuilds the table. I don't have time before the launch to fix this so its being noted. Version 3 will create a table on first load and then every X seconds it will grab the new info form the DB and compare the two, replace whats been updated, removes whats done and append what is new in comparison.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

That sure would make a lot more sense to do it that way. I would be interested in learning how to do that (compare 2 sets of data and update only what is changed). Not sure if you would be allowed to have outside help but I would love to assist on a small project such as this, just for something to add to the resume. Feel free to contact me at colin.michael.marshall@gmail.com if you are interested. Thanks John!