3 Replies Latest reply on May 17, 2012 7:55 AM by BKBK

    Reference Error - cfgrid.js

    WebolutionDesigns Level 1

      I am using CF901 and trying to utilize CFGRID along with ajaxproxy to create toolbar, etc. I am having a reference issue and cannot seem to figure out how to resolve.  In the ajax debugger, here is the message I am getting...window:global: ReferenceError: Can't find variable: e (http://localhost/CFIDE/scripts/ajax/package/cfgrid.js, line 997) Thoughts?

        • 1. Re: Reference Error - cfgrid.js
          BKBK Adobe Community Professional & MVP

          Better show the code.

          • 2. Re: Reference Error - cfgrid.js
            WebolutionDesigns Level 1

            Here is the code...

             


            <script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/toolbar/toolbar.js"></script>

                <script type="text/javascript">

                // create a new JS proxy object for the CFC

                var dataproxy = new dataproxy();

                dataproxy.setCallbackHandler(handleResult);

               

                function handleResult(response)

                {

                    alert(response);

                }

               

                // add the 2 custom buttons to the toolbar

                function init(){

                 grid = ColdFusion.Grid.getGridObject("approveUsergrid");

                 var gridHead = grid.getView().getHeaderPanel(true);

                 var tbar = new Ext.Toolbar(gridHead);

                 tbar.addButton({text:"Add User", handler:onAdd });

                 tbar.addSeparator();

                 tbar.addButton({ text:"Delete User", handler:onDelete });

                }

               

                function onAdd(button,event){

                    ColdFusion.Window.show('addUserWin');

                }

                function onDelete(){

                    ColdFusion.Window.show('deleteUserWin');

                }

               

                function addUser()

                {

                    //send data to CFC to add artist, the result will be handled by handleResult function above

                    var f = document.frmUser;

                    dataproxy.addNewUser(

                        f.txtFirstName.value

                        ,f.txtLastName.value

                        ,f.txtEmail.value

                    );

                    ColdFusion.Window.hide('addUserWin');

                    grid.refresh();

                }

               

                function deleteUser(s)

                {

                    // if user choose to delete, then send the CFC call, otherwise just sit back!

                    if (s == 'yes')

                    {

                    var grid = ColdFusion.Grid.getGridObject("approveUsergrid");

                    var record = grid.getSelections();

                    // remember, CF makes column names to all UPPERCASE, so dont forget to do that

                    dataproxy.deleteUser(record[0].data.ID);

                    }

                    ColdFusion.Window.hide('deleteUserWin');

                    grid.refresh();

                }

                </script>

             

             

            <cfset args = structNew()>

            <cfset args.name = "approveUsergrid">

            <cfset args.format = "html">

            <cfset args.bindOnLoad = "true">

            <cfset args.bind = "cfc:cfc.users.approveUserlist({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridso rtdirection})">

            <cfset args.stripeRows = true>

            <cfset args.selectColor = "##E3A20D">

            <cfset args.selectmode = "edit">

            <cfset args.align = "left">

            <cfset args.autowidth = "yes">

            <cfset args.bgColor = "##FFFFFF">

            <cfset args.colHeaderAlign="left">

            <cfset args.colHeaderBold = "yes">

            <cfset args.colHeaderFont = "Arial, Helvetica, sans-serif">

            <cfset args.colHeaderFontSize = "1.8em">

            <cfset args.colHeaderTextColor = "##354914">

            <cfset args.font = "Arial, Helvetica, sans-serif">

            <cfset args.fontsize = "1.4em">

            <cfset args.gridDataAlign = "left">

            <cfset args.gridLines = "yes">

            <cfset args.preservePageOnSort = "yes">

            <cfset args.rowHeight = "100">

            <cfset args.selectOnLoad="no">

            <cfset args.sort = "yes">

            <cfset args.sortAscendingButton = "Sort Ascending">

            <cfset args.sortDescendingButton = "Sort Descending">

            <cfset args.stripeRowColor = "##658C26">

            <cfset args.target = "_self">

            <cfset args.textColor = "##333333">

            <cfset args.width = "600px">

            <cfset args.onchange = "cfc:cfc.users.approveUser({cfgridaction},{cfgridrow},{cfgridchanged})">

             

             

            <cfform>

            <cfgrid attributeCollection="#args#">

                      <cfgridcolumn name="ID" display="false">

                      <cfgridcolumn name="FIRSTNAME" header="First Name">

                      <cfgridcolumn name="LASTNAME" header="Last Name">

                      <cfgridcolumn name="EMAIL" header="Email">

                      <cfgridcolumn name="DATECREATED" header="Date Created" mask="mm/dd/yyyy" type="date">

            </cfgrid>

            </cfform>

                           

            <cfwindow width="150" height="150" name="deleteUserWin" modal="true" resizable="false" title="Delete User?"

            bodyStyle="font-family: verdana; color: ##000000;font-size:15px;font-weight:bold;"

                   headerStyle="font-family: verdana; background-color: black; color: white">

                      <div style="margin-left:5px;margin-top:5px;">

                      Please Confirm this action.

                      <input type="button" value="yes, surely!" onClick="deleteUser('yes')">

                      <input type="button" value="no, please! " onClick="deleteUser('no')">

                      <br/>

             

            </cfwindow>

             

             

            <cfwindow name="addUserWin" modal="true" resizable="false" title="Add New User" bodyStyle="font-size:10px;font-family: verdana; color: ##ff0000;"

                   headerStyle="font-family: verdana; background-color: black; color: white">

                      <form name="frmUser" style="font-size:10px;">

                                <table width="100%">

                                          <tr>

                                                    <td>Firstname</td>

                                                    <td><input type="text" name="txtFirstName" value="dummy"></td>

                                          </tr>

                                          <tr>

                                                    <td>Lastname</td>

                                                    <td><input type="text" name="txtLastName"  value="dummy"></td>

                                          </tr>

                                          <tr>

                                                    <td>Email</td>

                                                    <td><input type="text" name="txtEmail"  value="dummy"></td>

                                          </tr>

                                          <tr>

                                                    <td colspan="2"><input type="button" value="Add User" onClick="javascript:addUser();"></td>

                                          </tr>

                      </form>

            </cfwindow>

            <cfset ajaxOnLoad("init")>

            • 3. Re: Reference Error - cfgrid.js
              BKBK Adobe Community Professional & MVP

              Clay Hess wrote:

               

              Here is the code...

               


              <script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/toolbar/toolbar.js"></script>t

               

              This is unnecessary, as ColdFusion is configured to load the CFIDE scripts by default.

               

                  // create a new JS proxy object for the CFC

                  var dataproxy = new dataproxy();

                  dataproxy.setCallbackHandler(handleResult);

                 

                  function handleResult(response)

                  {

                      alert(response);

                  }

               

              I expected you to kick off with something like:

               

              <!--- Create client-side proxy for dataproxy CFC. --->

              <cfajaxproxy cfc="dataproxy" jsclassname="dataproxy">

               

              <html>

                  <head>

                      <script type="text/javascript">

                     

                          var getData = function(){

                              // create instance of the proxy

                              var dataproxy = new dataproxy();

                       

                              dataproxy.setCallbackHandler(handleResult);

                              dataproxy.setErrorHandler(myErrorHandler);

                              dataproxy.getData();

                          }

                       ...

                   etc., etc. 

                  </script> 

                  </head>

              ...

              ...

              </html>

               

              I strongly recommend the livedocs on cfajaxproxy, which has a fully worked out example.