Home/ Questions/Q 1046265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:07:11+00:00

In a Rails app, I am loading a partial via an ajax call. (still

  • 0

In a Rails app, I am loading a partial via an ajax call. (still using prototype)

The partial is a form that contains a textarea enriched with the yahoo yui_editor (similar to tinyMCE or FCKEditor)

<%= f.text_area :body, :class => 'rich_text_editor',  :rows => "15", :style => "width : 90%;"  %>

The yui_editor is not loaded and the textarea content is displayed as simple text when the form is loaded via an ajax call.

I tested that the yui_editor is active when the same partial is loaded directly without any ajax calls.

I know this has to do with the fact that the yui_editor javascript is not loaded but I have no idea how to solve this issue

Your help will be very much appreciated

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to start the YUI editor. Since the editor needs the id of the element, you need to specify a unique id in your partial.

    See the YUI doc for more on the editor’s parameters

    Added

    Are you adding the div via Ajax? In that case, you need to make the call to the YUI editor library after the div is added. Two ways to do that:

    1) Your code which does the insert into the dom (with the results of the Ajax call) needs to explicitly call the YUI editor. Eg your Ajax results could include the element id of the text area, you could already know it in advance, etc.

    2) You could include the script for calling the YUI editor in your Ajax results. But then you’ll need to run the script(s) in the html after you’ve added them to the dom.

    Setting innerHTML property of an element does NOT run any scripts in the html. But I have a script which does, see below.

    The script is based on this SO Question

    ... do ajax call and get results in <body>
foo_el.innerHTML = body; // add results to the dom

exec_body_scripts(foo_el); // run any scripts in foo_el

//////////////////////////////////

function exec_body_scripts(body_el) {
  // Finds and executes scripts in the dialog's body.
  // Needed since innerHTML does not run scripts.
  // NB: Only looks for scripts that are children or grandchildren of body_el.
  // Doesn't look deeper.  

  function evalScript(elem) {
    var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
        head = document.getElementsByTagName("head")[0] ||
               document.documentElement,
        script = document.createElement("script");

    script.type = "text/javascript";
    try {
      script.appendChild(document.createTextNode(data)); // doesn't work on ie
    } catch(e) {
      // IE has funky script nodes
      script.text = data;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);
  };

  // main section of function
  var scripts = body_el.getElementsByTagName('SCRIPT'), i;

  for (i = 0; scripts[i]; i++) {
    evalScript(scripts[i]);
  }
};

    Partial example:

    <% el_id = "rte_#{foo.id}"
# foo is the name of an object used by the partial. Using its id
# to ensure a unique id for the element on the page.
# Or use a simple counter "i". But in any case, the el_id must be unique
%>
<%= f.text_area :body, :class => 'rich_text_editor',  :rows => "15", 
    :style => "width : 90%;", :id => el_id  %>

<script>
  (function() {
    var myEditor = new YAHOO.widget.Editor('<%= el_id %>', {
      height: '300px',
      width: '522px',
      dompath: true, //Turns on the bar at the bottom
      animate: true //Animates the opening, closing and moving of Editor windows
      });
    myEditor.render();
  })();    
</script>
    • 0