Coast Line
asked on
Opening the Page without refresh using Coldfusion+Ajax
I am working on detail, when i click the view and i want that it should open in the same page without refresh, but it is not working: my code is below.
can someone guide me in proper way
can someone guide me in proper way
<cfoutput query="details">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
<td width="34%">#title#</a></td>
<td width="33%">#DateFormat(postedon,'dddd, mmmm dd, yyyy')#</td>
<td width="33%">#category#</td>
<td><a href="##" onClick="#AjaxLink('news.cfm?view=#newsID#')#">View</a>
</td></tr>
</cfoutput>
<tr><td colspan="4" align="center"><cfoutput>#pagination.getRenderedHTML()#</cfoutput></td></tr>
<cfelse>
<tr><td colspan="4"> </td></tr>
<tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
<tr><td colspan="4"> </td></tr>
</cfif>
</table>
<cflayout type="border">
<cflayoutarea position="top">
<cfif isDefined('url.view')>
<cfinvoke component="#request.cfcpath#.tools" method="getNews" newsID="#trim(url.view)#" returnvariable="details"/>
<cfoutput query="details">
<table width="100%" border="0" cellspacing="2" cellpadding="1">
<caption><img src="images/reply.gif"> Read</caption>
<tr>
<td width="48%">#title#</td>
<td width="52%">#DateFormat(postedon,'dddd, mmmm dd, yyyy')#</td>
</tr>
<tr>
<td colspan="2"><strong>#category#</strong></td>
</tr>
<tr>
<td colspan="2">#news#</td>
</tr>
<cfif image_link IS NOT "">
<tr><td colspan="2" align="center">Attachment: #image_link#</td></tr>
</cfif>
</table>
</cfoutput>
</cfif>
</cflayoutarea>
</cflayout>
ASKER
i changed the code but it does not work
> i want that it should open in the same page without refresh
Do you want an inscreen "pop-up" ? If so, you want to add cfwindow
<cfwindow name="popUp" draggable="true" modal="true" resizable="true" initshow="false" height="500" width="760" center="true" bodyStyle="overflow:hidden "/>
Then your javascript could look like this...
ColdFusion.navigate('thePa ge.cfm,'po pUp');
ColdFusion.Window.show('po pUp');
If you want to replace a portion of your screen, then you need to identify that portion of your screen using either cfdiv or cflayout.
Then when you use Coldfusion.Navigate you will reference that portion of the screen instead.
Do you want an inscreen "pop-up" ? If so, you want to add cfwindow
<cfwindow name="popUp" draggable="true" modal="true" resizable="true" initshow="false" height="500" width="760" center="true" bodyStyle="overflow:hidden
Then your javascript could look like this...
ColdFusion.navigate('thePa
ColdFusion.Window.show('po
If you want to replace a portion of your screen, then you need to identify that portion of your screen using either cfdiv or cflayout.
Then when you use Coldfusion.Navigate you will reference that portion of the screen instead.
ASKER
i want to open in the portion of the layout.
well if us ee my above i have to do in same page as:
well if us ee my above i have to do in same page as:
<cfoutput query="details">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
<td width="34%">#title#</a></td>
<td width="33%">#DateFormat(postedon,'dddd, mmmm dd, yyyy')#</td>
<td width="33%">#category#</td>
<td><a href="" onClick="ColdFusion.navigate('news.cfm?view=#newsID#');">View</a>
</td></tr>
</cfoutput>
<tr><td colspan="4" align="center"><cfoutput>#pagination.getRenderedHTML()#</cfoutput></td></tr>
<cfelse>
<tr><td colspan="4"> </td></tr>
<tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
<tr><td colspan="4"> </td></tr>
</cfif>
</table>
<cflayout type="border">
<cflayoutarea position="top">
<cfif isDefined('url.view')>
<cfinvoke component="#request.cfcpath#.tools" method="getNews" newsID="#trim(url.view)#" returnvariable="details"/>
<cfoutput query="details">
<table width="100%" border="0" cellspacing="2" cellpadding="1">
<caption><img src="images/reply.gif"> Read</caption>
<tr>
<td width="48%">#title#</td>
<td width="52%">#DateFormat(postedon,'dddd, mmmm dd, yyyy')#</td>
</tr>
<tr>
<td colspan="2"><strong>#category#</strong></td>
</tr>
<tr>
<td colspan="2">#news#</td>
</tr>
<cfif image_link IS NOT "">
<tr><td colspan="2" align="center">Attachment: <a href="download.cfm?file=#image_link#" target="_blank">#image_link#</a></td></tr>
</cfif>
</table>
</cfoutput>
</cfif>
</cflayoutarea>
</cflayout>
Your Coldfusion.navigate is missing the container parameter, so it's treated as a normal link.
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=JavaScriptFcns_24.html
See my example..
Note the container 'theArea' matches the name of the cflayoutarea name...
ColdFusion.navigate('thePa ge.cfm,'th eArea');
<cflayoutarea position="top" name="theArea">
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=JavaScriptFcns_24.html
See my example..
Note the container 'theArea' matches the name of the cflayoutarea name...
ColdFusion.navigate('thePa
<cflayoutarea position="top" name="theArea">
ASKER
not working:
check this link:
http://www.xloverseas.com/news.cfm
click onview nad it does not work, i do not why
page relods. my whole page content is here:
check this link:
http://www.xloverseas.com/news.cfm
click onview nad it does not work, i do not why
page relods. my whole page content is here:
<cfif details.recordcount>
<tr><td colspan="4" align="center"><cfoutput>#pagination.getRenderedHTML()#</cfoutput></td></tr>
<tr align="left">
<th>Title</th>
<th>Posted On</th>
<th>Category</th>
<th>News</th>
</tr>
<cfoutput query="details">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
<td width="34%">#title#</a></td>
<td width="33%">#DateFormat(postedon,'dddd, mmmm dd, yyyy')#</td>
<td width="33%">#category#</td>
<td><a href="" onClick="ColdFusion.navigate('news.cfm?view=#newsID#','theArea');">View</a>
</td></tr>
</cfoutput>
<tr><td colspan="4" align="center"><cfoutput>#pagination.getRenderedHTML()#</cfoutput></td></tr>
<cfelse>
<tr><td colspan="4"> </td></tr>
<tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
<tr><td colspan="4"> </td></tr>
</cfif>
</table>
<cflayout type="border">
<cflayoutarea position="top" name="theArea">
<cfif isDefined('url.view')>
<cfinvoke component="#request.cfcpath#.tools" method="getNews" newsID="#trim(url.view)#" returnvariable="details"/>
<cfoutput query="details">
<table width="100%" border="0" cellspacing="2" cellpadding="1">
<caption><img src="images/reply.gif"> Read</caption>
<tr>
<td width="48%">#title#</td>
<td width="52%">#DateFormat(postedon,'dddd, mmmm dd, yyyy')#</td>
</tr>
<tr>
<td colspan="2"><strong>#category#</strong></td>
</tr>
<tr>
<td colspan="2">#news#</td>
</tr>
<cfif image_link IS NOT "">
<tr><td colspan="2" align="center">Attachment: <a href="download.cfm?file=#image_link#" target="_blank">#image_link#</a></td></tr>
</cfif>
</table>
</cfoutput>
</cfif>
</cflayoutarea>
</cflayout>
Your page is throwing a javascript error when it's loaded (be sure you have javascript error notification turned on in your browser so you will be aware of errors)
Since you have an error when the page loads the javascript may not work. You need to fix the error first. Try commenting out part of your code to see when the error goes away, that will help you narrow down to the code with the error.
Btw, I thought with cflayout type border that the Center area was required?
You should check the documentation on that ...
Since you have an error when the page loads the javascript may not work. You need to fix the error first. Try commenting out part of your code to see when the error goes away, that will help you narrow down to the code with the error.
Btw, I thought with cflayout type border that the Center area was required?
You should check the documentation on that ...
ASKER
i removed all js errrors and add this <cfimajaximport tags="cflayout-border,cffo rm"> on main page
i ran again on clik of the view link:
i got this error:
_cf_clientid
9942DD88A5701EB0D69E46C58F 13F08B
_cf_containerId
theArea
_cf_nocache
true
_cf_nodebug
true
_cf_rc
0
view
11
[Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status] " nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://www.xloverseas.com/CFIDE/scripts/ajax/package/cfajax.js :: anonymous :: line 116" data: no]
http://www.xloverseas.com/CFIDE/scripts/ajax/package/cfajax.js
Line 103
i ran again on clik of the view link:
i got this error:
_cf_clientid
9942DD88A5701EB0D69E46C58F
_cf_containerId
theArea
_cf_nocache
true
_cf_nodebug
true
_cf_rc
0
view
11
[Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]
http://www.xloverseas.com/CFIDE/scripts/ajax/package/cfajax.js
Line 103
Host
www.xloverseas.com
User-Agent
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.20) Gecko/20081217 Firefox/2.0.0.20
Accept
application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain
;q=0.8,image/png,*/*;q=0.5
Accept-Language
en-us,en;q=0.5
Accept-Encoding
gzip,deflate
Accept-Charset
ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive
300
Connection
keep-alive
Referer
http://www.xloverseas.com/news.cfm
Cookie
CFGLOBALS=urltoken%3DCFID%23%3D5739%26CFTOKEN%23%3D4f7c6a055d3c54fc%2D68329EB2%2D2219%2D22DB%2DAB046AD12B782841
%23lastvisit%3D%7Bts%20%272009%2D04%2D03%2011%3A57%3A38%27%7D%23timecreated%3D%7Bts%20%272009%2D04%2D02
%2013%3A58%3A49%27%7D%23hitcount%3D392%23cftoken%3D4f7c6a055d3c54fc%2D68329EB2%2D2219%2D22DB%2DAB046AD12B782841
%23cfid%3D5739%23; CFTOKEN=4f7c6a055d3c54fc-68329EB2-2219-22DB-AB046AD12B782841; CFID=5739
ASKER
i tried changing the code and did something like this:
but that also did not worked
but that also did not worked
<cfform>
<cfoutput query="details">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
<td width="34%">#title#</a></td>
<td width="33%">#DateFormat(postedon,'dddd, mmmm dd, yyyy')#</td>
<td width="33%">#category#</td>
<td><cfinput type="button" name="view" value="#newsID#">
</td></tr>
</cfoutput>
</cfform>
<tr><td colspan="4" align="center"><cfoutput>#pagination.getRenderedHTML()#</cfoutput></td></tr>
<cfelse>
<tr><td colspan="4"> </td></tr>
<tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
<tr><td colspan="4"> </td></tr>
</cfif>
</table>
<cfdiv bind="url:divsource.cfm?view={view}" ID="theDiv"/>
this *should* work:
<cfoutput query="details">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef' ))#">
<td width="34%">#title#</a></t d>
<td width="33%">#DateFormat(po stedon,'dd dd, mmmm dd, yyyy')#</td>
<td width="33%">#category#</td >
<td><input type="button" name="view#newsID#" value="Read" onclick="ColdFusion.naviga te('divsou rce.cfm?vi ew=#newsID #', 'theDiv')">
</td></tr>
</cfoutput>
Azadi
<cfoutput query="details">
<tr bgcolor="###iif(currentrow
<td width="34%">#title#</a></t
<td width="33%">#DateFormat(po
<td width="33%">#category#</td
<td><input type="button" name="view#newsID#" value="Read" onclick="ColdFusion.naviga
</td></tr>
</cfoutput>
Azadi
this also *should* work:
<cfoutput query="details">
<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef' ))#">
<td width="34%">#title#</a></t d>
<td width="33%">#DateFormat(po stedon,'dd dd, mmmm dd, yyyy')#</td>
<td width="33%">#category#</td >
<td><input type="button" name="view" value="Read" id="#newsID#">
</td></tr>
</cfoutput>
....
<cfdiv id="theDiv" bindonload="false" bind="url:divsource.cfm?vi ew={view.i d@click}"> </cfdiv>
Azadi
<cfoutput query="details">
<tr bgcolor="###iif(currentrow
<td width="34%">#title#</a></t
<td width="33%">#DateFormat(po
<td width="33%">#category#</td
<td><input type="button" name="view" value="Read" id="#newsID#">
</td></tr>
</cfoutput>
....
<cfdiv id="theDiv" bindonload="false" bind="url:divsource.cfm?vi
Azadi
hmmm... definitely NOT working right with multiple buttons with same NAME but different IDs...
back to testing...
Azadi
back to testing...
Azadi
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
myself, why are you using cflayout with type border? I assumed it was because you are setting up several areas (including the requried CENTER area). If you intend to have only one block, then switch to cfdiv as azadi has suggested, his post right before this one what I was saying with cfdiv instead of cflayout.
ASKER
Great
javaScript:ColdFusion.navi