Jquery Validation Plugin not working in Jquery ui custom dialog box - javascript

I am using validate.js library given on this link http://jzaefferer.github.io/jquery-validation/jquery.validate.js to validate the text fields of pop-up form made using Jquery custom dialog box.
Whenever i click in the submit button,i keep getting the error"validate not defined"..I can't understand whats wrong with my code..
I want the plugin to validate all the fields given in the pop-up form...
Please Help..
Code..
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"> </script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type= text/javascript>
$(function() {
$( "#dialog1" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
width:800,
height:800,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog1" ).dialog( "open" );
});
});
$(document).ready(function(){
$("#dialog").validate();
});
function isNumberKey(evt){ <!--Function to accept only numeric values-->
//var e = evt || window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<style>
textarea {
vertical-align: top;
}
</style>
</head>
<body>
<div id="dia">
<form name="dialog" method="get" action="">
<div id="dialog1" title="Upload Details">
<fieldset>
<legend><p>Please fill in the follwing Item details to compalete the uploading process.</p></legend><br><br>
Name: <input type="text" id="cIname" name="Iname"size="30" placeholder="Item Name"/><br><br>
<p><div id='ccontactform_category_errorloc' class='err'></div>
<label for="ccategory" style="margin-bottom: 90px;margin-top:50px">Category: </label>
<select id="ccategory" name="category"class="input">
<option value="0" selected="selected">
[Choose Category]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
<div id="choose_own_text"></div>
</p><br>
Brand: <input type="text" id="cIbrand" name="Ibrand" size="30" placeholder="Item Brand"/><br><br>
Price (Rs): <input type="text" name="price" id="cprice"size="20" placeholder="Enter Price" maxlength="15" onkeypress="return isNumberKey(event)"/> .00 ps<br><br>
<label for="cIdescrp" style="margin-bottom: 90px;margin-top:50px">Description:</label>
<textarea rows="15" cols="40" id="cIdescrp" name="Idescrp"style="resize: none;overflow:auto" onkeypress=""></textarea><br><br>
Mobile No: <input type="text" name="Num" id="cNum"size="20" placeholder="Enter Valid Number" maxlength="10" onkeypress="return isNumberKey(event)"/> <br><br>
<button id="Submit" onclick="validate()">Submit Details</button>
</fieldset>
</div>
</form>
<button id="opener">Open Dialog</button>
</div>
</body>
</html>

Quote OP:
I keep getting the error "validate not defined".
It sounds like you have not properly included the Validate plugin script:
<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"> </script>
Instead of linking directly to the Github file, use the CDN link provided by the developer for this purpose:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js
Also include type="text/javascript" to make it valid HTML:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
And of course, your jQuery selector target, $("#dialog"), is incorrect. The hash, #, is trying to target an id which does not exist.
Either add id="dialog" to your form tag...
<form id="dialog" name="dialog" method="get" action="">
OR change your selector to target the element by its name attribute...
$('[name="dialog"]').validate();
Your code:
<button id="Submit" onclick="validate()">Submit Details</button>
Do not use inline JavaScript. With jQuery, inline JavaScript is ugly and obsolete. In this case, there is no practical needs to call .validate() again. It's the initialization for the plugin and only needs to be called once on DOM ready; you've already done that.
Use this:
<button id="Submit">Submit Details</button>
See demo below for how to declare rules. In demo, I used your code and applied required to the first field. Fields are identified by name attribute. To make a select list required, the first option item must contain value="".
Working DEMO:
http://jsfiddle.net/aqJVm/
I strongly suggest that you thoroughly review the documentation:
http://docs.jquery.com/Plugins/Validation

Related

.click() function doesn't work javascript / jquery

UPDATE:
Somehow the just work fine after I tried it..
UPDATE
I'm using .click() function on my javascript, but it doesn't work.
Here is my JS code:
src="jquery.js";
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var institutionID, acadCareerID;
$(document).ready(function(){
getInstitution();
institutionID = $( "select#institution option:checked" ).val();
if(institutionID == null){
institutionID = 1;
}
getAcadCareerByInstitution(institutionID);
acadCareerID = $( "select#acadCareer option:checked" ).val();
if(acadCareerID == null){
acadCareerID = 1;
}
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
$("select#institution").change(function(){
institutionID = $( "select#institution option:checked" ).val();
getAcadCareerByInstitution(institutionID);
})
$("select#acadCareer").change(function(){
acadCareerID = $( "select#acadCareer option:checked" ).val();
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
})
$("div#search").click(function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});
all functions like getInstituion(), getAcadCareerByInstitution(institutionID) etc are ajax call.
Here is my HTML code:
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<label for="institution">Institution</label>
<select name="institution" class="form-control" id="institution">
</select>
</div>
<div class="form-group">
<label for="acadCareer">Academic Career</label>
<select name="acadCareer" class="form-control" id="acadCareer">
</select>
</div>
<div class="form-group">
<label for="period">Period</label>
<select name="period" class="form-control" id="period">
</select>
</div>
<div class="form-group">
<label for="department">Department</label>
<select name="department" class="form-control" id="department">
</select>
</div>
<div class="form-group">
<label for="date">Deadline Date</label>
<input type="date" class="form-control" id="deadline" placeholder="Deadline Date" name="deadline">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
</form>
I already put jquery for my Master Layout (Laravel 5)
<head>
<link rel="stylesheet" type="text/css" href="{{url()}}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{url()}}/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url()}}/js/tools.js"></script>
<script src="{{url()}}/js/bootstrap.min.js"></script>
<title>BINUS - #yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
I want the Search Button / Div to do something when I click. I can't see what's wrong here.
I already tried <div> to <button> but it just will work like submit. I also already tried to put event.preventDefault() at my JS code, but it didn't work too.
Maybe you can try with event delegation...
$(document).ready(function(){
$("body").on("click", "#search", function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});
You code works OK. You need to write the jquery library in the final, just before of </body>
...
<script type="text/javascript" src=".../jquery.js"></script>
</body>
Example it works ok!: Example Jsfiddle
<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
This looks like it will render on the page as two buttons. Your ID here is attached to the div, not to the button, they should both appear to look like buttons providing bootstrap is loaded, but only the div with "search" as the content will do anything.
This is the only thing that appears odd, the only other problem is you are not loading your jquery as stated elsewhere.
I don't have the reputation to comment, but have you added a jquery library before your script?
Secondly, if you did and the items on the page are loaded after the document has loaded you will need to change your code up, for instance:
Give your form an id
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data" id="postForm">
Then in your jquery script
<script>
$('#postForm').on('click', '#search', function(){
alert("The paragraph was clicked.");
console.log("abc");
});
</script>
The above will allow the javascript to run on items that are bought in after document load, however it is important you set it on a parent element that is avaiable at document load

Why do my JavaScript calls not work in a form after switching the doctype to HTML5

I have a form that uses JavaScript to reveal additional fields depending on user selections. The code worked fine using the XHTML 1.1 doctype (not my choice... lame school project guidelines), but after switching to the HTML5 doctype nothing works. The only way I can get any JavaScript to work inside the form is to put it directly in the onchange="" setting; just adding the function call there will not work. I've tried event listeners also, and that doesn't work either.
For simplicity's sake I'm only showing code for one of the dynamic fields:
<!DOCTYPE html>
<html><head>
<?php include "phpself.php"; ?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
document.getElementById("visitor").addEventListener("change", function(ev) {
Visitor();
});
function Visitor() {
var visitor = document.getElementById("visitor").value;
if (visitor=="Other") {
var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";
document.getElementById("vother").innerHTML=(othertext);
}
}
</script>
</head><body>
<form action=\"".getPHPSelf()."\" enctype="text/plain" method="post" onsubmit="return FormValid();" >
<fieldset style="width=50%;">
<legend>Comments</legend>
<label>I am a:</label>
<select name="visitor" id="visitor" onchange="Visitor();">
<option value="" disabled selected style="display:none;">select...</option>
<option value="Friend">Friend</option>
<option value="Client">Client</option>
<option value="Other">Other</option>
</select>
<br/><br/><div id="vother"></div>
<input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</fieldset>
</form>
</body></html>
I'm aware that other people have asked similar questions, but none of the answers I've found work for me.
I verified some issues in your code:
this line is not valid (syntax error):
var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";
You should escape the double quotes, or replace them with single quotes.
This will work:
var othertext = "<label>What would you consider yourself?</label><br/><input type=text name='other_visitor' id='other_visitor' />";
Get rid of the inline onchange="Visitor(); binder or the document.getElementById("visitor").addEventListener. You should choose one of the approachs.
move your <script> tag to the bottom of your body (just before </body>). Or wrap your code into DOMContentLoaded event (IE9+).
(optional). You don't need parenthesis around (othertext) here:
document.getElementById("vother").innerHTML = (othertext);
Working code: https://jsfiddle.net/mrlew/txk11m6c/
You should put your script at bottom like given below or use window.onload.
<!DOCTYPE html>
<html><head>
<?php include "phpself.php"; ?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head><body>
<form action=\"".getPHPSelf()."\" enctype="text/plain" method="post" onsubmit="return FormValid();" >
<fieldset style="width=50%;">
<legend>Comments</legend>
<label>I am a:</label>
<select name="visitor" id="visitor" onchange="Visitor();">
<option value="" disabled selected style="display:none;">select...</option>
<option value="Friend">Friend</option>
<option value="Client">Client</option>
<option value="Other">Other</option>
</select>
<br/><br/><div id="vother"></div>
<input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</fieldset>
</form>
<script type="text/javascript">
document.getElementById("visitor").addEventListener("change", function(ev) {
Visitor();
});
function Visitor() {
var visitor = document.getElementById("visitor").value;
if (visitor=="Other") {
var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";
document.getElementById("vother").innerHTML=(othertext);
}
}
</script>
</body></html>
Here's my two cents:
<!DOCTYPE html>
<html><head>
<?php include "phpself.php"; ?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() { // ~ F I X ~ Run code when the rest of page is done loading instead of immediately when browser reads it. This is a very common problem I've noticed newbies have with JS
document.removeEventListener("DOMContentLoaded",this); // Remove event after it's served purpose
document.getElementById("visitor").addEventListener("change", Visitor); // Also removed redundant function, Visitor can already be called by itself
function Visitor() {
var visitor = document.getElementById("visitor").value;
if (visitor=="Other") {
var othertext="<label>What would you consider yourself?</label><br/><input type=\"text\" name=\"other_visitor\" id=\"other_visitor\"/>"; // Backslashed quotations that were clearly meant to be included part of string
document.getElementById("vother").innerHTML=(othertext);
}
}
});
</script>
</head><body>
<form action=\"".getPHPSelf()."\" enctype="text/plain" method="post" onsubmit="return FormValid();" >
<fieldset style="width=50%;">
<legend>Comments</legend>
<label>I am a:</label>
<select name="visitor" id="visitor">
<option value="" disabled selected style="display:none;">select... </option>
<option value="Friend">Friend</option>
<option value="Client">Client</option>
<option value="Other">Other</option>
</select>
<br/><br/><div id="vother"></div>
<input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</fieldset>
</form>
</body></html>

jquery hide/show form elements, preventing slip of elements

I use the following code to show some forms, when a certain element is selected from the select input.
javascript:
$(document).ready(function() {
$( "#callback_url" ).hide();
$("#test-url").on("change keyup paste", function(){
//console.log($("#test-url").val());
//generate address
if ($("#test-url").val() == 0) {
console.log("true");
$( "#callback_url" ).hide();
$( "#api_key" ).show();
}
//payload
else{
console.log("else");
$( "#api_key" ).hide();
$( "#callback_url" ).show();
}
})
});
My HTML code looks like this (using bootstrap):
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="test-url" size="5">
<option selected value="0">Generate new address</option>
<option value="1">Receive callback</option>
<option></option>
</select>
</div>
</div>
<div class="col-md-8">
<form id="test-form">
<div class="form-group" data-url="/api/receive?method=create">
<input type="text" id="api_key" class="form-control" name="api_key" placeholder="API-Key">
</div>
<div class="form-group test-specific-inputs" data-url="/api/receive?method=check_logs">
<input type="text" id="callback_url" class="form-control" name="callback_url" placeholder="Callback URL">
</div>
<div class="form-group">
<button type="submit" class="btn-info btn-lg">Send Request</button>
</div>
</form>
</div>
</div>
All in all I've got two questions:
1.) Is it good style to use javascript at the top of document ready to hide the element, when page is loaded? If not, what to use instead of?
2.) When I load the page the first time it looks like
Now when clicking "Receive callback" it looks like:
How is this caused, and how can I prevent the input form to "slip" down like it does, when changing the selected element?
1) Using $(document).ready waits for the page to load and this means that the javascript code inside that function will run once the HTML has finished loading and rendering. This is useful when you are working with HTML elements from your JS code. I would suggest using $(document).ready to make sure you can place all you script libraries in the <head> and know that there won't be a chance of an undefined element that was yet to be rendered.
2) I used your exact code with bootstrap 3.3.7 and it seems to work fine, so I think there is a problem with your parts of your HTML or CSS that you didn't include here. See for yourself:
$(document).ready(function() {
$( "#callback_url" ).hide();
$("#test-url").on("change keyup paste", function(){
//console.log($("#test-url").val());
//generate address
if ($("#test-url").val() == 0) {
console.log("true");
$( "#callback_url" ).hide();
$( "#api_key" ).show();
}
//payload
else{
console.log("else");
$( "#api_key" ).hide();
$( "#callback_url" ).show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="test-url" size="5">
<option selected value="0">Generate new address</option>
<option value="1">Receive callback</option>
<option></option>
</select>
</div>
</div>
<div class="col-md-8">
<form id="test-form">
<div class="form-group" data-url="/api/receive?method=create">
<input type="text" id="api_key" class="form-control" name="api_key" placeholder="API-Key">
</div>
<div class="form-group test-specific-inputs" data-url="/api/receive?method=check_logs">
<input type="text" id="callback_url" class="form-control" name="callback_url" placeholder="Callback URL">
</div>
<div class="form-group">
<button type="submit" class="btn-info btn-lg">Send Request</button>
</div>
</form>
</div>
</div>
Cheers

Java script doesn't run inside the html file in ionic frame

I have a form which is used to get users input. I want a JS to run in the header to check the validation.
my html code:
<ion-view view-title="{{chat.name}}">
<ion-content class="padding">
<head>
<meta charset="UTF-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.css" media="screen" rel="stylesheet" type="text/css">
<script>
function validateForm(objForm) {
if (objForm.Make.selectedIndex == 0) {
alert("Please select a request");
returnStatus = 0;
};
var x = document.forms["request"]["description"].value;
if (x == null || x == "") {
alert("Please fill out the description");
return false;
}
}
</script>
</head>
<body>
<h2>Service Request</h2>
<br></br>
<div id="container">
<form action="" method="post" id="customtheme" name ="request">
<p>
<label for="RequestType" style="padding-right:56px">Request Type:</label>
<SELECT NAME="Make" id="request">
<option value="0">--Please select--</option>
<option value="1">Car Pass Ticket</option>
</SELECT>
</p>
<p>
<label for="description" style="padding-right:56px" style="vertical-align: top;">Description:</label>
<textarea name="description" id="description" cols="10" rows="6" required></textarea>
</p>
<p>
<input TYPE="BUTTON" VALUE="Submit" name="submit" style="align:center" id="submitbutton" onClick="validateForm(document.request)"/>
</p>
</form>
</div>
</body>
</ion-content>
</ion-view>
I have a java script in the header but that doesn't get executed. what can be done to fix the error or any other way I can do validation.
Put that in a controller. Why do you have it there?
The <ion-view> is injected into <ion-nav-view> which is basically sugar over ui-router's <ui-view>.
Why do you have head, body etc inside ion-view?
Go through angular docs and then Ionic docs. This jQuery approach wont work. And remove that jq-ui.css. You already have Ionic, which is a UI framework.

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

Categories

Resources