CODEWITHSUNDEEP
jquerycoldfusion
user990016
user990016

Reputation: 3368

jquery cfml ajax

This is frustrating. Nothing I've read makes this clear. And it shouldn't be this complicated. This is the current state of my code. I've been testing every combination hoping it would make sense. All I want to return from the CFfunction is a record count and show it during the hover.

$(".alphabet").hover(function () {
  $.ajax({ type: "POST", 
  url: "cfc/basic.cfc?method=CountUsersByLetter&returnformat=json", 
  data: "nbw=" + $(this.target).val(), 
  datatype: "html",
  success: function(usercount){
  alert(usercount);
  },
  error: function (xhr, textStatus, errorThrown){ 
   // show error 
   //alert(errorThrown);
   console.log('errorThrown');
    } 
  }); 
    $(this).append($("<span>" + usercount +"</span>"));
     }, 
  function () {
    $(this).find("span:last").remove();
  }
);

<cffunction name="CountUsersByLetter" output="no" returntype="query" access="remote">
 <cfargument name="NBW" required="false" type="string" default="A" hint="name begins with">
 <cfset var qResults = "">
  <cfquery name="qResults" datasource="#request.dsn#">
   select count(id) as usercount from Temp_Duplicate_Individuals_CC
   WHERE left(lastname,1) = <cfqueryparam value="#arguments.NBW#" />
  </cfquery>
 <cfreturn #qResults#>
</cffunction>

Upvotes: 0

Views: 589

Answers (4)

Pritesh Patel
Pritesh Patel

Reputation: 2019

Change success function as per below.. As function return whole query not only count so you will get query object in usercount argument not only count. Also you will receive as text string you may need to convert to JSON object using eval() function.

EDIT: Here is full functional code. I was looking into success function issue only but appending SPAN you had wrote outside success was also causing issue.

    $(".alphabet").hover(function () {
              var _$this = $(this);
              var usercount = 0;
              $.ajax({ type: "POST", 
              url: "scribble.cfc?method=CountUsersByLetter&returnformat=json", 
              data: "nbw=" + $(this.target).val(), 
              datatype: "html",
              success: function(res){
                 usercount = eval("(" + res + ")").DATA[0][0];
                 _$this.append($("<span> (" + usercount +")</span>"));
              },
              error: function (xhr, textStatus, errorThrown){ 
               console.log('errorThrown');
                } 
            }); 
        }, 
          function () {
            $(this).find("span:last").remove();
          }
        );

Upvotes: 0

Scott Jibben
Scott Jibben

Reputation: 2287

There's a lot of things that could use tweaking in the code.

I would add this line of code right before the .ajax() call:

$.ajaxSetup({ timeout: 5000, cache: false }); // this is needed or ie will cache the ajax responses!

@Jason Tabler's response is close. RecordCount of a query using COUNT() will always return a value of 1 (one). I would change the cfreturn statement to be this:

<cfreturn qResults.usercount />

Pound signs are not needed in the cfreturn and this will return the value instead of a query object.

The ajax call should not be a "POST". "POST" is usually used to submit to a form action page. This should be a "GET".

I always use Firebug to check the data format returned for the success: function and then add code to display it. Since the return was changed above it should become a much simpler json object to use.

Upvotes: 0

J.T.
J.T.

Reputation: 2616

Why don't you try cfreturn qResults.recordCount? You are returning the entire query object right now.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

You have to understand that ajax is async in nature by default so you have to wait until server responds before using usercount which is only available inside success handler. Either make a synchronous call by setting async to false or wait until the server responds.

Move your code inside success handler

$(".alphabet").hover(function () {
  $.ajax({ type: "POST", 
     url: "cfc/basic.cfc?method=CountUsersByLetter&returnformat=json", 
     data: "nbw=" + $(this.target).val(), 
     datatype: "html",
     success: function(usercount){
       //alert(usercount);
       $(this).append($("<span>" + usercount +"</span>"));
     },
     error: function (xhr, textStatus, errorThrown){ 
      // show error 
      //alert(errorThrown);
      console.log('errorThrown');
    } 
  }); 

  }, 
  function () {
    $(this).find("span:last").remove();
  }
);

I would not advice you to make synchronous call because it makes the whole page wait and sometimes the browser hangs completely if the server takes time to respond.

Upvotes: 1

Related Questions