Skip to main content
A
abcd987
Participant
April 19, 2022
Answered

Ajax Function not working in ColdFusion

  • April 19, 2022
  • 1 reply
  • 419 views

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 

This topic has been closed for replies.
Correct answer BKBK

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:

  1. The cffunction tags ends prematurely with "/>".
        Suggestion: It should instead end with ">".
  2. 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 ) )>​
  3.  The query-name/datasource-name precedes the table-name.
         Suggestion: "SELECT * FROM validate_data WHERE email_id="#arguments.u_email#"

1 reply

BKBK
Community Expert
BKBKCommunity ExpertCorrect answer
Community Expert
April 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:

  1. The cffunction tags ends prematurely with "/>".
        Suggestion: It should instead end with ">".
  2. 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 ) )>​
  3.  The query-name/datasource-name precedes the table-name.
         Suggestion: "SELECT * FROM validate_data WHERE email_id="#arguments.u_email#"
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices