Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1197
  • Last Modified:

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
<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">&nbsp;</td></tr>
  <tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
  <tr><td colspan="4">&nbsp;</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">&nbsp;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>

Open in new window

0
Gurpreet Singh Randhawa
Asked:
Gurpreet Singh Randhawa
  • 6
  • 4
  • 4
  • +1
1 Solution
 
pigmentartsCommented:
use the Coldfusion navigate script instead

javaScript:ColdFusion.navigate
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i changed the code but it does not work
0
 
gdemariaCommented:
>  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('thePage.cfm,'popUp');
 ColdFusion.Window.show('popUp');


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.



0
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i want to open in the portion of the layout.
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">&nbsp;</td></tr>
  <tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
  <tr><td colspan="4">&nbsp;</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">&nbsp;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>

Open in new window

0
 
gdemariaCommented:
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('thePage.cfm,'theArea');

<cflayoutarea position="top" name="theArea">


0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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:


 <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">&nbsp;</td></tr>
  <tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
  <tr><td colspan="4">&nbsp;</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">&nbsp;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>

Open in new window

0
 
gdemariaCommented:
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 ...
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i removed all js errrors and add this <cfimajaximport tags="cflayout-border,cfform"> on main page
i ran again on clik of the view link:
i got this error:
_cf_clientid 

9942DD88A5701EB0D69E46C58F13F08B

_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




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

Open in new window

0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i tried changing the code and did something like this:



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">&nbsp;</td></tr>
  <tr><td colspan="4" align="center"><img src="images/image.gif" /><br />No News Found?</td></tr>
  <tr><td colspan="4">&nbsp;</td></tr>
  </cfif>
</table>
<cfdiv bind="url:divsource.cfm?view={view}" ID="theDiv"/>

Open in new window

0
 
azadisaryevCommented:
this *should* work:

<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><input type="button" name="view#newsID#" value="Read" onclick="ColdFusion.navigate('divsource.cfm?view=#newsID#', 'theDiv')">
  </td></tr>
 </cfoutput>

Azadi
0
 
azadisaryevCommented:
this also *should* work:

<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><input type="button" name="view" value="Read" id="#newsID#">
  </td></tr>
 </cfoutput>
....
<cfdiv id="theDiv" bindonload="false" bind="url:divsource.cfm?view={view.id@click}"></cfdiv>

Azadi
0
 
azadisaryevCommented:
hmmm... definitely NOT working right with multiple buttons with same NAME but different IDs...

back to testing...

Azadi
0
 
azadisaryevCommented:
well, this one (below), of course, DOES work. but the other one, with binding, does not...

<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><input type="button" name="view#newsID#" value="Read" onclick="ColdFusion.navigate('divsource.cfm?view=#newsID#', 'theDiv')">
  </td></tr>
 </cfoutput>
...
<cfdiv id="theDiv" />

Azadi
0
 
gdemariaCommented:
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.  
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
Great
0

Featured Post

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

  • 6
  • 4
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now