Opened 13 years ago

Closed 12 years ago

Last modified 12 years ago

#2337 closed defect (fixed)

Bug on image link or href link in a LinkPane’s tab of a TabContainer.

Reported by: guest Owned by: mumme
Priority: high Milestone: 0.9
Component: Dijit Version: 0.4.1
Keywords: LinkPane img Cc:
Blocked By: Blocking:

Description

Version of Dojo and build name if applicable

0.4.1

Browser versions and platforms where the bug occurs

Firefox 1.0, 2.0 on Mac OS Tiger
IE7 on Windows XP

Error messages displayed (if any)

Error on the web page loading a tab image (red cross instead of the required image)

A contact address so we can follow-up with you

sophie.huet@…

Describe the exact situation in which the bug occurs as precisely as possible. Is it reproducible? Did it break in a certain release? Is it still an issue with nightly or subversion head? etc.

Neither an image nor a link can be displayed from a LinkPaneâ?€™s tab of a TabContainer?.
I’m using DOJO in a ZOPE web application. I load the whole DOJO Toolkit as a Product, loaded via the FileSystem? Directory in the ZOPE Management Interface.
Then, to display an icon into a LinkPane? tab of a TabContainer?, I wrote the following code as a page template: (cf the Bug on image link or href link in a LinkPaneâ?€™s tab of a TabContainer? section)
The tab label is well displayed but the tab image isn’t found. The interpreted code of the web page show that the src=”” attribute of <img /> is double quoted… the browser then try to find the <img src=”%22image/path%22”/> and the same problem remains on hyperlink as <a href=”%22ref/path%22”.
Trying debugging it, I found the bug location in the DOJO sources. Since the code call respectively:

TabContainer? => PageContainer? (PageController? defining a widget) -> HtmlWidget? => DomWidget?


I found the code which quote html attributes in the buildFromTemplate() function of DomWidget?.js file, from lines 797 to 815

// FIXME: this is a lot of string munging. Can we make it faster?
for(var i = 0; i < matches.length; i++) {
		var key = matches[i];
		key = key.substring(2, key.length-1);
		//<SH>
		//dojo.debug('key in loop: ' + hash[key]); //undefined
						
var kval = (key.substring(0, 5) == "this.") ? 
	    dojo.lang.getObjPathValue(key.substring(5), this) : hash[key];
		var value;
		//<SH>
		dojo.debug('kval: ' + kval);
		//dojo.debug('value: ' + value);
						
		if((kval)||(dojo.lang.isString(kval))){
			value = new String((dojo.lang.isFunction(kval)) ? kval.call(this, key, 
				this.templateString) : kval);
			// Safer substitution, see heading "Attribute values" in  
			// http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.3.2
							
			//<SH>
			//dojo.debug('new value: ' + value);
							
			// FIXME: EC -> Add too much quote.
			// This function seems to be called twice
			while (value.indexOf(""") > -1) {
				value=value.replace(""","&quot;");
			}
			tstr = tstr.replace(matches[i], value);
			//<SH>
			//dojo.debug('final tstr: ' + tstr);
		}
	}


Debugging browser comments (corresponds to one tab of a TabContainer?): DEBUG: fillInTemplate from PageContainer? DEBUG: txt createNodesFromText <div class="dojoLinkPane"></div> DEBUG: kval: Tab 2 <IMG src="dojo/demos/dojoDemos.gif "> DEBUG: kval: display: none DEBUG: txt createNodesFromText <div class='dojoTab' dojoAttachEvent='onClick'><div dojoAttachPoint='innerDiv'><span dojoAttachPoint='titleNode' tabIndex='-1' waiRole='tab'>Tab 2 <IMG src=&quot;dojo/demos/dojoDemos.gif &quot;> </span><span dojoAttachPoint='closeButtonNode' class='close closeImage' style='display: none' dojoAttachEvent='onMouseOver:onCloseButtonMouseOver; onMouseOut:onCloseButtonMouseOut; onClick:onCloseButtonClick'></span></div></div> DEBUG: fillInTemplate

DEBUG: kval: Tab 2 <IMG src="dojo/demos/dojoDemos.gif "> Show that the image pass first into the function as a tab label so that “ are replaced by &quot; <IMG src=&quot;dojo/demos/dojoDemos.gif &quot;> These “&quot;” caracters are the problem so that the tab’s image link can’t work.
It shouldn’t be done like that.
This function seems to be called twice on the same “src” attribute. Is it because the PageController? is calling twice as well?
Note: this bug didn’t exist in previous DOJO release.

Testcases and patches are even better

Test with the following page template:

<meta http-equiv="Context-Type" content="text/html; charset=UTF-8">
<!—
        <!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        from the dojodemoswidget	abContainer.html.pt example
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>TabContainer Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
	var djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="dojo/dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.ContentPane");
</script>

</head>

<body>
	<p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading
	files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already
	part of this page.</p>

	<div id="mainTabContainer" dojoType="TabContainer" style="width: 100%; height: 70%" selectedTab="tab1" >
	
		<div id="tab1" dojoType="ContentPane" label="Tab 1" >
			<h1>First Tab</h1>
			I'm the first tab and my content is local.  
                        <img src="dojo/demos/dojoDemos.gif " />
		</div>
		
		<a dojoType="LinkPane" href="dojo/tests/widget/tab2.html" refreshOnShow="true" style="display: none">
                    Tab 2
                    <img src="dojo/demos/dojoDemos.gif " />
                </a>

	</div>
</body>
</html>

Change History (5)

comment:1 Changed 12 years ago by guest

We temporary resolved the problem into the buildFromTemplate function of DomWidget?.js:

matches = this.templateString.match(/${([}]+)}/g); if(matches) {

if we do property replacement, don't create a templateNode to clone from.

var hash = this.strings
{};

FIXME: should this hash of default replacements be cached in templateString? for(var key in dojo.widget.defaultStrings) {

if(dojo.lang.isUndefined(hash[key])) {

hash[key] = dojo.widget.defaultStrings[key];

}

}

FIXME: this is a lot of string munging. Can we make it faster? for(var i = 0; i < matches.length; i++) {

var key = matches[i]; key = key.substring(2, key.length-1);

var kval = (key.substring(0, 5) == "this.") ? dojo.lang.getObjPathValue(key.substring(5), this) : hash[key]; var value;

if((kval)
(dojo.lang.isString(kval))){

value = new String((dojo.lang.isFunction(kval)) ? kval.call(this, key, this.templateString) : kval); Safer substitution, see heading "Attribute values" in http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.3.2

FIXME: EC -> Add too much quote. take a special care for this.label key witch is normally already html so no extra quoting is needed alert("Coucou " + value +"

key :" + key);

if (key!="this.label")

while (value.indexOf(""") > -1) {

value=value.replace(""","&quot;");

}

tstr = tstr.replace(matches[i], value);

}

}

comment:2 Changed 12 years ago by bill

Milestone: 1.0
Owner: changed from developer to koranteng

comment:3 Changed 12 years ago by bill

Component: WidgetsDijit
Owner: changed from koranteng to mumme

comment:4 Changed 12 years ago by mumme

Resolution: fixed
Status: newclosed

(In [9819]) Make adding html to TabButton? possible again, fix a obvious brainslip in _Templated about unescaped variables, add a test_TabContainer_remote that demo how to use Html in TabButton? that also tests preload, refreshOnShow and creating a new Tab.

I actually wasn't aware that LinkPane? supported this feature innerHTML to title feature, but #2337 opened my eyes. Fixes #2337

comment:5 Changed 12 years ago by mumme

Milestone: 1.00.9
Note: See TracTickets for help on using tickets.