Integrate dynamic jquery.qrcode RSS feed with slick slider

Question

Does anyone have any input on how I can get a jquery.qrcode working with a simple slick slider?

I have a slider set up currently as follows to loop through the number of items in my feed defined in another slideshow:

Main Slideshow where the feed header and summary are displayed I have a rel attribute containing the link I want to use for the QR code:

<!--Main Body-->
    <div class="sliderSidebar">
        <cfif isDefined("variables.feedData.maxItems") and variables.feedData.maxItems>
        <cfif variables.feedData.type neq "atom">
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <div class="slide" rel="#variables.feedData.itemArray[i].link.xmlText#">
                    <cfset QR = "rel">  
                    <h3>#variables.feedData.itemArray[i].title.xmlText#</h3>
                    <p>#variables.feedData.itemArray[i].description.xmlText#</p>
                </div>
            </cfloop>
        <cfelse>
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <div class="slide" rel="#variables.feedData.itemArray[i].link.xmlText#">
                    <cfset QR = "rel">  
                    <h3>#variables.feedData.itemArray[i].title.xmlText#</h3>
                    <p>#variables.feedData.itemArray[i].summary.xmlText#</p>
                </div>
            </cfloop>
        </cfif>
        </cfif>

QR code slider that will cycle with the main slider

        <div class="qrSlider">      
        <cfif isDefined("variables.feedData.maxItems") and variables.feedData.maxItems>
            <cfif variables.feedData.type neq "atom">
                <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                    <div id="qrBox" class="qrCode"></div>
                </cfloop>
            <cfelse>
                <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                    <div id="qrBox" class="qrCode"></div>
                </cfloop>
            </cfif>
        </cfif>
    </div>

And my javascript being set up as:

        <cfif isDefined("variables.feedData.maxItems") and variables.feedData.maxItems>
        <cfif variables.feedData.type neq "atom">
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <script>
                    $(document).ready(function(){
                                jQuery('.qrCode').qrcode({
                                text    : "#variables.feedData.itemArray[i].link.xmlText#",
                                width   : "115",
                                height  : "110"
                            }); 
                    });
                </script>
            </cfloop>
        <cfelse>
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <script>
                    $(document).ready(function(){
                        jQuery('.qrCode').qrcode({
                                text    : "#variables.feedData.itemArray[i].link.xmlText#",
                                width   : "115",
                                height  : "110"
                            }); 
                    });
                </script>
            </cfloop>
        </cfif>
    </cfif>

The issue I'm having is that all the QR codes from each RSS feed entry are being placed in one slide and looping to the next slide. When the next slide is reached, the QR code shown is always the first code. Anyone have any ideas on how I can place one QR code successfully into each slide?

Answer 1

First of all, every single one of your QR <div>'s have the same id.

Secondly, your primary issue (related to the first one actually) is this line: jQuery('.qrCode').qrcode({...})

What you're doing is creating the same QRCode for all of the QR <div>'s! In your loop, you should probably specify the unique container by its id instead. For example, assuming you append the index number to each container's id attribute, you could reference each container as follows:

<cfoutput>
<cfloop from="1" to="#variables.feedDAta.maxItems#" index="i">
   $('##qrBox#i#).qrcode({...});
</cfloop>
</cfoutput>

Lastly, your jQuery code is not being output all that efficiently. For example, you don't need $(document).ready() calls for each and every script ... I'd wrap them up in a single call, and do my <cfloop>'s inside there.

Hope that makes sense.