Rails 5 does not render when called from javascript/ajax

Rails
1

Hi Everyone,

I am having a problem getting Rails to render a page when it is called
from javascript/ajax. I posted a detailed question on StackOverflow but
no one has answered yet.(Rails 5 will not render POST made from
javascript)

Basically, I am doing a very simple ajax POST (also tried GET with same
results), the equivalent of: localhost:3000/lockout/2016-03-16.

The ajax request gets past routes.rb, and calls the appropriate method
in the controller. The controller processes it correctly (database is
updated, debug print statements show up in log, etc.) but it does NOT
render.

When I submit the same request manually from the browser (as a GET) it
again is processed correctly, but then it DOES render.

In all cases the log shows this (with times slightly different):

/Started POST “/lockout/2016-03-16” for 127.0.0.1 at 2016-03-06 13:05:22
-0500//
//Processing by LockoutsController#toggle as HTML//
/*
*
*
/Rendered lockouts/toggle.html.erb within layouts/application (0.6ms)//
//Completed 200 OK in 244ms (Views: 203.0ms | ActiveRecord: 11.4ms)/

In fact, the log shows identical entries from the original /Started
GET/POST/ line for all attempts at invoking the method, but only when
the URL is entered manually will the view render.

BTW, the ajax is called from fullcalendar’s dayClick event if that
helps. fullcalendar’s eventClick events DO render.

Does anyone have any ideas?

Thanks,

Don Z

2

On 6 March 2016 at 18:22, Donald Z. [email protected] wrote:

the controller. The controller processes it correctly (database is updated,
*
fullcalendar’s eventClick events DO render.

Does anyone have any ideas?

Can you show us the code you are you using to do the post?

Colin

3

On 6 March 2016 at 21:45, Donald Z. [email protected] wrote:

      minTime: "08:00:00",
        $.ajax({
          url: '/lockout/'+date.format(),
          type: 'post',
          dataType: "html",
          data: "&authenticity_token="+AUTH_TOKEN,
          success: function(){alert('SUCCESS');},

You are not doing anything with the response that comes back on
success. That should contain the data you are rendering in the
server.

Colin

4

On 03/06/2016 05:22 PM, Colin L. wrote:

     {
         // $.post('/lockout/'+date.format())

Colin

It always pays to have experts look at your code!

Changing:

success: function(){alert(‘SUCCESS’);}

to:

success: function(){window.location.reload(true);}

made the difference. It works now.

Thank you Colin,

Don

5

On 03/06/2016 02:57 PM, Colin L. wrote:

The ajax request gets past routes.rb, and calls the appropriate method in
Processing by LockoutsController#toggle as HTML
BTW, the ajax is called from fullcalendar’s dayClick event if that helps.
fullcalendar’s eventClick events DO render.

Does anyone have any ideas?
Can you show us the code you are you using to do the post?

Colin

Hi Colin,

Sure!

This is the whole thing (including alerts to let me know when clicks are
handled):

 <script>
   var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content');
   $(document).ready(function()
   {
     $('#calendar').fullCalendar(
     {
       minTime: "08:00:00",
       maxTime: "20:00:00",
       eventRender: function (event, element) {
         element.click(function() {});
       },
       eventClick: function(calEvent, jsEvent, view) {
         alert('Clicked on: ' + calEvent.format());
       },
       dayClick: function(date, jsEvent, view) {
         alert('You Clicked on: ' + date.format());
         // $.post('/lockout/'+date.format())
         $.ajax({
           url: '/lockout/'+date.format(),
           type: 'post',
           dataType: "html",
           data: "&authenticity_token="+AUTH_TOKEN,
           success: function(){alert('SUCCESS');},
           error: function()
           {
             alert('error posting date');
           }
         });
       },
       events:
       {
         url: '/populate_events',
         type: 'GET',
         error: function()
         {
           alert('there was an error while fetching events!');
         }
       },
       fixedWeekCount: false,
       header:
       {
         left:   'month,agendaWeek',
         center: 'title',
         right:  'today prev,next'
       }
     });
     $('#calendar').fullCalendar('option', 'aspectRatio', 2.2);
   });
 </script>

It’s not very complicated. The alert “You clicked on…” always occurs
when it is supposed to, and the alert(‘SUCCESS’) occurs immediately
thereafter.

The alert(‘error posting date’) only occured when I messed up the
routing, earlier in my development,

Thanks,

Don

6

On Sun, Mar 6, 2016 at 5:59 PM, Donald Z. [email protected] wrote:

   $(document).ready(function()
       },

You are not doing anything with the response that comes back on

to:

success: function(){window.location.reload(true);}

made the difference. It works now.

Thank you Colin,

Don

I’m rather curious, if what you want is a full page reload at that
point,
why you’re bothering using AJAX?

7

On 03/06/2016 07:41 PM, tamouse pontiki wrote:

        when clicks are
                   maxTime: "20:00:00",
                       url: '/lockout/'+date.format(),

made the difference.  It works now.

Thank you Colin,

Don

I’m rather curious, if what you want is a full page reload at that
point, why you’re bothering using AJAX?

Because I don’t know any other way to go from the fullcalendar
javascript event to the server. :’( . If you have a better approach,
please tell me how. It is never too late to learn something new (I’m 73
years old and started programming in the late 1950’s. I’ve been
learning a lot of new things since then :wink: ).

I would really like to process the dayclick event on the server, prompt
the user for a response, then reload the page. That implies that I need
to render html or json to do the prompting, then reload the page with
data conditioned on the user’s response. So far I haven’t been able to
do that.

Thanks

Don