/    Sign up×
Community /Pin to ProfileBookmark

Javascript for changing content issue

Hello, all.

I am using javascript to change the content (innerHTML) of a layer, so as not to reload the page for the same category/sub-category. It works great in FF/NN/Op, but not very well in IE6. It will change the content, fine, but will not display an image if an image is included. In IE, you have to right-click the image placeholder and choose “Show picture”.

WTF??

Here is my JavaScript code:

[code]
<script language=”javascript”>
function changeContent(tid) {
switch(tid) { <cfset thisIteration = 0>
<cfif isDefined(“queryData.itemImage0″)>
<cfloop query=”queryData”>
<cfset internalFiletype = trim(lcase(right(queryData.itemImage0,3)))> //CF variable; internalFileType = extension of file (mov,swf)
case “link_#val(queryData.itemID)#”: // the ID and name of the <A>, also looped in the menu
<cfif trim(internalFiletype) eq “pdf” OR trim(internalFiletype) eq “swf” OR trim(internalFiletype) eq “mov”>
<cfif trim(internalFiletype) eq “pdf”>
<cfset filename = replace(trim(queryData.itemImage0), ” “, “%20”, “all”)>
<cfset “filetype#thisIteration#” = “#right(trim(queryData.itemImage0),3)#”>
thisContent = ‘<OBJECT CLASSID=”clsid:CA8A9780-280D-11CF-A24D-444553540000″ codebase=”http://www.adobe.com/products/acrobat/readstep2.html” height=”99%” width=”99%”><PARAM NAME=”SRC” VALUE=”#request.localhost#_includes/#trim(filename)#” height=”99%” width=”99%”><EMBED SRC=”#request.localhost#_includes/#trim(filename)#” height=”99%” width=”99%”><NOEMBED>Your browser does not support embedded PDF files</NOEMBED></EMBED></OBJECT>’;
</cfif>
<cfif trim(internalFiletype) eq “swf”>
<cfset filename = replace(trim(queryData.itemImage0), ” “, “%20”, “all”)>
<cfset “filetype#thisIteration#” = “#right(trim(queryData.itemImage0),3)#”>
thisContent = ‘<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab##version=6,0,0,0″ width=”99%” height=”99%” id=”#request.localhost#_includes/#trim(filename)#”><PARAM NAME=movie VALUE=”#request.localhost#_includes/#trim(filename)#”><PARAM NAME=quality VALUE=high><PARAM NAME=LOOP VALUE=”true”><PARAM NAME=bgcolor VALUE=##ffffff><EMBED src=”#request.localhost#_includes/#trim(filename)#” quality=high bgcolor=##ffffff WIDTH=”99%” HEIGHT=”99%” NAME=”#request.localhost#_includes/#trim(filename)#” TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”><NOEMBED>Your browser does not support embedded SWF files</NOEMBED></EMBED></OBJECT>’;
</cfif>
<cfif trim(internalFiletype) eq “mov”>
<cfset filename = replace(trim(queryData.itemImage0), ” “, “%20”, “all”)>
<cfset “filetype#thisIteration#” = “#right(trim(queryData.itemImage0),3)#”>
thisContent = ‘<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” codebase=”http://www.apple.com/qtactivex/qtplugin.cab” align=”center” width=”99%” height=”99%”><param name=”src” value=”#request.localhost#_includes/#trim(queryData.itemImage0)#”><param name=”autoplay” value=”false”><param name=”controller” value=”true”><embed src=”#request.localhost#_includes/#trim(queryData.itemImage0)#” align=”center” autohref=”false” autoplay=”false” cache=”true” controller=”true” height=”99%” href=”#request.localhost#_includes/#trim(queryData.itemImage0)#” hspace=”0″ pluginspage=”http://www.apple.com/quicktime/download/” vspace=”0″ width=”99%” QTSRC=”#request.localhost#_includes/#trim(queryData.itemImage0)#”><noembed>Your browser does not support embedded MOV files</noembed></embed></object>’;
</cfif>
<cfelse>
<cfset “filetype#thisIteration#” = “”>
<cfset thisContent = trim(replace(queryData.itemContents,”‘”,”‘”,”all”))>
<cfset thisTitle = trim(replace(queryData.itemTitle,”‘”,”‘”,”all”))>
thisContent = ‘<font style=”font-weight:bold; font-size:14px; color:##CE7019;”>#trim(thisTitle)#</font><div id=”printVersion” style=”text-align:right; position:relative; font-size:9px;”><a href=”#request.localhost#printarticle.cfml?id=#val(queryData.itemID)#” style=”font-size:9px;” target=”pup_#val(queryData.itemID)#” onFocus=”this.blur();”>Print Page</a>&nbsp;&nbsp;&sect;</div><br /><cfif len(trim(queryData.itemImage0))><img src=”images/#trim(queryData.itemImage0)#” name=”itemImage0_#queryData.currentRow#” id=”itemImage0_#queryData.currentRow#” hspace=”6″ vspace=”4″ border=”0″ align=”left” valign=”top” alt=”Image: #trim(queryData.itemImage0)#” /></cfif><font style=”font-size:14px;”>#trim(thisContent)#</font><cfif len(trim(queryData.itemImage1))><img src=”images/#trim(queryData.itemImage1)#” name=”itemImage1_#queryData.currentRow#” id=”itemImage1_#queryData.currentRow#” hspace=”6″ vspace=”4″ border=”0″ align=”right” valign=”bottom” /></cfif>’;
</cfif>
<cfset theseKeywords = theseKeywords & “,#trim(queryData.itemKeywords)#”>
break;
<cfset thisIteration = thisIteration + 1>
<cfif NOT isDefined(“url.id”)><cfset url.id = val(queryData.itemID)></cfif>
</cfloop></cfif>
default:
thisContent = “”;
break;
}
dg = document.getElementById(“tContent”); // the name of the layer which contains the dynamic content
dg.innerHTML = thisContent; dg.scrollTop=0; // change the content and scroll to the top automatically
<cfif isDefined(“queryData.itemID”)><cfloop query=”queryData”>
document.getElementById(“link_#val(queryData.itemID)#”).className = “menu”; // set all menu class to unselected class
document.getElementById(“cell_#val(queryData.itemID)#”).className = “menu”;
</cfloop></cfif>
reg = /link/gi;
document.getElementById(tid.replace(reg,”cell”)).className = “menuSelectedCell”; // set selected menu item to selected class
document.getElementById(tid).className = “menuSelected”; // set selected menu item to selected class
}
</script>
[/code]

Here is my HTML/CF code:

[code]
<div id=”menuTable” style=”width:180px; height:475px; border:0px solid black; overflow:auto;”>
<table width=”163″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″ hspace=”0″ vspace=”0″>
<tr>
<td class=”menuHeader”>#trim(thisTitle)#</td>
</tr><cfset counter = 0><cfset thisMenuLoop = 0>
<cfloop query=”queryData”><cfset thsID = val(queryData.itemParent)>
<cfif val(thsID) gt 0><cfset counter = counter + 1></cfif>
<cfset thisFileType = trim(right(queryData.itemImage0,3))>
<cfif thisFileType eq “mov” OR thisFileType eq “pdf”>
<tr><cfset thisClassCell=”menu”><cfset thisClass=”menu”><cfif val(queryData.itemID) eq val(articleID)><cfset thisClassCell=”menuSelectedCell”><cfset thisClass=”menuSelected”></cfif>
<td id=”cell_#val(queryData.itemID)#” class=”#thisClassCell#”><cfif val(thsID) gt 0>&nbsp;&nbsp;&nbsp;</cfif><a href=”javascript:void(0);” id=”link_#val(queryData.itemID)#” style=”border:0px solid ##999999;” onClick=”openMedia(‘#request.localhost#_includes/#trim(queryData.itemImage0)#’,’item#val(queryData.itemID)#’,’#thisFileType#’);” onFocus=”this.blur();” class=”#thisClass#”>#trim(queryData.itemTitle)#</a> <font style=”color:##000000; font-weight:normal;”>&sect;</font></td>
</tr><cfset thisMenuLoop = thisMenuLoop + 1>
<cfelse>
<tr><cfset thisClassCell=”menu”><cfset thisClass=”menu”><cfif val(queryData.itemID) eq val(articleID)><cfset thisClassCell=”menuSelectedCell”><cfset thisClass=”menuSelected”></cfif>
<td id=”cell_#val(queryData.itemID)#” class=”#thisClassCell#”><cfif val(thsID) gt 0>&nbsp;&nbsp;&nbsp;</cfif><a href=”javascript:void(0);” id=”link_#val(queryData.itemID)#” style=”border:0px solid ##999999;” onClick=”changeContent(this.id);” onFocus=”this.blur();” class=”#thisClass#”>#trim(queryData.itemTitle)#</a></td>
</tr><cfset thisMenuLoop = thisMenuLoop + 1>
</cfif>
</cfloop>
</table>
</div>
[/code]

Any ideas?

Thanks,

^_^

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@felgallFeb 28.2007 — Why not post a link to the page or post the Javascript code the way it ends up in the browser rathher than before the server side processing has run to generate the Javascript. It will then be easier to see what is happening.
Copy linkTweet thisAlerts:
@WolfShadeauthorFeb 28.2007 — Sorry, habit. Here is the JS code, HTML will have to go into next post as this one is too long to post.

JS:
<i>
</i>&lt;script language="javascript" type="text/javascript"&gt;
&lt;!-- hide from non JS browsers

function changeContent(tid) {
var thisItemID = 0;
if (11 == tid) { thisItemID++; }
if (12 == tid) { thisItemID++; }
if (13 == tid) { thisItemID++; }
switch(tid) {
case "link_11":thisContent = '&lt;font style="font-weight:bold; font-size:14px; color:#CE7019;"&gt;Interns&lt;/font&gt;&lt;div id="printVersion" style="text-align:right; position:relative; font-size:9px;"&gt;&lt;a href="http://www.goldininstitute.org/staging_dynamic/printarticle.cfml?id=11" style="font-size:9px;" target="pup_11" onFocus="this.blur();"&gt;Print Page&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;sect;&lt;/div&gt;&lt;br /&gt;&lt;font style="font-size:14px;"&gt;&lt;font style="font-size:14px;"&gt;Please click on each name to read their short biographies.&lt;/font&gt;&lt;/font&gt;';
break;
case "link_94":thisContent = '&lt;font style="font-weight:bold; font-size:14px; color:#CE7019;"&gt;Emily Chou&lt;/font&gt;&lt;div id="printVersion" style="text-align:right; position:relative; font-size:9px;"&gt;&lt;a href="http://www.goldininstitute.org/staging_dynamic/printarticle.cfml?id=94" style="font-size:9px;" target="pup_94" onFocus="this.blur();"&gt;Print Page&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;sect;&lt;/div&gt;&lt;br /&gt;&lt;img src="images/emily.jpg" name="itemImage0_2" id="itemImage0_2" hspace="6" vspace="4" border="0" align="left" valign="top" alt="Image: emily.jpg" /&gt;&lt;font style="font-size:14px;"&gt;&lt;font style="font-size: 14px;"&gt;&lt;font style="font-weight: bold;"&gt;Volunteer, Partner Cities Network&lt;/font&gt;&lt;br&gt;&lt;br&gt;Emily Chou has served as a staff member for each of the Goldin Institute events beginning in 2002.&lt;/font&gt;&lt;/font&gt;';
break;
case "link_100":thisContent = '&lt;font style="font-weight:bold; font-size:14px; color:#CE7019;"&gt;Cecilia Guerrero&lt;/font&gt;&lt;div id="printVersion" style="text-align:right; position:relative; font-size:9px;"&gt;&lt;a href="http://www.goldininstitute.org/staging_dynamic/printarticle.cfml?id=100" style="font-size:9px;" target="pup_100" onFocus="this.blur();"&gt;Print Page&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;sect;&lt;/div&gt;&lt;br /&gt;&lt;img src="images/cecilia.jpg" name="itemImage0_3" id="itemImage0_3" hspace="6" vspace="4" border="0" align="left" valign="top" alt="Image: cecilia.jpg" /&gt;&lt;font style="font-size:14px;"&gt;&lt;font style="font-size: 14px;"&gt;&lt;font style="font-weight: bold;"&gt;Volunteer, Partner Cities Network&lt;/font&gt;&lt;br&gt;&lt;br&gt;Cecilia Guerrero is originally from Ecuador (South America).&lt;/font&gt;&lt;/font&gt;';
break;
default:
thisContent = "";
break;
}
dg = document.getElementById("tContent");
dg.innerHTML = thisContent; dg.scrollTop=0;
document.getElementById("link_11").className = "menu";
document.getElementById("link_94").className = "menu";
document.getElementById("link_100").className = "menu";reg = /link/gi;
document.getElementById(tid.replace(reg,"cell")).className = "menuSelectedCell";
document.getElementById(tid).className = "menuSelected";
var cellName = document.getElementById(tid.replace(reg,"cell")).id;
}
//--&gt; end hiding
&lt;/script&gt;



^_^
Copy linkTweet thisAlerts:
@WolfShadeauthorFeb 28.2007 —  &lt;div id="menuTable" style="width:180px; height:475px; border:0px solid black; overflow:auto;"&gt;&lt;table width="163" border="0" align="left" cellpadding="0" cellspacing="0" hspace="0" vspace="0"&gt;
&lt;tr&gt;
&lt;td class="menuHeader"&gt;Institute Staff&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_11" class="menuSelectedCell"&gt;&lt;a href="javascript:void(0);" id="link_11" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menuSelected"&gt;Interns&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_94" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_94" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Emily Chou&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_100" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_100" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Cecilia Guerrero&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_101" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_101" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Anders Bjornberg&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_102" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_102" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Kasia Paprocki&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_103" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_103" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Jon Lentz&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_12" class="menu"&gt;&lt;a href="javascript:void(0);" id="link_12" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Consultants&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_95" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_95" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Ruth Schmidt&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_96" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_96" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Tracy Nicholas&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_104" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_104" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Jack Drysdale, Jr.&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_13" class="menu"&gt;&lt;a href="javascript:void(0);" id="link_13" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Staff&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_97" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_97" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Peter Finn&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_98" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_98" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Jason Cons&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="cell_99" class="menu"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" id="link_99" style="border:0px solid #999999;" onClick="changeContent(this.id);" onFocus="this.blur();" class="menu"&gt;Travis Rejman&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;
^_^
Copy linkTweet thisAlerts:
@hanjiMar 09.2007 — Hello

I'm running into the same issue. Seems like images are not loading completely. I can reproduce this only on production servers. If I work in the development environment (local) it does not happen.

Any ways to for the images to load? Or reset if they're not loaded? This is killin' me.. and only in IE6.

Thanks!

hanji
×

Success!

Help @WolfShade spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...