grails - using variable values in remoteFunction attributes

Question

[please start at comment to see where this problem is currently at, thanks. Hopefully fast/easy to read thru]

I've got a situation where I'm rendering a template, and the template has a javascript function that needs to send correct values to a controller action via a remoteFunction, e.g. below:

I get the alert and "call" into the controller fine when this function gets executed on the page, but it is not sending an id value (params doesn't contain an id). When I build the template, I provide the userId as a model parameter and I have verified that it makes it into the template fine (e.g. in a div).

I've tried a bunch of variants of the above but can't get it to work, e.g. using remoteFunction as a tag:

 var unused = ;

I also tried various flavors using the params attribute (which would be better), but after not getting that to work I thought I'd try just to get the id parameter working.

What am I doing wrong as I attempt to variably populate the remoteFunction attribute(s)?

Thanks

[project is on Grails 1.3.7]

-------------------------------- update per 1st/2nd comment -----------------------------------

Had no URL mappings for this controller, but removed the one I had for another controller. Also commented out the beforeInterceptor debug I had in this controller, namely:

  // def beforeInterceptor = [action: this.&debug]

  // def debug() {
  //  println "ACTION: ${actionUri}, PARAMS: ${params}"
  // }

I added in debug code to the top of my userByName action, namely:

 def userByName = {
    println "action: ${actionUri}, params: ${params}"

I also did 3 versions of the remoteFunction that is sent back from the controller in the template, with all 3 identical, except the second one uses a userId that is hard coded, instead of produced from a variable, namely:

 function updateOrderEntry() {
    alert("updating OrderEntries, 1st time");

    var unused = ${remoteFunction(action:'userByName', id:userId, params:[userId:userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("updating OrderEntries, 2nd time, THIS TIME WITH hardcoded id and param values");
    var unused = ${remoteFunction(action:'userByName', id:'4', params:[userId:'4'], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("updating OrderEntries, 3rd time, back to non-hard-coded values");
    var unused = ${remoteFunction(action:'userByName', id:userId, params:[userId:userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};
}

When this function is sent back to the browser (from the render template), the browser (Chrome, using its network debug) shows it receives:

   function updateOrderEntry() {
    alert("updating OrderEntries, 1st time");

    var unused = jQuery.ajax({type:'POST',data:{'userId': '4'}, url:'/nameIsInAppPropsFile/money/userByName/4',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

    alert("updating OrderEntries, 2nd time, THIS TIME WITH hardcoded id and param values");
    var unused = jQuery.ajax({type:'POST',data:{'userId': '4'}, url:'/nameIsInAppPropsFile/money/userByName/4',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

    alert("updating OrderEntries, 3rd time, back to non-hard-coded values");
    var unused = jQuery.ajax({type:'POST',data:{'userId': '4'}, url:'/nameIsInAppPropsFile/money/userByName/4',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;
}

All of these look identical to me. The updateOrderEntry() gets automatically invoked, and I see all 3 alerts as shown above. Correspondingly, at the server, I see the following debug output:

action: /money/userByName, params: [userId:null, action:userByName, controller:money]
action: /money/userByName, params: [userId:4, id:4, action:userByName, controller:money]
action: /money/userByName, params: [userId:null, action:userByName, controller:money]

The problem is, the userId or id is not getting set correctly (as seen at the server) in the 1st and 3rd remoteFunctions, not clear why that is. Something is different, just can't figure out what.

P.S. Results are the same using both Chrome and Firefox.

------ updated per comments 3 - 5 below --------------------------

Looking at Chrome in what it sends, the middle, good request looks like:

 Request URL:http://localhost:8080/nameIsInAppPropsFile/money/userByName/4
 Request Method:POST
 Status Code:200 OK
 Request Headersview source
 Accept:*/*
 Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
 Accept-Encoding:gzip,deflate,sdch
 Accept-Language:en-US,en;q=0.8
 Connection:keep-alive
 Content-Length:8
 Content-Type:application/x-www-form-urlencoded
 Cookie:JSESSIONID=F0FDCEE323A1834350E209A7C211E64D
 Host:localhost:8080
 Origin:http://localhost:8080
 Referer:http://localhost:8080/nameIsInAppPropsFile/money/transaction
 User-Agent:Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7
 X-Requested-With:XMLHttpRequest
 Form Dataview URL encoded
   userId:4

The 2 bad ones (note 1st and last lines, as well as ?) are:

 Request URL:http://localhost:8080/nameIsInAppPropsFile/money/userByName
 Request Method:POST
 Status Code:200 OK
 Request Headersview source
 Accept:*/*
 Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
 Accept-Encoding:gzip,deflate,sdch
 Accept-Language:en-US,en;q=0.8
 Connection:keep-alive
 Content-Length:11
 Content-Type:application/x-www-form-urlencoded
 Cookie:JSESSIONID=F0FDCEE323A1834350E209A7C211E64D
 Host:localhost:8080
 Origin:http://localhost:8080
 Referer:http://localhost:8080/nameIsInAppPropsFile/money/transaction
 User-Agent:Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.7 (KHTML, like Gecko)  Chrome/16.0.912.63 Safari/535.7
 X-Requested-With:XMLHttpRequest
 Form Dataview URL encoded
   userId:null

So, this shows what the browser is sending is different.

When, I hard coded the value I gave to the template, i.e. model: [...., userId: '4'], I got the same failed result. Before I was using: model: [...., userId: order.user.id], but I updated my debug output and confirmed even hard-coding the '4' here doesn't help.

UPDATE: Adding minimal Test Case that matches real code. Note: the real code is a page with 3 sections, the top is fixed, where a customer is selected; the middle section is updated with orders for that customer; and the bottom section shows the credit card transactions associated via the order, usually multiple ones (e.g. authorize, capture, void, etc). When the user does an action (e.g. void) in the bottom transaction section, not only does it need to update this section, but also the middle order section. I was trying to get the order section -- the "second div" -- to update by using a link/remoteFunction on the bottom transaction section, and in its onComplete handler, calling a Javascript function that would do a second remoteFunction, to cause the middle order section to update.

Below is a minimal test case where I am not able to reproduce the problem exactly, but interestingly found a different but related problem. It appears Grails (or somehow IntelliJ, my IDE), has problems with an id parameter specified in the remoteFunction, when it is inside of Javascript. When you run it, you'll see what I mean. Hopefully fast to copy in the code and run. Thanks.

---- some simple controller, no model needed ----

 class UiTestController {

   static allowedMethods = [save: "POST", update: "POST", delete: "POST"]

  def index = {
    println "rendering remoteTest"
    render(view: 'remoteTest')
  }

  def section1 = {
    println "action1 params: ${params}"

    render(template: 'remoteSection1', model: [id: params.id])
  }

  def section2 = {
    println "action2 params: ${params}"
    render(template: 'remoteSection2', model: [id: params.id])
  }
}

--- remoteTest.gsp --

 <%@ page contentType="text/html;charset=UTF-8" %>


   Remote
   



   click to update section 1
   

   1st Section to Update
   

   2nd Section to Update

---- _remoteSection1.gsp -----

  

 
     Section 1 updated, (id=${id}). Now, similar to real code, we
     update section 2

---- _remoteSection2.gsp -----

 

 

  
      Section 2 updated, (id=${id}). Now, similar to real code, we
      update section 2 again, and also section 1 with javascript updateSection1() function

FINAL UPDATE

Code is now working, reason for change is unknown. I had to go on to a few other tasks, and I have come back to this one with changes to my controller, and surprisingly things are working. Same Javascript calls as before. But I will quickly post it in case you see that there was some kind of mess up before:

-------------------------- Pertinent Javascript Code in _moneyEntries.gsp --------------------------

  function updateOrderEntry() {
    alert("Updating OrderEntries --  1st time");
    ${remoteFunction(action:'userByName', id:userId, update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 2nd time, THIS TIME WITH hardcoded id and param values");
    ${remoteFunction(action:'userByName', params:[id: '4'], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 3rd time, back to non-hard-coded values");
    ${remoteFunction(action:'userByName', params:[id: userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};

 }

---------------- What Google network view shows me -- entire response --------------





 
    Order # 1005 Merchant Transactions:
    (refresh order status)

    
        
        
            What Action?
            ID

            Date

            Transaction Type

            Result

            Amount

            Description

            Authorize.Net Transaction Id

            Authorize.Net Response Text

            Credit Card #

        
        
        

            

                
                   

                      none

                   


                13

                01-13-12 03:41 MST

                VOID OF previous authorization, ID 12

                
                        Approved

                NA

                Void: sfk .


                2168161109

                
                    This transaction has been approved.

                

            

            

                
                   
                   none
                   


                12

                01-13-12 03:41 MST

                AUTHORIZATION ONLY - then Voided in ID 13

                
                        Approved

                $11

                sfk .


                2168161109

                
                    This transaction has been approved.

                x9113

-------------------------- What the Debug output shows in the controller -----

 ACTION: /money/userByName, PARAMS: [id:8, action:userByName, controller:money]
 ACTION: /money/userByName, PARAMS: [id:4, action:userByName, controller:money]
 ACTION: /money/userByName, PARAMS: [id:8, action:userByName, controller:money]

So, I don't know why it is working now, and not before. But the updateOrderEntry() is the same. Perhaps you see something I did wrong before, in which case please let me know. Thanks again for all your help Tomasz, I learned a lot being able to debug with Google Chrome (thanks to your help).

Tomasz Kalkosiński · Accepted Answer

It rendered fine for me, Grails 2.0, I've set def userId = 7 and as you can see it appears in URL:

            function updateOrderEntry() {
                alert("updating OrderEntries");
                var unused = jQuery.ajax({type:'POST', 
                    url:'/controller/userByName/7',
                    success:function(data,textStatus)
                        {jQuery('#userOrderList').html(data);},
                    error:function(XMLHttpRequest,textStatus,errorThrown)
                        {jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}
            });;}

grails - using variable values in remoteFunction attributes

Answers (2)

Related Questions