Question

142

Creating a comment box using jquery and works inside coldfusion

rated 0 times [ 148] [ 6] / answers: 1 / hits: 9616 / 11 Years ago, fri, january 24, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jennifer

Add To Favorites

Follow

Total Points: 517

Total Questions: 110

Total Answers: 104

Location: New Caledonia

Member since Fri, Sep 11, 2020

4 Years ago

jennifer questions

1 Function to check if a given number do contain les than two different digits

Fri, Mar 25, 22, 00:00, 2 Years ago

1 Electron-Prisma Error: can not find module '.prisma/client'

Sat, Sep 25, 21, 00:00, 3 Years ago

1 How to react to route changes on Vue 3, script setup composition API?

Sun, Sep 5, 21, 00:00, 3 Years ago

1 Close button isn't working for react-bootstrap modal component

Sun, Aug 9, 20, 00:00, 4 Years ago

1 5 day weather forecast on openweathermap not giving expected result

Mon, Aug 3, 20, 00:00, 4 Years ago

View All

answered 11 Years ago nathalieg · Accepted 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');

});