roger v
asked on
ColdFusion with jQuery ajax - how to
Hi Experts,
I have a coldfusion page that I include the jquery library in. I have a section where there are text inputs for the user to enter info, and then save to database. I don't have a form tag in here but just 3 input fields.
I started implementing jquery solution to this but not sure on how to proceed. First, I need to validate all 3 of the text fields. If any of those fails validation, I need to display an alert box with all the error fields and then also add a line in red just below the failed input's text box (like an addClass in jquery or something), and return false.
Second, if all the validation is successful, then I need to do a $.ajax and call a method in a cfc, pass in the params, then in the cfc's method do the database actions and then return an alert box that data was successfully saved as well as add a div with text in green and a check mark.
Here's what I have so far:
<!---.cfm with text inputs--->
<script type="text/javascript" src="/js/userInput.js"></s cript>
<div id="successORfail"><!---th is is where I need to display the results of the operation---></div>
<cfoutput query="schoolData">
<table>
<tr>
<td>
<input type="text" name="txt1" id="txt1" value="#school_name#" />
<!---this is where I need to display in red if txt1 fails validation--->
</td>
</tr>
<tr>
<td>
<input type="text" name="txt2" id="txt2" value="#school_dist#" />
<!---this is where I need to display in red if txt2 fails validation--->
</td>
</tr>
<tr>
<td>
<input type="text" name="txt3" id="txt3" value="#school_principal_i nfo#" />
<!---this is where I need to display in red if txt3 fails validation--->
</td>
</tr>
<tr>
<td><input type="button" name="save" id="save" value="save info" /></td>
</tr>
</table>
</cfoutput>
<!---end .cfm page--->
<!---userInput.js file--->
$(document).ready(function (){
$("#save").click(function( ){
/*this is where I need to do the validation:
txt1: not blank and regular expression to make sure there are no special characters except underscore(_)
txt2: same as above
txt3: not mandatory but if not blank, check if there is a URL, and if there is URL then check it is formatted correctly (www.myurl.com/xxx/yyy/zzz etc)
If validation fails, then display alert box with any/all of the reasons for fail; then add a line of text under any/all of the text boxes that have failed validation with reason in red.
return false.
If validation is successful, then move on to the ajax call.*/
$.ajax(
{
type: "get",
url: "schools.cfc",
data: {
method: "savetodb",
name: $("#txt1").val(),
dist: $("#txt2").val(),
principal: $("#txt3").val()
},
dataType: "json",
success: function(objResponse){
//if(objResponse.SUCCESS){
alert(objResponse);
var msgSuccess = "<img src='green.png' width='26' height='26'>";
msgSuccess = msgSuccess + " " + "<span style='font-weight:bold;fo nt-size:13 px'>" + "Saved!" + "</span>";
$("#successORfail").html(m sgSuccess) ;
/*}
else{
alert("Error occurred!");
}*/
}
});
return false;
});
});
<!---end .js file--->
<!---schools.cfc file--->
<cfcomponent>
<cffunction name="savetodb" access="remote" returnformat="json" returntype="string" output="false">
<cfargument name="name" type="string" required="yes">
<cfargument name="dist" type="string" required="yes">
<cfargument name="principal" type="string" required="yes">
<cftry>
<!---a bunch of db queries, success or fail--->
<cfset myResult="Success" />
<cfcatch type="any">
<cfset myResult = "There was an error!" />
</cfcatch>
</cftry>
<cfreturn myResult>
</cffunction>
</cfcomponent>
I have a coldfusion page that I include the jquery library in. I have a section where there are text inputs for the user to enter info, and then save to database. I don't have a form tag in here but just 3 input fields.
I started implementing jquery solution to this but not sure on how to proceed. First, I need to validate all 3 of the text fields. If any of those fails validation, I need to display an alert box with all the error fields and then also add a line in red just below the failed input's text box (like an addClass in jquery or something), and return false.
Second, if all the validation is successful, then I need to do a $.ajax and call a method in a cfc, pass in the params, then in the cfc's method do the database actions and then return an alert box that data was successfully saved as well as add a div with text in green and a check mark.
Here's what I have so far:
<!---.cfm with text inputs--->
<script type="text/javascript" src="/js/userInput.js"></s
<div id="successORfail"><!---th
<cfoutput query="schoolData">
<table>
<tr>
<td>
<input type="text" name="txt1" id="txt1" value="#school_name#" />
<!---this is where I need to display in red if txt1 fails validation--->
</td>
</tr>
<tr>
<td>
<input type="text" name="txt2" id="txt2" value="#school_dist#" />
<!---this is where I need to display in red if txt2 fails validation--->
</td>
</tr>
<tr>
<td>
<input type="text" name="txt3" id="txt3" value="#school_principal_i
<!---this is where I need to display in red if txt3 fails validation--->
</td>
</tr>
<tr>
<td><input type="button" name="save" id="save" value="save info" /></td>
</tr>
</table>
</cfoutput>
<!---end .cfm page--->
<!---userInput.js file--->
$(document).ready(function
$("#save").click(function(
/*this is where I need to do the validation:
txt1: not blank and regular expression to make sure there are no special characters except underscore(_)
txt2: same as above
txt3: not mandatory but if not blank, check if there is a URL, and if there is URL then check it is formatted correctly (www.myurl.com/xxx/yyy/zzz etc)
If validation fails, then display alert box with any/all of the reasons for fail; then add a line of text under any/all of the text boxes that have failed validation with reason in red.
return false.
If validation is successful, then move on to the ajax call.*/
$.ajax(
{
type: "get",
url: "schools.cfc",
data: {
method: "savetodb",
name: $("#txt1").val(),
dist: $("#txt2").val(),
principal: $("#txt3").val()
},
dataType: "json",
success: function(objResponse){
//if(objResponse.SUCCESS){
alert(objResponse);
var msgSuccess = "<img src='green.png' width='26' height='26'>";
msgSuccess = msgSuccess + " " + "<span style='font-weight:bold;fo
$("#successORfail").html(m
/*}
else{
alert("Error occurred!");
}*/
}
});
return false;
});
});
<!---end .js file--->
<!---schools.cfc file--->
<cfcomponent>
<cffunction name="savetodb" access="remote" returnformat="json" returntype="string" output="false">
<cfargument name="name" type="string" required="yes">
<cfargument name="dist" type="string" required="yes">
<cfargument name="principal" type="string" required="yes">
<cftry>
<!---a bunch of db queries, success or fail--->
<cfset myResult="Success" />
<cfcatch type="any">
<cfset myResult = "There was an error!" />
</cfcatch>
</cftry>
<cfreturn myResult>
</cffunction>
</cfcomponent>
ASKER
Hi myselfrandhawa,
The reason I'm doing it this way is because the user wants it like this. User wants both a javascript alert box with any/all input errors, followed by text in red color underneath each input box that has failed validation.
The 2 main road bumps I've hit are:
1. Looping through all the fields and doing regex check in jquery
2. Showing the errors below the text fields
The reason I'm doing it this way is because the user wants it like this. User wants both a javascript alert box with any/all input errors, followed by text in red color underneath each input box that has failed validation.
The 2 main road bumps I've hit are:
1. Looping through all the fields and doing regex check in jquery
2. Showing the errors below the text fields
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
as an example for ur understanding, i am just taking one field
<style>
.error { color: red; padding-left: 10px; }
</style>
<tr>
<td>
<input type="text" name="txt1" id="txt1" value="#school_name#" />
<span class="error"> </span>
</td>
</tr>
in your ajax call: do it like this
$(document).ready(function
$('.error').hide();
$('#submit').click(functio
var name = $('.uname').val();
var data='uname='+name;
$.ajax({
type:"POST",
url:"validateuser.cfm",
data:data,
success:function(html) {
$('.error').show();
$('.error').text(html);
}
});
return false;
});
});
now on ur validate.cfm page do a regex check like this
<cfif NOT RefindNoCase("^[a-zA-Z0-9]
Error! Only Alphabets and numbers are allowed
<cfelse>
ur cfc code
</cfif>