Why does CFWINDOW force parent to top of page?

[ghouser]

I have a page to display a list of inventory items. Some items have a photo available, thus a link is generated to click and show the photo. I'm using CFWINDOW to display the photo. In a long list that scrolls, when the link is clicked, the photo does display. However each time the parent windows go to the top of page. The list can sometimes be quite long and this forces the user to scroll back down to the item to view the photo.

How can I get CFWINDOW to just display and not send the parent back to the top of page?

[ilssac]

What does the link and the code to call the popup window look like?

Are you doing anthing to abort the link event in the browser?  The default behavior of a link is to go to a page or an anchor, if the link does not lead to a new page or an anchor the browsr will assume the top of the page is the default.

If this is what is happening your choices are to make an anchor where the user is at so that that is where the page reforms at, or to abort the link action by returning false from function that calls the window.

[ghouser]

Ian, I hadn't even thought about the default behavior for a link in ages. You're right. Now I suppose I need to concoct some sort of way within my output to create a link for each item and then force a retrun to it. Not sure how to do that yet, but I'm sure there's a way.  Below is the table data code for the cell containing a small camera graphic which the user clicks to call the photo in the CFWINDOW. It works extremely well except this one hitch.... naturally.

<td align="center" valign="middle">
<cfset ProductPic = #LEFT(ITEM,6)# & ".jpg">
  <cfset PhotoLocation = "C:\coldfusion8\wwwroot\mccinternet\images\productpics\">
<cfset PhotoLocation = PhotoLocation & #ProductPic#>

<cfif not FileExists(PhotoLocation)>

   <script language="JavaScript">
   init = function(){
      myWindow = ColdFusion.Window.getWindowObject('#productpic#');
      //Add a listener to the "beforehide" event      
      myWindow.on('beforehide',centerWindow);
   }
   centerWindow = function(myWindow){
      //Center the window      
      myWindow.center();
   }
</script>

<CFELSE>

<a href="##" onClick="javascript:ColdFusion.Window.show('#ProductPic#')"><img src="./images/photo.gif" border="0"></a>

<cfimage action="info" source="#PhotoLocation#" structName="cat">
<cfset wide = #cat.width# + 50>
<cfset tall = #cat.height# + 53>

<cfwindow
        name="#ProductPic#"
        center="true"
        modal="false"
        resizable="true"
        draggable="true"
        height="#tall#"
        width="#wide#"
        bodystyle="background:000000"
        x="300"
        y="300">
       
<div align="center" style="vertical-align:middle"><img src="./images/productpics/#ProductPic#"></div>

</cfwindow>

</CFIF>

</td>

[ilssac · Accepted solution]

ghouser wrote:

<a href="##" onClick="javascript:ColdFusion.Window.show('#ProductPic#')"><img src="./images/photo.gif" border="0"></a>

I'm not 100% sure as I have only used a couple of AJAX features in my projects, but wouldn't adding a ;return false; to the end of your onClick function not abort the click event?

I.E.

<a href="##" onClick="javascript:ColdFusion.Window.show('#ProductPic#'); return false;"><img src="./images/photo.gif" border="0"></a>

[ghouser]

Ian, you're great!  That little addition of the "return false" made all the difference. Thanks a bunch.

[ilssac]

Now in a attemt to get all 20 possibe points for this question!

Even though I beleive aborting the click event is the better solution for your described situation, using anchors would have probably also worked.

In the spirit of competness for cases where anchors would be the better solution here is some pseudo code for the anchor solution.

<a href="###ProductPic#" id="#ProductPic#" onClick="javascript:ColdFusion.Window.show('#ProductPic#');"><img src="./images/photo.gif" border="0"></a>

In this solution, each link is told to jump to the matching anchor ID which just happens to be the same link.

P.S. This assumes that ProductPic is a unique value for all links, i.e. you don't use the same picture for more then one product link.  Otherwise the id values of the links will not be unique and something else should be used for them.

[ghouser]

Yes Ian, ProductPic is unique in every instance. The graphics are named as (item number).jpg. Although I like your first answer better, I'll archive this method for use on another project. Thanks again.