How to use remoteFunction inside a .js file in grails

Question

I have requirement, that whenever i click on a day(in a fullcalendar) i need to throw a pop up with details. I need to trigger an action/controller to get the details. I have my event.click in my .js file. I have been trying to use remoteFunction inside my full calendar jquery. But grails is not recognizing remoteFunction call and my screen is going awry (because of unavailability of .js template). Please help me out if possible,

$(calId[calNo]).fullCalendar({
            header : {
                left : ' ',
                center : 'title',
                right : ' '
            },  
            defaultView: 'month',
            selectable: true,  
            weekMode : 'variable',      
            eventColor : 'white',
            editable : false,
            year : eventYr,
            month : calNo,
            events : allocData, 

            dayRender: function (event, element, view) {                        

                for (i = 0, l = holidayData.length; i < l; i++) {
                    var dateString = holidayData[i].substring(0,10);
                    view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FF9999');
                    view.element.find('.fc-other-month').css('background-color', '#FFFFFF');                  
                }              
            },
            eventRender: function(event, element, view)
            {
               if(event.start.getMonth() !== view.start.getMonth()) { return false; }
            },
            eventClick: function(event) { 
                  var selectedDate = String(event.start);                 
                  var newData = ${remoteFunction(controller: 'PreSchedule', action: 'calProcess')};
                    alert(newData);
                  $('#dateAllocation #selectedDate').text(String(selectedDate).substring(0,10) + ' ,' + String(selectedDate).substring(28,33));     
                  $('#dateAllocation').modal('show');
            },
            select: function(date) { 
                  var selectedDate = date;                 
                  $('#dateAllocation #selectedDate').text(String(selectedDate).substring(0,10) + ' ,' + String(selectedDate).substring(28,33));     
                  $('#dateAllocation').modal('show');   

            }


        });

May be i am mixing server side code and client side code, messing up with basics. Thanks in advance.

Instead of using remotefunction, i tried using jquery.ajax/ createLink. But the url is not getting resolved.

  $("#link").click(function(event){
           alert('link');
           event.preventDefault();
           date = '1985-01-01';
           $.ajax({
               url:'${createLink(controller:"Student",action:"checkLink")}',
             //  url:'/checkLink',
                dataType: 'json',
                type: 'POST',
                //data: date,                                       
                success: function() {
                    console.log("The returned data is: ");
                    // show your modal, or do whatever you want.
                }
           });

I can see the error in browser developer tools

Failed to load resource: the server responded with a status of 404 (Not Found)

//smsFrontEnd/student/$%7BcreateLink(controller:%22Student%22,action:%22checkLink%22)%7D

if possible, please help me out

Answer 1

I don't think you would be able to use grails ajax tag libs in .js files.

However, adding to this these taglibs are deprecated and you should not be using them anyway. As this is not considered to be a good practice

http://grails.org/doc/latest/ref/Tags/remoteFunction.html

The formFunction tag and other Ajax related tags have been deprecated and will be removed from a future version of Grails. Applications may provide their own Ajax tags and/or Javascript plugins may provide Ajax tags of their own. 

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

I think you are better of using jquery.Ajax instead of remoteFunction there.

Answer 2

If your controller is returning JSON data you can fetch and use it as follows:

Instead of:

var newData = ${remoteFunction(controller: 'PreSchedule', action: 'calProcess')};
alert(newData);

Use the jQuery $.ajax method:

$.ajax({
    dataType: 'json',
    url: '${createLink(controller: 'preSechedule', action: 'callProcess')}',
    data: {}, // no parameters
    success: function(data) {
        window.alert("The returned data is: "+data);
        // show your modal, or do whatever you want.
    }
});