1. #1
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,304
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default DomHelper Template using tables (bug in ff & insert at t

    DomHelper Template using tables (bug in ff & insert at t


    I have 2 issues one seems to be a bug in firefox when using compiled templates and the 2nd is a question of the best way to insert a tr at the top of a table. I am using both the latest copy of yui and yui-ext.

    Issue 1:
    I am using the YAHOO.ext.DomHelper library to add a tr to a table. I have noticed that there is an exception in firefox when using the following code. If I do not compile teh template it works fine.

    Code:
    <script>
    var id = 3;
    function addProfile() {
    	var tplNode = document.getElementById('profile-template');
    	var tpl = new YAHOO.ext.DomHelper.Template(tplNode.innerHTML);
    	tpl.compile();
    	tpl.append('profile-table', {profilename: 'My Profile', id: id});
    	id++
    }
    </script>
    <input type="button" onClick="addProfile();" value="Add a Profile">
    
    <table>
    <tbody id="profile-table">
    	<tr id="profile1"><td>Profile 1</td></tr>
    	<tr id="profile2"><td>Profile 2</td></tr>
    </tbody>
    </table>
    
    <div style="display:none" id="profile-template">
    <tr id="profile{id}">
    	<td>{profilename} {id}</td>
    </tr>
    </div>
    The error is
    Error: unterminated string literal
    Source File: Desktop/test/javascripts/yahoo/yui-ext.js
    Line: 183, Column: 42
    Source Code:
    this.compiled = function(values){ return ['

    Issue 2:
    I noticed that I needed to explicitly define a tbody tag and give it an id to get things to work (instead of giving an id to the table). My question is what is the best way to insert a tr at the top of the table. insertAfter will actually insert it after the tbody tag and of course it doesn't render. append will add it successfully to the end of the table.

  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    remove newlines from your div...the template should be all on one line.

    Jack, can we fix this? :-)

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    My best advice is to wait till Jack releases his new MasterTemplate class wich will enable you to do these kind of things alot easier!

    It will be released in the svn pretty soon i guess.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,304
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default thx for the quick response

    thx for the quick response


    Jarred -

    Thanks for the quick response on the newlines in the template html. This fixes the firefox compilation issue. It also fixes the same issue in the latest version of Opera.

    Aaron


    Does anyone have any ideas on the easiest way to insertRow(0) other than retrieving the top most row id and using 'insertBefore'?

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    The new lines problem with compile is corrected locally, as are single quotes.

    To insert the row, use insertBefore with the tbody's first child.

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,304
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default attempted yet failed

    attempted yet failed


    Code:
    <script>
    var id = 3;
    function addProfile() {
    	var tplNode = document.getElementById('profile-template');
    	var table = document.getElementById('profile-table');
    	var tpl = new YAHOO.ext.DomHelper.Template(tplNode.innerHTML);
    	tpl.compile();
    	if (table.childNodes[0]) {
    		var firstTRID = table.childNodes[0].getAttribute('id');
    		tpl.insertBefore(firstTRID, {profilename: 'My Profile', id: id});
    	} else {
    		tpl.append('profile-table', {profilename: 'My Profile', id: id});
    	}
    	id++;
    }
    </script>
    This my attempt yet failure at doing this.... IE throws an error with an invalid pointer and ff says that getAttribute is not a method.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    First child of the table probably won't be a tr. It could be the tbody, but in your case is likely to be a character node - I guess you have a line end after the "<table>" tag - that's preserved in the DOM.

    A Character Node is not an Element, and so will not have getAttribute.

    Bookmark this: http://www.w3.org/TR/DOM-Level-2-Cor...t-binding.html

    And use Firebug's "HTML" view to familiarize yourself with the structure of your document.

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    table.rows[0]

  9. #9
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,304
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    I tried this and seem to be doing something wrong again...

    Code:
    <script> 
    var id = 3; 
    function addProfile() { 
       var tplNode = document.getElementById('profile-template'); 
       var table = document.getElementById('profile-table'); 
       var tpl = new YAHOO.ext.DomHelper.Template(tplNode.innerHTML); 
       if (table.rows[0]) { 
          var firstTRID = table.rows[0].getAttribute('id'); 
          tpl.insertBefore(firstTRID, {profilename: 'My Profile', id: id}); 
       } else { 
          tpl.append('profile-table', {profilename: 'My Profile', id: id}); 
       } 
       id++; 
    } 
    </script>
    IE gives me an invalid pointer exception when it uses insertBefore and FF & Opera seem to just be putting HTML onto the page and not putting it in an actual TR. Any ideas?

  10. #10
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Code:
    function addProfile() {
       var tplNode = document.getElementById('profile-template');
       var table = document.getElementById('profile-table');
       var tpl = new YAHOO.ext.DomHelper.Template(tplNode.innerHTML);
       if (table.rows[0]) {
          tpl.insertBefore(table.rows[0], {profilename: 'My Profile', id: id});
       } else {
          tpl.append('profile-table', {profilename: 'My Profile', id: id});
       }
       id++;
    }
    The id isn't required. I think your problem is going to be the way you are doing your template. No browser is going allow a <tr> element to be sitting by itself in a div. They either going to wrap it in a table or throw it away, which means your template is going to bomb either way. Instead of a div, try using a textarea with display none and create the template from it's value.

Similar Threads

  1. Ext.DomHelper.Template: one template, ten YUI grids
    By moraes in forum Community Discussion
    Replies: 11
    Last Post: 18 Dec 2012, 4:55 AM
  2. Ext Template to insert DOM nodes rather than strings?
    By SteveEisner in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Mar 2007, 4:47 PM
  3. Ext.DomHelper.Template or Ext.Template?
    By mystix in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 1 Mar 2007, 3:05 PM
  4. Help with DomHelper & Tables
    By tony.summerville in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 12 Jan 2007, 5:58 AM
  5. 0.33 beta 3 DomHelper fails to insert html with IE
    By moedusa in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 8 Nov 2006, 4:58 AM

Thread Participants: 6