nbubna / html Goto Github PK

Hi.

I will try explain my problem, but please, forgive my terrible english.

First case

• I have a table with 1 example line
• When I click in some button I remove this line and then add a new one with the form data
• After add a couple of lines I click in save button, send a POST and persist this data in the database
• Everything works great

Second case (error)

• Now I have some data in database, so I create the table without the example line and list all data from database in that table
• When I click in the button for add a new data from the from the textContent not works: all the td is blank (but the input hidden in each td works great)

What I test?

I put some console.log/debug in my code and I notice when I get the tablet element, I get undefined instead of HTML object lib.

My code

HTML

    <!-- LINK TO ADD NEW ITEMS FROM FORM -->
    <div class="field">
      <a href="#" class="ui green button add-dynamic-table" data-table="#customer-team-table" data-field-form="customer_team" data-field-name="customerteam" data-message="#team-message">{!! trans('messages.btn.add') !!}</a>
    </div>

    <!-- THE TABLE -->
    <table class='ui table' id="customer-team-table">
      <thead>
        <tr>
          <th>{!! trans('messages.field.id') !!}</th>
          <th>{!! trans('messages.field.position_id') !!}</th>
          <th>{!! trans('messages.field.name') !!}</th>
          <th>{!! trans('messages.field.work_phone') !!}</th>
          <th>{!! trans('messages.field.mobile_phone') !!}</th>
          <th>{!! trans('messages.field.email') !!}</th>
          <th class='actions'>{!! trans('messages.field.actions') !!}</th>
        </tr>
      </thead>

      <tbody>
        @if (!empty($customer) and ($customer->customerTeam->count() > 0))
          @foreach ($customer->customerTeam as $team)
            <tr>
              <td>{!! $team->id !!}</td>
              <td>{!! $team->position->name !!}</td>
              <td>{!! $team->name !!}</td>
              <td>{!! $team->work_phone !!}</td>
              <td>{!! $team->mobile_phone !!}</td>
              <td>{!! $team->email !!}</td>
              <td class='actions'>
                <a class="ui icon mini button red destroy-modal" data-destroy-route='{!! URL::route("customerteams.destroy", $team->id) !!}'>
                  <i class="trash icon"></i>
                </a>
              </td>
            </tr>
          @endforeach
        @else
          <tr>
            <td colspan="7">{!! trans('messages.text.empty_table') !!}</td>
          </tr>
        @endif
      </tbody>
    </table>

Javascript

    $('.add-dynamic-table').click(function(event) {
      event.preventDefault();

      var name = undefined;
      var input_form = $(this).data('field-form');
      var input_name = $(this).data('field-name');
      var fields = HTML.query('.fields [name^="' + input_form + '"]');
      var table = HTML.query($(this).data('table'));

      // remove the example line when table is empty
      if ($($(this).data('table') + ' tbody tr td[colspan="7"]').length == 1) {
        $($(this).data('table') + ' tbody tr').remove();
      }

      // create a new TR
      var tr = table.query('tbody').add('tr');

      // create a new  TD inside this TR with just a "-" (not work)
      tr.add('td').textContent = '-';
      var id = $($(this).data('table')).find('tbody tr').length + 1;

      fields.each(function(field) {
        var $name = field.each('name').toString();
        $name = $name.match(/\[(.*?)\]/)[1];

        // create a new TD inside this TR
        var td = tr.add('td');

        // set the textContent based on tagName (not work)
        if ($(field).prop('tagName') == 'SELECT') {
          td.textContent = $(field).find('option:selected').text();
        } else if ($(field).prop('tagName') == 'INPUT') {
          td.textContent = field.each('value');
        }

        // add an input hidden inside this TD (works)
        var input = td.add('input[type="hidden"]');
        input.each('name', input_name + '[' + id + ']' + '[' + $name + ']');
        input.each('value', field.each('value'));
      });

      // add TD in this TR with a trash link button 
      var td = tr.add('td.actions');
      var a = td.add('a.ui.icon.mini.button.red.destroy-modal');
      a.add('i.icon.trash');
    });

If you need more informations, tell me please.

