Just my stuff

Sometimes the bottleneck is not the Database or the Application itself, but something between the client and the app. So it can be useful to track the load time with js on the client directly. This script measures the load time and then sends it back to the server with an AJAX GET request, so the server can save it somewhere.

<script Language="JavaScript">
var from_time = new Date();
from_time = from_time.getTime();

function benchmark_loading_time()
{
  var to_time = new Date();
  to_time = to_time.getTime();
  var msecs = (to_time - from_time);

  //submit the result
  var req = null;
  try { req = new XMLHttpRequest(); } catch(e) {}
  if (!req) try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
  if (!req) try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
  req.open("GET", '/benchmark_loading_time/?msecs=' + msecs + '&url=' + location.href, false);
  req.send(null);
}
</script>

<body onLoad="benchmark_loading_time()">

All right. The in_place_editor is gone from rails 2.0 as everyone knows, so now we need to install it as a plugin. No problem. But I needed something particular this time: On this site you can upload pictures and make them password protected. So I had the in_place_editor for the password, and right below it a link pointing to the picture with the password (if you sign up you can see it) like this:

[Picture is password protected:] (in_place_editor) verydifficultpassword
[Link to this picture with password:] click

When a user updates the password, I wanted the link to update as well.
To do it I had to call the in_place_editor with :script => true like this

<span>
Picture is password protected: 
<span id="picture_pass_prot">
<%=h @picture.password_protected||'-no-' %>
</span>
</span>

<span id="picture_pass_prot_url">
<% if @picture.password_protected %>
<%= render :partial => 'pic_pass_url' %>
<% end %>
</span>

<%= in_place_editor 'picture_pass_prot', 
    {:url => url_for (:action => 'update_password_protected', 
                      :id => @picture), 
    :script => true} %>

the pic_pass_url partial only renders the url for the password protected image.
The update_password_protected action looks something like this

    @picture = Picture.find(params[:id])
    @picture.password_protected = value
    @picture.save

and the update_password_protected.rjs looks like this

page[:picture_pass_prot].replace_html(@picture.password_protected)
page[:picture_pass_prot_url].replace_html :partial => 'pic_pass_url'

So we did 2 things now: we replaced 2 elements in the html, and one of them with a partial.
Oh… and to make this work on rails 2.0.x you actually have to patch the in_place_editor def in in_place_macros_helper.rb, adding the line

    js_options['clickToEditText'] = %('#{options[:click_to_edit_text]}') if options[:click_to_edit_text]
    #ADD THIS LINE HERE
    js_options['htmlResponse'] = !options[:script] if options[:script]
    function << (', ' + options_for_javascript(js_options)) unless js_options.empty?

because “rails’ “in_place_editor” doesn’t let you specify htmlResponse for the underlying Ajax.InPlaceEditor call, which needs to be set to false.” – see here for the details.
Ok… now finally we have our in_place_editor that updates two (or more) html elements using rjs.

Just my stuff

diffuse Search

Posts

Categories

links

Benchmark the load time of a page with Javascript

in_place_editor on rails 2.0 and rjs templates

include '*'