INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Unable to get parents and find working

Unable to get parents and find working

(OP)
I don't understand where you can use parents and find. I have code that use both but in some cases they don't work

What I am trying to do is start from some location inside of a "td" and go up to the parent "tr" and then do a find on class of a label in the same row. It works in other cases fine.

If I have the following:

CODE

<table style="border:1px solid black">
   <thead>
      <tr>
         <td>Name</td>
         <td>Address</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input id="input3" type="text" />
         </td>
         <td>
            <button id="button1" class="row-buttons"/>
            <span>
               <label class="nc-count">5</label>
            </span>
         </td>
      </tr>
      <tr>
         <td>
            <input id="input4" type="text" />
            <input id="input5" type="text" />
            <input id="input6" type="text" />
         </td>
         <td>
            <button id="button2" class="row-buttons" />
            <span>
               <label class="nc-count">5</label>
            </span>
         </td>
      </tr>
   </tbody>
</table>

<button id="button3">Save</button> 

And I use the following script to push a button in the grid and go find an input. I save the jquery that finds that to use later after I come back from a modal window where I am doing a save.

I push a button that is outside of the grid and the jquery wants to update the text in the label from the same row I pushed the button on.

But if I try to use "...parents('tr')", I get an error, even though I am pointing at the 'td' element.

If I try to use parentElement (twice) to get to the "tr", I can't use the find to get to the label element.

Why not?

Here is the script:

CODE

<script type="text/javascript">
   var td;
   var saveLocation;

   $(".row-buttons").click(function () {
      debugger;

      // the following points at the "input2" element.  
      // I then save this location so I can come back to this row from a modal dialog

      saveLocation = $(this)[0].parentElement.parentElement.children[0].children[1];
   });

   $("#button3").click(function () {
      debugger;
      // saveLocation.parentElement.parentElement points at the "tr"
      // I want to go up to the "tr" element then find the label that has "nc-count" in this row

      // Following statements give me an "object doesn't support property..." error (parents and find);

      saveLocation.parents('tr');

      // 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'parents'

      saveLocation.parentElement.parentElement.find('.nc-count');

      //0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'parents'
   });
</script> 

This works fine:

$('#input2').parents('tr').find('.nc-count')[0].innerText

Which is really the same thing.

Thanks,

Tom

RE: Unable to get parents and find working

To get parent on a given object you can use the parentNode property

I tried this example:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Table / Parent</title>
</head>
<body>

  <h1>Table / Parent</h1>

  <table id="mytable" style="border:1px solid black">
   <thead>
      <tr>
         <td>Name</td>
         <td>Address</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input id="input3" type="text" />
         </td>
         <td>
            <button id="button1" class="row-buttons"/>
            <span>
               <label class="nc-count">1</label>
            </span>
         </td>
      </tr>
      <tr>
         <td>
            <input id="input4" type="text" />
            <input id="input5" type="text" />
            <input id="input6" type="text" />
         </td>
         <td>
            <button id="button2" class="row-buttons" />
            <span>
               <label class="nc-count">2</label>
            </span>
         </td>
      </tr>
   </tbody>
  </table>

  <button id="table-button">Save</button> 

  <p id = "mymessage">
     
  </p>
  
  <script type="text/javascript">
    // create object for HTML elements
    var table =  document.querySelector('#mytable');
    var message = document.querySelector('#mymessage');
    
    // create object for row-buttons
    var rowButtons =  table.getElementsByClassName("row-buttons");
    console.log(rowButtons);
    
    for (var rowButton of rowButtons) {
       console.log(rowButton)
       // install callback function on the row buttons
       rowButton.onclick = function(e) {
         var rowButtonId = e.target.id;
         console.log('Pressing Button :"' + rowButtonId + '"')

         // get parent table row
         var tr = this.parentNode.parentNode;
         console.log(tr)

         // create empty result object
         var rowValues = {};          

         // get all inputs
         var inputs = tr.getElementsByTagName("input");
         console.log(inputs);
         for (input of inputs) {
            // add to object attributes
            rowValues[input.id] = input.value;
         }
         
         // get nc-count class
         nc_count = tr.getElementsByClassName("nc-count")[0];
         console.log(nc_count);
         // add to object attributes
         rowValues["nc-count"] = nc_count.innerHTML; 
         // show result
         console.log(rowValues);
         printObject(rowValues); 
       }
    }
    
    // create object Save button
    var tableButton =  document.querySelector('#table-button');    
    console.log(tableButton);
    // install callback function for Save button
    tableButton.onclick = function(e) {
      var tableButtonId = e.target.id;
      console.log('Pressing Button :"' + tableButtonId + '"');

      // get everything from table
      tableValues= {};
      // all input values  
      var inputs = table.getElementsByTagName("input");
      console.log(inputs);
      for (input of inputs) {
         // add to object attributes
         tableValues[input.id] = input.value;
      }
      // all nc-count values
      nc_counts = table.getElementsByClassName("nc-count");
      console.log(nc_counts);
      for (var i=0; i < nc_counts.length; i++) {
         // add to object attributes
         tableValues["nc-count[" + i + "]"] = nc_counts[i].innerHTML;     
      }
      // show result
      console.log(tableValues);
      printObject(tableValues);    
    }    
    
    function printObject (obj) {
       //obj = object, arr = array
       //message.innerHTML = '';
       var arr = [];
       for (attr in obj) {
          arr[arr.length] = attr +': "' + obj[attr] + '"';
       }
       var str = arr.join(", ");
       // print resulting string
       console.log(str);
       message.innerHTML = str;
    }

  </script>

</body>
</html> 

I'm not sure if it works like you expected, but: When I click on the Row Button I get everything from the row. When I click on the global Save button under the table I get everything from table.

