pass coldfusion data to jQuery DatePicker using jQuery.get()

[iccsi]

I use following jQuery code to pass json data from ColdFusion  using jQuery.get() to datepicker.

I tested the server side and it returns data without error.

I got 'I am here' and 'Data Loaded:" message from alert.

The click evnet is triggered, but it does not go in to success callback function.

Any information and help is great appreciated,

Regards,

Iccsi,

Her is client side coe:

jQuery("#btnTest").click( function() {
   alert(' I am here');
     jQuery.get({

        url: 'MyServer.cfc?method=MyMethod&vMyNumber=5',
        datatype: 'json',
        success: function(data)
       {
       alert(" i am inside");
       jQuery("#MyDate").datepicker('setDate', data.MyDate);
       console.log( data );
                             }
      });
    alert("Data Loaded: ");
    });

here is ColdFusion Server  side code:

<cffunction name="MyMethod" access="remote" returnformat="json">
 
  <cfargument name="vMyNumber" required="yes" default="0" hint="My Number">
  <cfargument name="page" required="no" default="1" hint="Page user is on">
  <cfargument name="rows" required="no" default="10" hint="Number of Rows to display per page">
  <cfargument name="sidx" required="no" default="" hint="Sort Column">
  <cfargument name="sord" required="no" default="ASC" hint="Sort Order">

<cfset var Mydata = ArrayNew(1)>

<cfset start = ((arguments.page-1)*arguments.rows)+1>
<cfset end = (start-1) + arguments.rows>
<cfset i = 1>

<cfstoredproc procedure="mySP">
<cfprocparam value = "#vMyNumber#" CFSQLTYPE = "cf_sql_integer">
<cfprocresult name="MyProp" resultset="1">
</cfstoredproc>

<cfloop query="MyProc" startrow="#start#" endrow="#end#">

       <cfset Mydata = [#MyNumber#,#MyDate#]>

            <cfset i = i + 1>           
  </cfloop>

     <cfset totalPages = Ceiling(MyProp.recordcount/arguments.rows)>
     <cfset stcReturn =     {total=#totalPages#,page=#Arguments.page#,records=#MyProp.recordcount#,rows=#Mydata#}>
       

<cfreturn stcReturn>

</cffunction>

Here is data returned from ColdFusion Server.

{"ROWS":[[6,"May, 03 2002 00:00:00"]],"PAGE":1,"RECORDS":1,"TOTAL":1.0}

[p_sim]

First off all, when you declare a local variable in a function, use "var" scope. This will prevent problem in the future when your app gets bigger and somewhere you use the same variable names.

Now, let's talk about the jQuery.

1. Why you use .get() method? It is critical that you know what you are doing since this problem is very similar to the one that you had before.

2. .datepicker('setDate', data.MyDate); -- Where does .MyDate refer to?

3. It would be wise that you make sure your document is ready before allowing user clicking something.

[iccsi]

Thanks for the message and help,

I have my jQuery.get() in jQuery(document).ready  function.

MyDate is the field return from cffunction in myData.

MyData returns MyNumber and MyDate.

I see jQuery web site to refer the field using this period.

The previous issue is the data, I tried many browsers and play with data and learned that modify data change the behavior of the jqGrid.

I deleted some data then jqQuery works,

I plan to create a brand new form just one cfc with one function to run specific stored procedure and one date picker on the form to see does it work or not.

Thanks again for helping,

Regards,

Iccsi,

[iccsi]

I created brand new files for cfm and cfc files.

I am confused now, in these new files, I do not get 'I am here start'

jQuery creates Datepicker, but it seems that the myButton.Click does not trigger

The server side returns data when I use Google Chrome and it does not have error.

Regards,

Iccsi,

jQuery(document).ready(function() {

           $(function() {

              $( "#dtpMyDate" ).datepicker({

                      changeMonth: true,

                      changeYear: true

               });

     });

          jQuery("#myButton").click(function(){

             preventDefault();

             alert('I am here start');

             jQuery.get({

                       url: 'Components.cfc?method=myfunction&vStartDate=01/10/2012&vEndDate=01/10/2012',

                 datatype: 'json',

                       success: function(data){

                                 alert('I am here inside');

                                 $( "#dtpMyDate" ).datepicker('setDate', Data.ExamDate);

                      }

             });

            alert('I am here end');

   });

});

</script>

<td><input type="text" name="dtpMyDate1" id="dtpMyDate"></td>

  <td><input type="submit" name="myButton1" id="myButton" value="Submit"></td>

[p_sim]

I don't understand what you are trying to do with .get() method. Why not .ajax() method?

[iccsi]

Thanks for suggestion, will try to use ajax,

I think get() is a short hand method for ajax,

Thanks again,

Regards,

Iccsi,

[iccsi]

I got button click event works, I see that "I am here start" message, but it does not show "I am here inside".

I think for some reason jQuery did not success to get data that success call back function does not trigger.

Both get() and ajax have same result.

I check the server side using web browser it does return data without error.

Using cffunction in cfc file to create JSON format is the only way to send data to jQuery?

We can only check server side out put data then I can only assume that the server sends data and jQuery receive data?

Thanks again for helping,

Regards,

Iccsi,

[iccsi]

Good news, I see I am here inside message and see the data,

I used "Data" instead of "data"

Once I change from Data to data and I see the I am here inside.

the data are like following

{"ROWS":[["2012-01-10"]],"PAGE":1,"RECORDS":1,"TOTAL":1.0}

It seems that I use data.ExamDate does not work.

Are there any way to assign the right data to datepicker?

Thanks a million for helping,

Regards,

Iccsi,

[iccsi]

My alert statement shows above message which is server send data and client recevie data successfully.

The only thing is it is not successful every time, sometimes it is not successful then I do not see the message.

I use  $("#dtpMyDate").val(myDate); to asign the value to date picker, it gets value and disappear the value assigned.

I am almost there, thanks a million for helping,

Regards,

Iccsi,