1. #1

    Default DomHelper Templates not working in IE

    DomHelper Templates not working in IE


    Can anyone think of any reasons a DomHelper Template wouldn't compile in IE? It works fine in Firefox, but only the last field compiles in IE. I'm working on getting the code to a public site, but essentially there's a nested layoutpanel in a borderlayout, with a jsonview.

    Sample data:
    Code:
    {"data":[{"id":"3","Name":"Name 2","Description":"Desc Value 2.","Active":"1","CreatedDate":"2007-01-26"},{"id":"4","Name":"Name Value 1","Description":"Desc Value 1","Active":"1","CreatedDate":"2007-01-26"}]}
    JS Snippet:
    Code:
    this.config  = {
    	listItemTemplate: '<div class="INTV-item" rel="{id}"><span class="INTV-title">{Name}</span><span class="INTV-date">(Created on {CreatedDate})</span><span class="INTV-desc">{ShortDesc}</span></div>',
    };
    //....
    
    init : function() {
    	this.listItemTemplate = new YAHOO.ext.DomHelper.Template(this.config.listItemTemplate);
    	this.listItemTemplate.compile();
    			
    	this.listView = new YAHOO.ext.JsonView(this.config.listViewID, this.listItemTemplate, {
    	   jsonRoot: 'data',
    	   singleSelect:true,
    	   selectedClass: 'INTV-selected'
    	});
    	this.listView.prepareData = this.listPrepareData;
    	//...
    },
    
    listPrepareData : function(data) {
    	data.name = data.Name;
    	data.ShortDesc = data.Description.ellipse(100);
    	return data;
    }
    In IE the list is rendered like this:
    Code:
    <DIV class=INTV-item rel="{id}" nodeIndex="0"><SPAN class=INTV-title>{Name}</SPAN><SPAN class=INTV-date>(Created on {CreatedDate})</SPAN><SPAN class=INTV-desc>Desc Value 2.</SPAN></DIV>
    <DIV class=INTV-item rel="{id}" nodeIndex="1"><SPAN class=INTV-title>{Name}</SPAN><SPAN class=INTV-date>(Created on {CreatedDate})</SPAN><SPAN class=INTV-desc>Desc Value 1</SPAN></DIV>
    In Firefox, YAHOO.ext.DomHelper.Template.prototype.applyTemplate ends up with the following values:
    Code:
    this.compiled:
    function (values) { return ["<div class=\"INTV-item\" rel=\"", values.id, "\"><span class=\"INTV-title\">", values.Name, "</span><span class=\"INTV-date\">(Created on ", values.CreatedDate, ")</span><span class=\"INTV-desc\">", values.ShortDesc, "</span></div>"].join(""); } 
    
    this.re: /\{(\w+)\}/g
    Whereas IE has:
    Code:
    this.compiled:
    function (values) { return ['<div class="INTV-item" rel="{id}"><span class="INTV-title">{Name}</span><span class="INTV-date">(Created on {CreatedDate})</span><span class="INTV-desc">', values['ShortDesc'], '</span></div>'].join('');} 
    
    this.re: /\{(\w+)\}/g
    I'm stumped, does anyone have any suggestions as where to look?

  2. #2

    Default


    I did strip out the layouts and didn't have the same issue. With the sample data above in a file called 'data.json' the templates in the following code displayed in IE and Firefox, which just adds to my confusion.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="yui-ext/resources/css/yui-ext.css">
    	<script type="text/javascript" src="yui/utilities/utilities.js"></script>
    	<script type="text/javascript" src="yui-ext/yui-ext-debug.js"></script>
    
    <script type="text/javascript">
    	YAHOO.namespace("sample");
    		
    	String.prototype.ellipse = function(maxLength){
    		if(this.length > maxLength){
    			return this.substr(0, maxLength-3) + '...';
    		}
    		return this;
    	};
    
    YAHOO.sample.onDocumentReady = function() {
    	YAHOO.sample.tpl = new YAHOO.ext.DomHelper.Template('<div class="INTV-item" rel="{id}"><span class="INTV-title">{Name}</span><span class="INTV-date">(Created on {CreatedDate})</span><span class="INTV-desc">{ShortDesc}</span></div>');
    	YAHOO.sample.tpl.compile();
    	YAHOO.sample.prepareData = function(data) {
    		data.ShortDesc = data.Description.ellipse(9);
    		return data;
    	}
    	YAHOO.sample.view = new YAHOO.ext.JsonView('test', YAHOO.sample.tpl, { jsonRoot: 'data' });
    	YAHOO.sample.view.prepareData = YAHOO.sample.prepareData;
    	YAHOO.sample.view.load('data.json');
    }
    YAHOO.ext.EventManager.onDocumentReady(YAHOO.sample.onDocumentReady);
    </script>
    </head>
    <body>
    <div id="test"></div>
    </body>
    
    </html>

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Are you sure you don't have an extra comma in one of your layout config objects? Also, there was a bug fix in the .33 DomHelper for IE after the .33 release. If your yui-ext.js is dated prior to 12/24/06, try re-downloading the .33 zip.

  4. #4

    Default


    Yup, no extra commas and jslint doesn't complain if the various YAHOO objects and external functions exist. I do have the latest 0.33 release too. Everything works, it's just the regexp compilation in IE that seems to not work:
    IE: http://crepitus.com/misc/dt-ie.png versus Firefox: http://crepitus.com/misc/dt-ff.png

    Here's the code I'm using to build the inner layout and add the grids:

    Code:
    function InitiativeObj(parentID, opts) {
    		this.InitiativeObj=true;
    		this.listDM=null;
    		this.listFrame=null;
    		this.listItemTemplate=null;
    		this.listView=null;
    		this.listTB=null;
    		this.previewTB=null;
    		this.prefix = randomStr();
    		this.childCache = [];
    
    		this.childList = null;
    
    		this.templates = {
    			dc: '<div>Description: {Description}</div>' + '<div>Will Sign: {WillSign}</div>' + '<div>Has Signed: {HasSigned}</div>',
    			dmc: '<div>Description: {Description}</div>' + '<div>Contact Type: {ContactType}</div>' + '<div>Approps Request: {AppropsRequest}</div>'
    		};
    
    //listItemTemplate: '<div class="INTV-item" rel="{id}"><span class="INTV-title">{Name}</span><span class="INTV-date">(Created on {CreatedDate})</span><span class="INTV-desc">{ShortDesc}</span></div>',
    		this.config = {
    			listItemTemplate: '<div class="INTV-item" rel="{id}"><span class="INTV-title">{Name}</span><span class="INTV-date">(Created on {CreatedDate})</span><span class="INTV-desc">{ShortDesc}</span></div>',
    			layoutID: 'initCont',
    			listPanelID: 'initGridPanel',
    			listViewID: 'initGrid',
    			listTBID: 'initGridTB',
    			previewID: 'preview',
    			previewTBID: 'preview-tb',
    			previewBodyID: 'preview-body'
    		};
    
    }
    InitiativeObj.prototype = {
    	init : function() {
    		this.listItemTemplate = new YAHOO.ext.DomHelper.Template(this.config.listItemTemplate);
    		this.listItemTemplate.compile();
    
    		// Compile our list view templates
    		for( var t in this.templates ) {
    			this.templates[t] = new YAHOO.ext.DomHelper.Template(this.templates[t]);
    			this.templates[t].compile();
    		}
    
    		// first bind the layout to our new tab
    		this.innerLayout = new YAHOO.ext.BorderLayout(this.config.layoutID, {
    			north: {
    				split:true,
    				initialSize: 140,
    				minSize: 75,
    				titlebar:false
    			},
    			center: {
    				titlebar: true,
    				minSize: 100
    			}
    		});
    
    		// Create a panel to hold innerLayout - we add this to the parent layout
    		this.innerLayoutPanel = new YAHOO.ext.NestedLayoutPanel(this.innerLayout, 'Manage Initiatives');
    
    		// Add our nested layout
    		YAHOO.sampdb.SampDB.layout.beginUpdate();
    		this.innerLayout.beginUpdate();
    		YAHOO.sampdb.SampDB.layout.add('center', this.innerLayoutPanel);
    
    		// create the list view and toolbar
    		this.listTB = new YAHOO.ext.Toolbar(this.config.listTBID);
    		this.listTBAdd = new YAHOO.ext.ToolbarButton({text: 'Add Initiative', className: 'intvTbBtnAddIntv', click: this.addInitiative });
    		this.listTBEdit = new YAHOO.ext.ToolbarButton({text: 'Edit Initiative', className: 'intvTbBtnEditIntv', click: this.editInitiative });
    		this.listTBArchive = new YAHOO.ext.ToolbarButton({text: 'Archive Initiative', className: 'intvTbBtnDeacIntv', click: this.archiveInitiative });
    		this.listTBDelete = new YAHOO.ext.ToolbarButton({text: 'Delete Initiative', className: 'intvTbBtnDelIntv', click: this.deleteInitiative });
    
    
    		this.listTB.addButton(this.listTBAdd);
    		this.listTB.addButton(this.listTBEdit);
    		this.listTB.addButton(this.listTBArchive);
    		this.listTB.addButton(this.listTBDelete);
    
    		this.listView = new YAHOO.ext.JsonView(this.config.listViewID, this.listItemTemplate, {
    		   jsonRoot: 'data',
    		   singleSelect:true,
    		   selectedClass: 'INTV-selected'
    		});
    		this.listView.prepareData = this.listPrepareData;
    		this.listView.on('loadexception', function(view, resp) { alert('error loading list view data');	});
    		this.listView.on('selectionchange', this.listSelChange, this, true);
    		//this.listView.on('load', function(view, jsondata, resp) {	alert('loaded list view data');	});
    		this.loadInitiativeList();
    
    		this.innerLayout.add('north', new YAHOO.ext.ContentPanel(this.config.listPanelID, {
    			title:'Initiative List',
    			toolbar:this.listTB,
    			fitToFrame:true,
    			autoScroll:true,
    			resizeEl:this.config.listViewID
    		}));
    
    		// create the pFniew panel and toolbar
    		this.previewTB = new YAHOO.ext.Toolbar(this.config.previewTBID);
    		this.previewTBView = new YAHOO.ext.ToolbarButton({scope:this, text: 'View in New Tab', className: 'intvTbBtnNewTab', click: this.viewChildInTab});
    		this.previewTBRemove = new YAHOO.ext.ToolbarButton({scope:this, text: 'Remove from Initiative', className: 'intvTbBtnRemoveFromIntv', click: this.removeFromInitiative });
    
    		this.previewTB.addButton(this.previewTBView);
    		this.previewTB.addButton(this.previewTBRemove);
    
    		this.listTBAdd.disable();
    		this.listTBEdit.disable();
    		this.listTBArchive.disable();
    		this.listTBDelete.disable();
    		this.previewTBView.disable();
    		this.previewTBRemove.disable();
    
    		this.preview = new YAHOO.ext.ContentPanel(this.config.previewID, {
    			title: "Preview",
    			fitToFrame:true,
    			autoScroll:true,
    			toolbar: this.previewTB,
    			resizeEl:this.config.previewBodyID
    		});
    		this.innerLayout.add('center', this.preview);
    
    
    		// restore innerLayout state
    		this.innerLayout.restoreState();
    
    		this.innerLayout.endUpdate(true);
    		YAHOO.sampdb.SampDB.layout.endUpdate();
    	},
    
    	loadInitiativeList : function(selID) {
    		var args = {
    		    //url: YAHOO.sampdb.aurl + '?a=ajaxListINTV',
    		    url:'data.json',
    		    text:'Loading Initiatives...'
    		};
    		this.listView.load(args);
    	},
    
    	listSelChange : function(view, selections) {
    		if( selections.length >= 1 ) {
    			this.loadChildren(selections[0].attributes.rel.value);
    		}
    	},
    
    	listPrepareData : function(data) {
    		data.name = data.Name;
    		data.ShortDesc = data.Description.ellipse(100);
    		return data;
    	},
    
    	loadChildren : function(id) {
    		if( this.childList === null ) {
    			var html = '<div class="INTV-item" rel="{id}" rev="{type}"><span class="intvChild">{listHeader} #{id}</span><span class="intvChild-desc">{listBody}</span></div>';
    			var tpl = new YAHOO.ext.DomHelper.Template(html);
    
    			this.childList = new YAHOO.ext.JsonView(this.config.previewBodyID, tpl, {
    			   jsonRoot: 'data',
    			   singleSelect:true,
    			   selectedClass: 'INTV-selected'
    			});
    			this.childList.templates = this.templates;
    			this.childList.prepareData = this.childListPrepareData;
    			this.childList.on('loadexception', function(view, resp) { alert('Error loading initiative children.');	});
    			this.childList.on('dblclick', this.viewChildInTab, this, true);
    			this.childList.on('load', this.childListOnLoad, this, true);
    		}
    
    		this.childList.load({
    		    URL: YAHOO.sampdb.aurl + '?a=ajaxListINTVChildren&id='+id,
    		    text:'Loading Initiatives...'
    		});
    	},
    
    	childListOnLoad : function() {
    		if( this.childList.getCount() ) {
    			this.previewTBView.enable();
    		} else {
    			this.previewTBView.disable();
    		}
    	},
    
    	childListPrepareData : function(data) {
    		data.listHeader = YAHOO.sampdb.SampDB.appItems[data.type].display;
    		if( typeof this.templates[data.type] != 'undefined' ) {
    			data.listBody = this.templates[data.type].applyTemplate(data);
    		} else {
    			data.listBody = 'No display template was found for an ' + data.type + 'object.';
    		}
    		return data;
    	},
    
    	// toolbar button functions
    	viewChildInTab : function() {
    		if( this.childList.getSelectionCount() ) {
    			var sel = this.childList.getSelectedNodes()[0];
    			var id = sel.attributes.rel.value;
    			var type = sel.attributes.rev.value;
    			//console.log('id: ' + id + ', type: ' + type);
    			editObjectTab({
    				id: id,
    				method:'ajaxEdit' + YAHOO.sampdb.SampDB.appItems[type].method
    			});
    		}
    	},
    
    	removeFromInitiative : function() {
    		alert('This function has not been implemented.');
    	},
    
    	addInitiative : function() {
    		alert('This function has not been implemented.');
    	},
    	editInitiative : function() {
    		alert('This function has not been implemented.');
    	},
    	deleteInitiative : function() {
    		alert('This function has not been implemented.');
    	},
    	archiveInitiative : function() {
    		alert('This function has not been implemented.');
    	}
    
    };

  5. #5

    Default Stripped down example

    Stripped down example


    OK, here's a static demo with the nested layouts that demonstrates the problem:
    http://crepitus.com/misc/domhelper/

  6. #6

    Default


    OK, I wish I'd tried this a few hours ago... I switched from yui-ext-debug.js to yui-ext.js, and everything works as expected.

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    There may be a issue with your json being interpreted differently. Try removing the quotes from the property names e.g.

    {id:'1', name:'John'} instead of {'id':'1', 'name':'John'}

  8. #8

    Default


    Nope, there must be something different with the debug version that isn't present in the minified copy. I'll try and reformat the minified version in the morning and see what it is.

Similar Threads

  1. layoutdialog, jsonview, domhelper templates, oh my
    By jbowman in forum Community Discussion
    Replies: 0
    Last Post: 4 Dec 2006, 6:03 PM
  2. Idea: real HTML as templates
    By SteveEisner in forum Community Discussion
    Replies: 8
    Last Post: 13 Nov 2006, 5:14 AM
  3. Compiled Templates not working as expected
    By pcbender in forum Ext 1.x: Bugs
    Replies: 5
    Last Post: 20 Oct 2006, 1:08 PM
  4. Dom Helper Named Parameters in Compiled Templates
    By ojintoad in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 18 Oct 2006, 9:52 AM

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi