ansaurus

Question

yui_editor not loaded when loading the partial via an ajax call

Answer 1

+1 A:

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>

Larry K 2010-08-25 18:04:42

Larry, thanks a million. your partial example did the trick.However somehow I was unable to get the data that was entered in the text editor.Reading the YUI doc a bit further I found that you had to explicitly tell the editor to hand over the data to the parent form.For some unknown reason, just passing the handleSubmit parameter did not work. So I went manual withYAHOO.util.Event.on('somebutton', 'click', function() myEditor.saveHTML(); var html = myEditor.get('element').value;});see : http://developer.yahoo.com/yui/editor/#getdataA big thorn out of my side. Many thanks

Alexis Perrier 2010-08-28 07:28:01

I'm using rjs to load the div, here is my final rjs code to trigger the Editor and get the value back from the formpage << "var myEditor = new YAHOO.widget.SimpleEditor('ThisIsTheEmailForm');"page << "myEditor.render();"page << "YAHOO.util.Event.on('SubmitSend', 'click', function() { myEditor.saveHTML(); var html = myEditor.get('element').value;});"where 'ThisIsTheEmailForm' is the id of the textarea and 'SubmitSend' is the id of the submit button

Alexis Perrier 2010-08-28 07:30:22

ansaurus

tags:

views:

answers:

yui_editor not loaded when loading the partial via an ajax call

related questions