Solved

Opening the Page without refresh using Coldfusion+Ajax

Posted on 2009-04-03
16
1,179 Views
Last Modified: 2013-12-24
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
Comment
Question by:myselfrandhawa
  • 6
  • 4
  • 4
  • +1
16 Comments
 
LVL 12

Expert Comment

by:pigmentarts
Comment Utility
use the Coldfusion navigate script instead

javaScript:ColdFusion.navigate
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
i changed the code but it does not work
0
 
LVL 39

Expert Comment

by:gdemaria
Comment Utility
>  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
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
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
 
LVL 39

Expert Comment

by:gdemaria
Comment Utility
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
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
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
 
LVL 39

Expert Comment

by:gdemaria
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
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
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
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
 
LVL 27

Expert Comment

by:azadisaryev
Comment Utility
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
 
LVL 27

Expert Comment

by:azadisaryev
Comment Utility
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
 
LVL 27

Expert Comment

by:azadisaryev
Comment Utility
hmmm... definitely NOT working right with multiple buttons with same NAME but different IDs...

back to testing...

Azadi
0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 500 total points
Comment Utility
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
 
LVL 39

Expert Comment

by:gdemaria
Comment Utility
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
 
LVL 15

Author Closing Comment

by:myselfrandhawa
Comment Utility
Great
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now