EasyCFM.COM ColdFusion Forums / Coding Help! / <cfoutput> within Javascript function

   Reply to Discussion | New Discussion << previous || next >> 
Posted By Discussion Topic: <cfoutput> within Javascript function

book mark this topic Printer-friendly Version  send this discussion to a friend  new posts last

donboe
01-04-2013 @ 2:06 AM
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Senior Member
Posts: 474
Joined: Nov 2004

I use full image slideshow (supersized) in a website I'm working on. Most of the pages have different slideshow. Right now I have created a separate Javascript file for each page with the images hard coded in these files as you can see in the example below:


jQuery(function($){
                    
  $.supersized({
                    
    slide_interval     :       6000,          
    transition          :              1,                
    transition_speed     :     1000,          
                                                                      
    slide_links          :     'false',     
    slides          : [               
                    {image : 'page_photos/home1.jpg'},
                    {image : 'page_photos/home2.jpg'},  
                    {image : 'page_photos/home3.jpg'},
                    {image : 'page_photos/home4.jpg'},
                    {image : 'page_photos/home5.jpg'}
                 ]
                         
     });
});


Instead I would like to get the images from the database using the following function:



  <cffunction name="getBackgrounds" access="public" returntype="query">
          <cfargument name="dsn" type="string" required="true" />
    <cfargument name="page" type="string" required="false" />
    <cfset var getBackground = ""/>
         <cfquery name="getBackground" datasource="#arguments.dsn#">
           SELECT
                            page_id
                       ,     photo
        FROM
                            page_photos
        WHERE
                            page_id = <cfqueryparam cfsqltype="cf_sql_integer" value="#Trim( arguments.page )#" />
      </cfquery>
          <cfreturn getBackground>    
     </cffunction>


Then on each page I use a <cfparam> to identify the page:


<cfparam name="page_id" type="numeric" default="1">


After that I tried to add a <cfoutput query> to the Javascript file so I can use just one file instead off having one separate one for each page as you can see below:



jQuery(function($){
                    
  $.supersized({
                    
    slide_interval     :       6000,          
    transition          :              1,                
    transition_speed     :     1000,          
                                                                      
    slide_links          :     'false',     
    slides          : [               
                            <cfoutput query="getBackground">
                           {image: '#getBackground.photo#'}
                            <cfif getBackground.CurrentRow lt getBackground.RecordCount>,</cfif>
                            </cfoutput>
                ]
                         
     });
});


But I get an error on line 11. I tried something similar before and it was working, but I can't find that example back. Does anyone see what I am doing wrong?

Thank you in advance

“Good artists copy, great artists steal.” (Papblo Picasso)

This message was edited by donboe on 1-4-13 @ 2:28 AM

nmiller
01-04-2013 @ 8:55 AM
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Moderator
Posts: 773
Joined: Apr 2003

You don't mention the error...what does it say?  Can
you include the generated javascript?

Also, another way to populate the array would be like
so:


<scrippt>
var arr = [];
<cfoutput query="getBackground">
var img = {};
img.image = '#getBackground.photo#';
arr.push(img);
</cfoutput>
</script>


Then in the plugin you would specify slides: arr

Nathan Miller
NM Consulting

donboe
01-10-2013 @ 6:41 AM
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Senior Member
Posts: 474
Joined: Nov 2004

Hi Nathan. It is not really giving me an error. Instead the photos don't show.

With
quote:


Then in the plugin you would specify slides: arr



do you mean like this:


jQuery(function($){
                    
  $.supersized({
                    
    slide_interval     :       6000,          
    transition          :              1,                
    transition_speed     :     1000,          
                                                                      
    slide_links          :     'false',    
    slides          : [{arr}]                      
     });
});



Or should it be in a different way? I have not a lot of knowledge of Javascript so I have no idea how to do such thing

Thank you in advance!!

“Good artists copy, great artists steal.” (Papblo Picasso)

nmiller
01-10-2013 @ 7:48 AM
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Moderator
Posts: 773
Joined: Apr 2003

First some definition:

[] means array
{} means object

the argument for the plugin is an array of objects
which would be defined as [{},{},{}]

We already defined that, so it's just:


jQuery(function($){

//code to push items into array goes here

  $.supersized({
                    
    slide_interval     :       6000,          
    transition          :              1,                
    transition_speed     :     1000,          
                                                                      
    slide_links          :     'false',    
    slides          : arr
     });
});

To see the generated script, just view source, or use
Firefox and Firebug to see the error (if it's a JS
error).

Nathan Miller
NM Consulting

This message was edited by nmiller on 1-10-13 @ 7:50 AM


Website Designed and Developed by Pablo Varando.