Img Src Or data-imgsrc Coldfusion

Question

What I am trying to do is display an image based on button clicked. So far this is what I have. I also ran across something called. http://rvera.github.io/image-picker/

My problem is I click the first button and the first picture in the database appears but you can not get any of the other pictures to appear. I also used an ORDER BY function to test that the other photos worked and they do. So it seems stuck on the first photo in the database, or first after sorting. enter image description here

 <!DOCTYPE html>
 <html>
<head>
    <cfquery datasource="AccessTest" name="qTest">
        SELECT Account, Image, Image_ID
        FROM PictureDB
    </cfquery>
    <script src="http://code.jquery.com/jquery-2.0.3.js">

    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">');
            });
        });
    </script>
</head>
<body>
    <div id="div1">
        <h2>
            Display Image
        </h2>
    </div>
    <cfloop query="qTest">
        <button> 
         <cfoutput>
                <tr>
                    <td>
                        #qTest.Account#
                    </td>

                </tr>
            </cfoutput>
        </button>
    </cfloop>
</body>

enter image description here

<!DOCTYPE html>
<html>
<head>
    <cfquery datasource="AccessTest" name="qTest">
        SELECT Account, Image, Image_ID
        FROM PictureDB
    </cfquery>
    <script src="http://code.jquery.com/jquery-2.0.3.js">

    </script>
    <script>
        $(document).ready(function(){
            var _img = [];
            <cfoutput query="qTest">
                _img.push({'id': '#qTest.Image_ID#', 'src': '#qTest.Image#'});
            </cfoutput>
            console.log(_img);
        });


                       $("button").on('click', function(){
                var _id = $(this).data('image-id');
                console.log('Image ID: ' + _id + '.');
                // Find the corrosponding object in the _img array.
                var result = $.grep(_img, function(e){ return e.id === _id });
                // If only one is found, then reference the image src from the matching object.
                if (result.length === 1) {
                    console.log(result[0].src);
                    $("#div1").html('<img src="' + result[0].src + '">');
                } else {
                    // If none or more than one are found, show a warning.
                    console.warn('Could not find image ' + _id + '.');
                }
            });
        });
    </script>
</head>
<body>
    <div id="div1">
        <h2>
            Display Image
        </h2>
    </div>
    <cfoutput query="qTest">
        <button id="account_#qTest.Image_ID#" data-image-id="#qTest.Image_ID#">
            #qTest.Account#
        </button>
    </cfoutput>
</body>

score 6 · Accepted Answer · edited May 23 '17 at 11:56

First of all, <button><tr><td>Something</td></tr></button> is not valid markup. You should just output the button tags with maybe a <br> after each one.

Secondly, you're correctly rendering the list of accounts using <cfloop>. However, you're only rendering the 1st record's data into the JavaScript section. So every button that is clicked can only ever show the same larger image.

In order to do what you want, you could dynamically generate a JavaScript array using the query data, then use a data-imageID attribute on the button to map the clicked button to the correct image out of the array. Then you would pull the now client-side record data using your jQuery function and populate div1.

2013-12-24: Let's start from the top.

You have this query:

<cfquery datasource="AccessTest" name="qTest">
    SELECT Account, Image, Image_ID
    FROM PictureDB
</cfquery>

You have a target DIV:

<div id="div1">
<h2>Display Image</h2>
</div>

You dynamically create HTML buttons using CFML:

<cfloop query="qTest">
<button>#qTest.Account#</button>
</cfloop>

Finally, you have this JavaScript in order to assign an action for the click event on each button.

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">');
        });
    });
</script>

I created this JSFiddle to show what the resulting HTML will look like (using images from my site).

Final output:

<script>
$(document).ready(function(){
    $("button").on('click', function(){
        $("#div1").html('<img src="http://iknowkungfoo.com/static/icons/32/linkedin.png">');
    });
});
</script>

<div id="div1">
    <h2>Display Image</h2>
</div>

<button>Linked In</button>
<button>Facebook</button>
<button>Twitter</button>

Every button in the document can only ever have the same image assigned to it.

Dynamically create client-side JavaScript using CFML

The query and target DIV stay the same, but let's update the HTML you're going to generate.

Each button needs a unique DOM ID. Do this using the Image_ID as part of the value. Use the HTML5 data attribute to store the corrosponding Image_ID for each button.

<cfoutput query="qTest">
    <button id="account_#qTest.Image_ID#" data-image-id="#qTest.Image_ID#">#qTest.Account#</button>
</cfoutput>

The output should look like this:

<button id="account_1" data-image-id="1">Linked In</button>
<button id="account_2" data-image-id="2">Facebook</button>
<button id="account_3" data-image-id="3">Twitter</button>

Now we need a JavaScript array of objects that will contain the query data in client-side code.

$(document).ready(function(){
    var _img = [];
    <cfoutput query="qTest">
        _img.push({'id': #qTest.Image_ID#, 'src': '#qTest.Image#'});
    </cfoutput>
    console.log(_img);
});

This will end up looking like this:

$(document).ready(function(){
    var _img = [];
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'});
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'});
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'});
    console.log(_img);
});

Now we can tie all of this together by

assigning a click handler to <button>s,
which uses the value if the data- attribute to
find the correct object from the JavaScript array
and render the correct image into the target DIV.

$(document).ready(function(){
    var _img = [];
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'});
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'});
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'});
    console.log(_img);

    $("button").on('click', function(){
        var _id = $(this).data('image-id');
        console.log('Image ID: ' + _id + '.');
        // Find the corrosponding object in the _img array.
        var result = $.grep(_img, function(e){ return e.id === _id });
        // If only one is found, then reference the image src from the matching object.
        if (result.length === 1) {
            console.log(result[0].src);
            $("#div1").html('<img src="' + result[0].src + '">');
        } else {
            // If none or more than one are found, show a warning.
            console.warn('Could not find image ' + _id + '.');
        }
    });

});

This can be seen in action here.

"In order to do what you want, you could dynamically generate a JavaScript array using the query data, then use a data-imageID attribute on the button to map the clicked button to the correct image out of the array. Then you would pull the now client-side record data using your jQuery function and populate div1"...... Not exactly sure how to do this. — Michael Downey, Dec 23 '13 at 21:48
Loop over the query and create a JS array. @iKnowKungFoo has answered the question correctly. Your click handler only references the first query row so that will be the only image ever to show. You are assigning the same click handler to all the buttons and expecting them to behave differently. He is also correct that your HTML markup is incorrect. I suggest that you study the basics of HTML & JS first before you continue. It'll help you understand your problem better. — Sean Coyne, Dec 23 '13 at 21:49
You have 'id': '#qTest.Image_ID#' (a string) where it should be 'id': #qTest.Image_ID# (an integer). The line of code using $.grep() is looking for return e.id === _id. The "===" is checking for value AND datatype. http://stackoverflow.com/questions/5447024/javascript-comparison-operators-identity-vs-equality — Adrian J. Moreno, Dec 26 '13 at 21:31

Img Src Or data-imgsrc Coldfusion

1 Answers1