Creating a comment box using jquery and works inside coldfusion

Question

How would I create a text box in jquery that would appear when a certain button is clicked? Currently I have code that allows me to click a button and it shows an image and comments from a database. What I want it to do is also so a comment box so you can add more comments to each image.

<!DOCTYPE html>
<html>
    <head>


        <cfquery datasource="AccessTest" name="qTest">
            SELECT P.Account, P.Image, P.Image_ID, C.Remarks, C.Users, C.Accounts, C.Date_Time
            FROM PictureDB AS P
            INNER JOIN CommentsDB AS C
            ON C.Image_ID = P.Image_ID
            ORDER BY P.Image_ID
        </cfquery>

        <script src="http://code.jquery.com/jquery-2.0.3.js">
        </script>

        <script>
            $(document).ready(function(){
                  var images = {
                    <cfoutput query="qTest" group="Image_ID">
                        "#qTest.Image_ID#": {
                            "image": "#qTest.Image#",
                            "remarks": [
                            <cfoutput>
                                "#qTest.Users#, #qTest.Date_Time# <br> #qTest.Remarks# <br> </br>",
                            </cfoutput>
                            ]
                        },
                    </cfoutput>
                };
                  $("button").click(function(event){
                    event.preventDefault();
                    var id = $(this).data("id");
                    var src = images[id].image;
                    var desc = images[id].remarks.toString();

                    $("#theImage").attr("src", src).removeClass("hide");
                    $("#theDescription").html(desc).removeClass("hide");
                    });
                });
        </script>
    </head>

    <body>


        <cflayout name="myAccordionLayout" type="accordion" width="600px">
            <cflayoutarea title="Bill Analysis" align="left">
                        <cfoutput query="qTest" group="Account">
                    <button data-id="#qTest.Image_ID#">
                        #qTest.Account#
                    </button>
                </cfoutput>
            </cflayoutarea>
        </cflayout>

        <img id="theImage" class="hide">
        <div id="theDescription" class="hide">
        </div>
        </body>
</html>

Then currently I am trying to work this code into the above code.

    <html>

<script src="http://code.jquery.com/jquery-2.0.3.js">    
</script>


    <script>
$(document).ready(function(){
 $("#addcomment").click(function () 
<!---        $("#postComment").show("slow");--->
    });
});
    </script>

        <cfform name="InsertComments" id="InsertComments">
            <fieldset>
<div id="container">
    <div id="mainContent">
      <div id="addcomment"> <a href='#'>add comment</a></div>
        <div id='postComment'>
            <cftextarea name="Remarks" cols="55" rows="4" label="Tour Description"
                                    required="yes" validateat="OnSubmit" message="Please enter your comment here" 
                                    enabled="no">
                        </cftextarea>
            <cfinput type="text" name="Image_ID" message="Please enter Account Here." 
                                 validateat="onSubmit" required="yes" id="Image_ID" size="10"
                                 maxlength="60">
                        </cfinput>
        <cfinput type="submit" name="insertComments" value="Insert Comments" id="submit">
                        </cfinput>
        </div>
    </div>  
    </fieldset>
    </cfform>
        <cfif IsDefined("form.InsertComments")>

                    <cfquery datasource="AccessTest">
                        INSERT INTO CommentsDB (Remarks, Image_ID, Date_Time )
                        VALUES
                        (<cfqueryparam value="#form.Remarks#" cfsqltype="CF_SQL_LONGVARCHAR">
                    </cfqueryparam>
                        , <cfqueryparam value="#form.Image_ID#" cfsqltype="cf_sql_integer">
                    </cfqueryparam>
                        , <cfqueryparam value="#now()#" cfsqltype="cf_sql_timestamp">
                    </cfqueryparam>
                        )
                    </cfquery>

            </cfif>
</div>

</html>

score 1 · Accepted Answer · edited May 23 '17 at 10:32

For the pop-up text box, you could try adding a jQueryUI .dialog() widget to your code, as per this example.

I'm not a cf guy, but something like this should get you started:

jsFiddle Demo

Notes:

.1. Sorry, I couldn't get the <img> tag to behave properly (hide correctly) and don't have time to troubleshoot it. Should be easy to figure out.

.2. Had to change your <button> element to an <input type="button" /> because the button tag was wreaking havoc with jQueryUI's internal buttons: functionality.

.3. Renamed your button ID so it would work with the non-cf, jsFiddle example.

.4. Since you are now also using jQueryUI's library, it must be referenced in your code along with jQuery itself. Note: you also must reference one of the stylesheet themes for jQueryUI. All together, it will look like this:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>

HTML:

<input type="button" id="bbb" data-id="#qTest.Image_ID#" value="#qTest.Account#" /><br />
<br />
<img id="theImage" class="hide" src="http://placehold.it/150x150" ><br>
<div id="theDescription" class="hide" ></div>
<div id="msgbox">
    <p>Please enter any additional comments:</p>
    <textarea id="ta" rows="5" cols="30"></textarea>
</div>

jQuery/js:

$('#msgbox').dialog({
    autoOpen:false,
    modal:true,
    title: 'Add Comments',
    buttons: {
        Okay: function() {
            var oldComments = $("#theDescription").html();
            var newComments = $('#ta').val();
            $("#theDescription").html(oldComments +'<br />' + newComments);

            //Do your ajax update here:
            /*
            $.ajax({
                //Unsure of cfc syntax
            });
            */
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        alert('AJAX update completed');
    }
});

$("#bbb").click(function (event) {
    event.preventDefault();
    var id = $(this).data("id");

    var src = 'http://placehold.it/150x150';
    var desc = 'This is the first bit of remarks';

    $("#theImage").attr("src", src).removeClass("hide");
    $("#theDescription").html(desc).removeClass("hide");

    $('#msgbox').dialog('open');
});

Thanks this is giving me a great starting position! – Michael Downey Jan 24 '14 at 18:31 — Michael Downey, Jan 24 '14 at 18:31

Creating a comment box using jquery and works inside coldfusion

1 Answers1