For example:
I enter some strings in the 3 input boxes of row 1: ('foo', 'bar', 'baz')
and in the input boxes of row 2: ('spam', 'eggs', 'foobar')
Now when I press the button in the first row I get

CODE

input1: "foo", input2: "bar", input3: "baz", nc-count: "1" 
when I press the button in the second row I get

CODE

input4: "spam", input5: "eggs", input6: "foobar", nc-count: "2" 
and when I press the Save button under the table I get everything

CODE

input1: "foo", input2: "bar", input3: "baz", input4: "spam", input5: "eggs", input6: "foobar", nc-count[0]: "1", nc-count[1]: "2" 

Btw, I don't know, what you want to achieve with the nc-count values.

The results will be written in the document, but to better understand the code look at the temporary information written with console.log() in the console (in FireFox press F12).

RE: Unable to get parents and find working

Quote:

But if I try to use "...parents('tr')", I get an error, even though I am pointing at the 'td' element.


object.parent is singular, the production of 'children' is asexual in HTML smile so elements only have one parent.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Unable to get parents and find working

(OP)
I tried the parentNode as well:

saveLocation.parentNode.parentNode.find('tr')

The first parentNode points at the "td" element/node and the second points at the "tr".

But why doesn't the 'find' work. I should now be able to use the "find" to get the element with the class 'nc-count'. But it says the object does not support the method "find". What objects do???

Thanks,

Tom

RE: Unable to get parents and find working

Quote:

But why doesn't the 'find' work.

.find is a jquery method not a native DOM method, so the answer to "What objects do???" is; ... ... none of them.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Unable to get parents and find working

I don't know jquery, but (in JavaScript) what I posted worked for me, for exanple this
tr.getElementsByClassName("nc-count")[0];

Maybe look here, what could be an equivalent in jquery:
http://stackoverflow.com/questions/15719222/getele...

RE: Unable to get parents and find working

The jQuery find() method works well.
I was curious what is jQuery, so I have tried to transform the example posted before into jQuery:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <title>Table / Parent</title>
</head>
<body>

  <h1>Table / Parent</h1>

  <table id="mytable" style="border:1px solid black">
   <thead>
      <tr>
         <td>Name</td>
         <td>Address</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input id="input3" type="text" />
         </td>
         <td>
            <button id="button1" class="row-buttons"/>
            <span>
               <label class="nc-count">1</label>
            </span>
         </td>
      </tr>
      <tr>
         <td>
            <input id="input4" type="text" />
            <input id="input5" type="text" />
            <input id="input6" type="text" />
         </td>
         <td>
            <button id="button2" class="row-buttons" />
            <span>
               <label class="nc-count">2</label>
            </span>
         </td>
      </tr>
   </tbody>
  </table>

  <button id="table-button">Save</button> 

  <p id = "mymessage">
     
  </p>
  
  <script type="text/javascript">
    /* Using jQuery */
    // create object for HTML elements
    var table =  $(document).find('#mytable');
    var message = $(document).find('#mymessage');
    
    // create object for row-buttons
    var rowButtons = $("table").find('.row-buttons');
    console.log(rowButtons);
    
    $(rowButtons).each(function () {
       rowButton = this;
       console.log(rowButton)
       // install callback function on the row buttons
       $(rowButton).click(function(e) {
         var rowButtonId = e.target.id;
         console.log('Pressing Button :"' + rowButtonId + '"')

         // get parent table row
         var tr =  $(this).parent().parent();
         console.log(tr)

         // create empty result object
         var rowValues = {};         

         // get all inputs
         var inputs = $(tr[0]).find("input");
         console.log(inputs);           
         for (var j = 0; j < inputs.length; j++) {
            input = inputs[j];
            // add to object attributes
            rowValues[input.id] = input.value;
         }
         
         // get nc-count class
         nc_count = $(tr).find(".nc-count")[0];
         console.log(nc_count);
         // add to object attributes
         rowValues["nc-count"] = nc_count.innerHTML; 
         // show result
         console.log(rowValues);
         printObject(rowValues); 
       })
    })   

    // create object Save button
    var tableButton = $(document).find('#table-button')[0]; 
    console.log(tableButton);
    // install callback function for Save button
    $(tableButton).click(function(e) {
      var tableButtonId = e.target.id;
      console.log('Pressing Button :"' + tableButtonId + '"');

      // get everything from table
      tableValues= {};
      // all input values  
      var inputs = $(table).find("input");
      console.log(inputs);
      $(inputs).each(function () {
         // add to object attributes
         tableValues[this.id] = this.value;
      })      
      // all nc-count values
      nc_counts = $(table).find(".nc-count");
      console.log(nc_counts);
      $(nc_counts).each(function (index) {
         // add to object attributes
         tableValues["nc-count[" + index + "]"] = this.innerHTML;     
      })
      // show result
      console.log(tableValues);
      printObject(tableValues);    
    })    
    
    function printObject (obj) {
       //obj = object, arr = array
       //message.innerHTML = '';
       var arr = [];
       for (attr in obj) {
          arr[arr.length] = attr +': "' + obj[attr] + '"';
       }
       var str = arr.join(", ");
       // print resulting string
       console.log(str);
       $(message).html(str);
    }

  </script>

</body>
</html> 

RE: Unable to get parents and find working

There is no requirement to use find in this context...

CODE

var table =  $(document).find('#mytable');
var message = $(document).find('#mymessage'); 

You can just use the selector..

CODE

var table =  $('#mytable');
var message = $('#mymessage'); 

It's the equivalent of GetElementById, but returns a JQuery object not a DOM object.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: Unable to get parents and find working

thanks for advices

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close