Hi, it would be very nice to see any good update of this awesome work :D . Will this has any update? Or will this project dead :( ?

I'm trying to add a select with some options inside a td but I get the follow error:

Uncaught TypeError: Failed to execute 'add' on 'HTMLSelectElement': The provided value is not of type '(HTMLOptionElement or HTMLOptGroupElement)'

This is a piece of my code:

extraTd = tr.add('td');
var element = extraTd.add('select.ui.selection.dropdown.');
element.each('name', input_name + '[' + id + '][reference]');
element.add('option[value=0]').textContent = 'Não';
element.add('option[value=1]').textContent = 'Sim';

If you need more information tell me.

Is it possible to add text node using HTML.js?

HTML.body.add(document.createTextNode('foo'))
HTML.js:207 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in undefined

Im learning DOM from the code, I dont understand why you offer the first element instead of traverse it.
eg: I have two ul elements.

<ul><li>1</li><li>2</li></ul>
<ul><li>3</li><li>4</li></ul>

now HTML.body.ul.li only get the first ul's li, its very odd. and the second ul dont inherit any methods, i must use HTML.ify to initial it by manully.

How about write like this:

if (force || !list.each) {
     if (!list.slice){ list = _.slice.call(list); }
        _.methods(list);
        for (var i = 0, len = list.length; i < len; i++) {
            _.node(list[i], force);
       }
}

Was wondering if this was easy to implement?

Adding html.js to package dependencies and inside of the Node-webkit browser calling HTML = require('html.js').HTML or something along those lines.

Can't seem to get it to work.

Thanks for your help! This library really kicks butt.

P.S. I never thought I would have a use for HTML.js server side or in a node environment.

After npm install html.js I just tried to var HTML = require('html.js') but I got the following error:

/Users/diniscruz/GitHub_REPOS/TM_4_0_QA/node_modules/html.js/dist/HTML.min.js:4
=e,b.addEventListener("DOMContentLoaded",function(){d.node(e,!0)})}(window,doc
                                                                    ^
ReferenceError: window is not defined
  at Object.<anonymous> (/Users/diniscruz/GitHub_REPOS/TM_4_0_QA/node_modules/html.js/dist/HTML.min.js:4:3194)
  at Module._compile (module.js:456:26)
  at Object.Module._extensions..js (module.js:474:10)
  at Module.load (/Users/diniscruz/GitHub_REPOS/TM_4_0_QA/TM_4_0_Design/node_modules/teammentor/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:312:12)
  at Module.require (module.js:364:17)

I saw another issue with this error, but that was related to NW (node-webkit).

It seems that the problem is that the window (and document) objects are not available.

Does this mean that this api cannot be used directly on node?

See: http://people.mozilla.org/~jorendorff/es6-draft.html#sec-15.4.3.23

This means before we go 1.0, we'll have to s/find/query, unless someone has a better name idea. HTML.query() is a wee bit less readable and terse, but it is a much more specific/accurate term, which should prevent further conflicts.

It also means a deprecation round, so there will definitely be a 0.10.x branch.

I'd like this library to be submitted to http://cdnjs.com/

Awesome project.

I've been struggling to get this to work with component though. I thought I'd fixed it when I edited src/component.js to from require('../dist/HTML.all.js') to require('../dist/HTML.js'). But then I started getting errors about HTML not being defined when the second IIFE tries to execute with HTML as an arg.

I'd like to use this with browserify, but there isn't currently a way to require('html.js') in node for browser packaging purposes

By default node looks for index.js, otherwise you can specify a main field that points to the commonjs requireable file

hi, we want to add your lib on https://cdnjs.com, but i noticed some file in dist didn't have min file, like
HTML.alter.js
HTML.emmet.js
HTML.stringify.js

is that means they don't be needed for browser?
thank you very much!
cdnjs/cdnjs#6587

I would like to use the HTML(.js) library to edit an XML string. Is this possible? Is there something analogous to http://api.jquery.com/jQuery.parseXML/ (see also http://stackoverflow.com/questions/11258415/how-to-modify-xml-with-jquery )?

I can not know, how to do like this

$("<div><p>Hello</p></div>")

or like simple html dom

str_get_html

And remove voyeur.js tags.

The demos here are really helpful, but I noticed a few issues:

• they're too fast for me -- I didn't have time to both read the code and see the effect before the code is deleted
• when I get to start writing in my own examples, if I do something wrong -- i.e. a typo or try to call a non-existing method -- there's no visible feedback that I did something wrong (I had to open the console to figure out why nothing was happening)
• I wasn't really sure how to trigger the update when I was done typing, sometimes the page seemed to figure out that I was done on its own and sometimes it didn't. I suggest that either 1) instructions should be added, describing what to do (in another //... comment line would be fine), or 2) a button to force evaluation should be added.

These definitely aren't show-stoppers -- the app still worked great!

why we should HTML.js instead of voyeur.js?

(and... why it's not simply 'html' instead of 'HTML'? i guess 'HTML' is worse to type than 'html'.)

So, those reading the code will see that event() has landed but is not yet exposed in the main documentation on the gh-pages branch nor in a published/tagged release.

I'm hesitating on this, because i'm concerned it might be "bloat". addEventListener and friends are obviously part of the DOM interface HTML exposes, but not all of the DOM is about HTML. (notice i called the library HTML.js, not DOM.js)

After finishing the event.js code, i started to feel that it was suffering under the constraint of being in HTML.js and expanding the scope and weight of HTML.js in the process. It might be better suited for a separate library, where it can be free of HTML's constraints and grow a bit larger (there are other features i envision for it).

Obviously, if i pull it out to a separate library, it can still integrate smoothly with HTML.js, via HTML._.fn.

Any one out there have thoughts on this?

@nbubna Thanks for forking voyeur.js. I'm curious to know whether you have done anything about the Voyeur performance issue.