MarkUs Blog

MarkUs Developers Blog About Their Project

Archive for the ‘ajax’ tag

Rails, AJAX, Back Buttons, and Bookmarks

with one comment

Markus’s submission page uses AJAX to grab the next or previous page of the table of submissions. However, this breaks bookmarks and the back button. So the goal is to do something similar to gmail. They update everything after the anchor (#) in the URL. Here is what we can do with Markus with Ruby on Rails, to do the exact same thing.

My examples are only going to cover the implementation of the Next > button. However, this can apply to any AJAX link.

The part of code that generates the Next link is in:
_initial_paginate_links.html.erb:


<%= link_to_remote "Next >", :url => {
:action => 's_table_paginate',
:id => assignment.id,
:filter => filter,
:page => current_page + 1,
:per_page => per_page,
:sort_by => sort_by
},
:before => "ap_thinking_start();",
:complete => "ap_thinking_stop();" %>

When the page loads it generates:


<a onclick="ap_thinking_start();; new
Ajax.Request('/main/submissions/s_table_paginate/1?filter=none&amp;amp;amp;page=3&amp;amp;amp;per_page=30&amp;amp;amp;sort_by=group_name',
{asynchronous:true, evalScripts:true,
onComplete:function(request){ap_thinking_stop();},
parameters:'authenticity_token=' +
encodeURIComponent('hjLTZo+xwhfYVOjA6E6Cbt3mm0SoaJw3t+nQG9UF/iA=')});
return false;"
href="#">Next ></a>

However, we want the URL to update, so we need to get rid of the ” return false; ” at the end of onclick. I accomplished that by using link_to and the remote_function helpers that Rails provides.

_initial_paginate_links.html.erb:


<%= link_to "Next >", "#value=param",
: onclick =>
remote_function(
:url => {
:action => 's_table_paginate',
:id => assignment.id,
:filter => filter,
:page => current_page + 1,
:per_page => per_page,
:sort_by => sort_by
},
:before => "ap_thinking_start();",
:complete => "ap_thinking_stop();"
)
%>

Which generates:


<a onclick="ap_thinking_start();; new
Ajax.Request('/main/submissions/s_table_paginate/1?filter=none&amp;amp;amp;page=3&amp;amp;amp;per_page=30&amp;amp;amp;sort_by=group_name',
{asynchronous:true, evalScripts:true,
onComplete:function(request){ap_thinking_stop();},
parameters:'authenticity_token=' +
encodeURIComponent('hjLTZo+xwhfYVOjA6E6Cbt3mm0SoaJw3t+nQG9UF/iA=')});"
href="#value=param">Next ></a>

Notice that the return false is no longer there! If you try to click the Next &gt; button, then it will place #value=param at the end of the url without reloading the page.

Now all that remains is figuring out how to do this with an html form. For example drop downlists, with an onchange method that updates the page using AJAX but still appends #value=param to the end of the URL.

Cheers,
Joseph

Written by jmate

February 19th, 2010 at 9:05 pm

Posted in Developer Essentials

Tagged with , , , ,

Updating the URL with a href and #

without comments

You can put parameters into the URL with javascript. Here is an example html document:


<html>
<body>
<a href="#test=test">testing</a>
</body>
</html>

So with Markus’s submission browse page,  instead of having:


<span>
<a href="#" onclick="ajax stuff">Next </a>
</span>

We can have something like:


<span>
<a href="#<PARAMS GO HERE>" onclick="ajax stuff">Next </a>
</span>

However, that means with every AJAX call that flips the page on the table, will will also have to update all the links on the page as well.

Cheers,
Joseph

Written by jmate

February 15th, 2010 at 6:47 pm

Prototype/Ajax.Request -> Rails – The Plot Thickens Part 2

with one comment

Still no solution in sight.  I’ve tried creating a brand new Rails project, and the behaviour persists there as well.  I’m convinced it’s a problem with Rails though, and not a problem in my machine.

Let’s go over the facts again:

  • I have Rails 2.1.0 installed on an Ubuntu 8.04 Hardy Heron Tablet PC
  • I’m using a Postgres database on the OLM project
  • Using Prototype JS library V 1.6.0.1
  • We’re using Mongrel, not WeBRICK
  • Using Ajax.Request with the ‘POST’ method does not pass any parameters to the params hash in the target controller
  • It works with GET though!
  • When using POST, I can see the parameters if I inspect the request object – they’re in @parameters, which I cannot seem to access
  • POSTing seems to work on other computers, using the same OLM code checked out from the repository
  • I’ve tried a complete reinstall of Rails, with the same result

Maybe my uninstall assumption is wrong:  what’s the best way to completely purge Rails from my machine?  I essentially followed these steps before:

Thoughts from anybody?

Thanks,

-Mike

Written by m_conley

November 21st, 2008 at 3:04 am

Problems getting Prototype/Ajax.Request to talk to Rails

with 2 comments

I’m totally losing my mind over this problem, because it seems so simple, and yet I can’t seem to figure it out.

Here’s the situation:

I’ve begun linking up my Rubric Manager UI prototype to the Rails backend.  On this UI is a big “Save Changes” button, that implements all of the changes to the Rubric in one shot.  That button is linked to a Javascript function called save_changes.

Here is save_changes:

function save_changes() {
/* ....some code...*/
  new Ajax.Request('/checkmark/rubrics/modify',
  {
      method:'post',
      parameters: {authenticity_token: '<%=form_authenticity_token%>', key: 'value'},
      onSuccess: function(transport){
      console.log("Success");
  },
  onFailure: function(){ console.error('Something went wrong...') }
  });
/*...some more code...*/
}

So this seems alright to me.  I have to include the “authenticity_token” in my parameters because Rails seems to be using some type of internal request forgery protection.

When I click on “Save Changes”, however, Firebug tells me that the page I POSTED to threw an “InvalidAuthenticityToken” exception.  So that’s frustrating – I’m clearly passing the token in my parameters.  I created a tiny test form and POSTed to the same ‘modify’ method with the authenticity token as a hidden value, and it worked just fine.

So what gives?

Geofrey helped me get by the InvalidAuthenticityToken problem by inserting the authenticity_token variable into the URL string of the Ajax.Request target:

function save_changes() {
/* ....some code...*/
  new Ajax.Request('/checkmark/rubrics/modify?authenticity_token=43e5f5e3fbf3248b2a403f828010f8544ad36dbf',
  {
      method:'post',
      parameters: {key: 'value'},
      onSuccess: function(transport){
      console.log("Success");
  },
  onFailure: function(){ console.error('Something went wrong...') }
  });
/*...some more code...*/
}

But NOW, the parameter “key => value” isn’t being passed to the rails param map in the RubricsController.  I know this, because I inspect the param map in the Controller with the following code:

def modify
    render :text => params.inspect  
end

And here’s what is returned from the AJAX call:

{"authenticity_token"=>"43e5f5e3fbf3248b2a403f828010f8544ad36dbf", "action"=>"modify", "controller"=>"rubrics"}

So what’s going on?  Anyone.

-Mike

Written by m_conley

November 14th, 2008 at 12:41 am

Posted in Uncategorized

Tagged with , , , , ,