Ajax Function not working in ColdFusion

Report · Apr 18, 2022

I am trying to build functionality using ajax. If email already exists in the database, it should give an alert using ajax. I have a textbox for the email field and on entering an email it should check the existence of that entered email id in the database using ajax.

What i have tried is:

<html>

<head>
<link rel="stylesheet" href = "css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>


<title>Subscribe Form</title>

</head>


<body>
<div class='container py-5 cform_div'>


<h3 class='text-center'>Subscribe Form </h3>

<cfform method='post' action=""  name="sub_form">
  <div class="form-group row">
    <label for="exampleInputEmail1" class="form-label col-sm-3" >First  Name</label>
   <div class='col-sm-9'>
    <cfinput type="text" class="form-control" name="first_name" placeholder="Enter First Name" id="f_name" required="yes">
   
  </div>
  </div>

  <div class="form-group row pt-3">
    <label for="exampleInputEmail1" class="form-label col-sm-3" >Email Id</label>
   <div class='col-sm-9'>
    <cfinput type="email" class="form-control" name="email_id" placeholder="Enter Email Address" id='email_id' required="yes">
  </div>
  </div>

    <div class="form-group row pt-3 pl-3">
    <div class='col-sm-3'></div>
    <div class="form-check col-sm-9">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div
 <div class='form-group row pt-3'>
 
 <div class='col-sm-12 text-center'>
  <cfinput type="submit" name="Submit"  value="Submit" class="btn btn-primary" id='submit' disabled>
  </div>

  </div>
</cfform>

</div>

</body>

</html>

Ajax jquery

<script>

  
$("body").on('change', '#email_id', function() {
 var email=$('#email_id').val();

 $.ajax({
   
         url: 'components/dbData.cfc',
         type: 'get',
         dataType:"json",
         data:{
           method:"getEmailData",
           u_email:email
           
         },
         success:function(data)
         {
           if(data==0)
           {
             $('#submit').prop('disabled', false);
           }
         }

         
         
    });
});


</script>

components/dbData.cfc

<cfcomponent >

    <cffunction name="getEmailData" access="remote" returnType="struct" returnFormat="json" output="false" />
    <cfargument name="u_email" type="string" required="true" /> 

  <cfquery name="validate_email" datasource="validate_email"  >
       SELECT * FROM validate_email.validate_data WHERE email_id="#u_email#"
    </cfquery>
  
    <cfreturn validate_email.RecordCount />
    </cffunction>
 <cfcomponent>

Why Ajax function call is not responding

Report · Apr 21, 2022

Why Ajax function call is not responding

By @abcd987

Answer: Because the "Ajax jquery" code is never called!

As that particular Javascript code is completely separate from the CFM and CFC pages. nowhere is it triggered.

Suggestion: I expected you to include that code within the Head section of the CFM page.

In any case, even after you include the Javascript code in the CFM page, it still probably won't work. That is because your CFC code contains a number of errors:

The cffunction tags ends prematurely with "/>".
Suggestion: It should instead end with ">".

The function's returntype is struct. Yet the function returns an integer ( validate_email.RecordCount ).
Suggestion: Change the return line to

<!---
Convert the query object (validate_email) first to a JSON string,
then convert that to a struct
--->
<cfreturn deserializeJSON( serializeJSON( validate_email ) )>

The query-name/datasource-name precedes the table-name.
Suggestion: "SELECT * FROM validate_data WHERE email_id="#arguments.u_email#"

Ajax Function not working in ColdFusion

1 Correct answer