CODEWITHSUNDEEP
javascriptjqueryhtmlms-accesscoldfusion
Michael Downey
Michael Downey

Reputation: 687

Img Src Or data-imgsrc Coldfusion

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 hereenter 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 enter image description here 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>

Upvotes: 1

Views: 1636

Answers (1)

Adrian J. Moreno
Adrian J. Moreno

Reputation: 14859

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

  1. assigning a click handler to <button>s,
  2. which uses the value if the data- attribute to
  3. find the correct object from the JavaScript array
  4. 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.

Upvotes: 6

Related Questions