Michael Downey Michael Downey - 1 month ago 10
Javascript Question

Creating a comment box using jquery and works inside coldfusion

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>

Answer

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');
});
Comments