.textContent not working properly about html HOT 15 OPEN

I can solve this partially doing that:

tr.add('td{someValueHere');

But in my old code I need after that add an input inside this td, because that I need the td variable, otherwise I need to do...

tr.add('td{someValueHere').add('input......');

And that's much complicated in my case.

Backing to the problem:

Why using textContent( ) not work and using td{someValue} work?

from html.

Why do you assume it is textContent that isn't working? Are you sure that the value(s) you are pulling out of the input or select elements are being returned as you expect?

In any case, the textContent property is not created/defined by HTML.js. It's just part of the DOM. So i doubt that is where the problem lies.

Also, if you want better help, i actually need a lot less information, not more. There is so much going on there in your mish-mash of jQuery and HTML.js code. I need a smaller example of the problem that i can run, if i'm going to be able to help. Or, failing that, put your whole example up somewhere public (like jsfiddle) so that i can see it in action, at least.

from html.

What I know is:

When the table is empty, the same code works.
When the table has some rows and I need to add a new one without remove the others, the code not works. It's the same code.

I solve that using the create tag and set value syntax - tag{value}.

Part of the code:

...
 var fields = HTML.query('.fields [name^="' + input_form + '"]');
...
fields.each(function(field) {
...    
  if ($(field).prop('tagName') == 'SELECT') {
    td.textContent = $(field).find('option:selected').text();
  } else if ($(field).prop('tagName') == 'INPUT') {
    td.textContent = field.each('value');
  }    
...
}

I identify what tag is and set the textContent of this new td.

I set a lot console.log in my code, and if I get this $(field).find('option:selected').text(); or field.each('value'); I get the correctly values, not null, empty or undefined.

But when the table has a few rows inside tbody and I do not remove them the problem occurs.

I don't really know how to explain it to you better, mainly because my English is not so good.

But overall this is the problem. I was four hours trying to figure out if it was my mistake, but have not found anything yet. So I decided the way I told you above. For the moment it is working.

I will try to simulate the same problem again, but now I am in doubt whether I continue using HTML.js or if I migrate everything to the 'DOMx`.

What do you advise?

from html.

I'm glad you found a workaround. I still can't figure out the exact problem without having a runnable example. The code, despite its many quirky and inefficient parts, is not making it clear to me what's going wrong.

I would certainly consider switching to DOMx, but i can't say that will fix things, since i haven't identified the problem.

Why do you do field.each('value')? Are there times when field might be a list instead of a single element? It doesn't look that way in your code.

from html.

Hmmmmm... maybe thats the problem. I notice when the textContent not work the td element created by HTML has an array element inside, something like this element[0] or array[0]. I do not remember.

I will try this tonight.

Thanks sir!

from html.

Now I not understand... why field.each('value') return an array?

input value Array[1]
    0: "[email protected]"
    length: 1
    __proto__: Array[0]

from html.

http://nbubna.github.io/HTML/#each(property)

That's the API. It's for getting properties from multiple items at once. If you have a single item and want a single value, you just use the property: field.value

from html.

Still no work, and just in one location and for one table.

Thats my case:

1 - I fill the form

2 - I press the button

3 - My script run and add a new line with blank text in all tds

4 - In the console I can see each value inputed in form correctly, but texContent not work.

editar:596 tr [tr, tr]

editar:603 name ["customer_class_start[program_id]"]
editar:604 value 4
editar:605 text Programa Antes da Pré-escolaPrograma Estruturado de Baixo CustoPrograma Intensivão Meio-AnoPrograma Reforço EscolarPrograma de Alfabetização 2.0
editar:618 tagName SELECT
editar:620 select value Programa Intensivão Meio-Ano

editar:603 name ["customer_class_start[year]"]
editar:604 value 2013
editar:605 text 
editar:618 tagName INPUT
editar:624 input value 2013

editar:603 name ["customer_class_start[start_date]"]
editar:604 value 2013-01-01
editar:605 text 
editar:618 tagName INPUT
editar:624 input value 2013-01-01

editar:603 name ["customer_class_start[school_days]"]
editar:604 value 2012
editar:605 text 
editar:618 tagName INPUT
editar:624 input value 2012

editar:603 name ["customer_class_start[students]"]
editar:604 value 220
editar:605 text 
editar:618 tagName INPUT
editar:624 input value 220

The script still the same, but I change each('value') for just 'value' like you said.

...
 var fields = HTML.query('.fields [name^="' + input_form + '"]');
...
fields.each(function(field) {
...    
  if ($(field).prop('tagName') == 'SELECT') {
    td.textContent = $(field).find('option:selected').text();
  } else if ($(field).prop('tagName') == 'INPUT') {
    td.textContent = field.value;
  }    
...
}

I really don't know where is the problem.

from html.

I convert my code to DOMx but get the following error (I'll post that in DOMx repository too).

Uncaught HierarchyRequestError: Failed to execute 'appendChild'
 on 'Node': Only one element on document allowed.

I get this error when I try to do that:

      var tr = table.query('tbody').append('tr');
      tr.append('td').textContent = '-';

      fields.each(function(field) {
        var td = tr.append('td');             // HERE I GET THE ERROR
      });

from html.

I think I found something.

When I execute in Google Chrome console this code:

var table = document.query('#my-table-id');

I get undefined.

So I wait 2 seconds and execute the same code... and I get the table.

Why that delay?

from html.

I figure out something:

• I get the some table by id
• then I append some tr and return that to a var called tr
• the I create some tdand return the value of append to the var td
• In the final... the table still the same..

So I try to append this new tr to a table: nothing happens.

Maybe the problem was that... how to use your lib manipulating each element separately and then join all together?

Sorry for my incredible english.

from html.

This would be sooo much easier with a working example.

from html.

The first post is a complete working example.

Anyway, I will try solve that.

Thanks for your time sir.

from html.

The markup for the first post is embedded in some unspecified template language. It may be a working example for you. It is not for me. I would like to help you, but i have an incomplete picture of what is happening and limited time to spend combing through a large section of code.

from html.

No problem my friend, I understand your point.

I will try write and functional* example for you tonight.

Thanks anyway.

from html.