thr3ads.net - Rails spinoffs - IPE: element.style has no properties (getStyle) [Apr 2007]

If this information is useful, please help other people find it:
Share via:

Tom V.

2007-Apr-26 16:58 UTC

IPE: element.style has no properties (getStyle)

Hi,

my project (and problem) in a nutshell:
the user is able to click a file system tree to select files.
The content of those files is shown in a multi-tabbed pane.
For each tab I want to create an IPE for editing the file.
So I need unique IDs for each tab and IPE.

my partial:

<script type="text/javascript">
  var contents = "<%= escape_javascript(h file_contents) %>";
  var preId = now.getTime();     // Date Obj now defined in default
layout
  document.getElementById(tabbedIPEId).innerHTML = "<pre
id=\""+preId
+"\" class=\"sourcecode\"
onclick=\"createEditor\("+preId+"\)
\">"+contents+"<\/pre>";
</script>

''tabbedIPEId'' is a unique ID for each tab opened (i.e.
''filename.rb'').
the JS-function for the IPE makes use of the ''preId''-value:

function createEditor(preId) {
  //...
  var editor = new Ajax.InPlaceEditor(preId,
''<%escape_javascript(url_for({ :action =>
"save_file"}))%>'', {okText...
  //...
}

Opening tabs just works fine, for each file I get the following html
(simplified):

<div id="filename.rb" class="classXYZ"
style="display: block;">
  <pre id="1177515282765" class="sourcecode"
onclick="createEditor(1177515282765)">...file
contents...</pre>
</div>

But when I click the <pre>-tag, Firebug yells at me:

element.style has no properties
getStyle(1177515282765, "backgroundColor")prototype.js (line 1536)
initialize(1177515282765, "/ide/save_file", Object okText=save
cols=164 rows=11)controls.js (line 519)
create()prototype.js (line 34)
createEditor(1177515282765)5 (line 73)
onclick(click clientX=0, clientY=0)5 (line 1)

[Break on this error] var value = element.style[style];
http://prototypejs.org/api/element/getStyle

Does it mean that the <pre>-tag has no properties?>From looking at the generated html-code I would say it does...Or does it have to do with "innerHTML"?
What am I missing..?

Cheers,
  Tom.


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Walter Lee Davis

2007-Apr-26 18:05 UTC

head link

Re: IPE: element.style has no properties (getStyle)

Ids are not allowed to begin with numbers. I think that''s your whole 
issue here.

Walter

On Apr 26, 2007, at 12:58 PM, Tom V. wrote:
>
> Hi,
>
> my project (and problem) in a nutshell:
> the user is able to click a file system tree to select files.
> The content of those files is shown in a multi-tabbed pane.
> For each tab I want to create an IPE for editing the file.
> So I need unique IDs for each tab and IPE.
>
> my partial:
>
> <script type="text/javascript">
>   var contents = "<%= escape_javascript(h file_contents)
%>";
>   var preId = now.getTime();     // Date Obj now defined in default
> layout
>   document.getElementById(tabbedIPEId).innerHTML = "<pre
id=\""+preId
> +"\" class=\"sourcecode\"
onclick=\"createEditor\("+preId+"\)
> \">"+contents+"<\/pre>";
> </script>
>
> ''tabbedIPEId'' is a unique ID for each tab opened (i.e.
''filename.rb'').
> the JS-function for the IPE makes use of the
''preId''-value:
>
> function createEditor(preId) {
>   //...
>   var editor = new Ajax.InPlaceEditor(preId, ''<%>
escape_javascript(url_for({ :action =>
"save_file"}))%>'', {okText...
>   //...
> }
>
> Opening tabs just works fine, for each file I get the following html
> (simplified):
>
> <div id="filename.rb" class="classXYZ"
style="display: block;">
>   <pre id="1177515282765" class="sourcecode"
> onclick="createEditor(1177515282765)">...file
contents...</pre>
> </div>
>
> But when I click the <pre>-tag, Firebug yells at me:
>
> element.style has no properties
> getStyle(1177515282765, "backgroundColor")prototype.js (line
1536)
> initialize(1177515282765, "/ide/save_file", Object okText=save
> cols=164 rows=11)controls.js (line 519)
> create()prototype.js (line 34)
> createEditor(1177515282765)5 (line 73)
> onclick(click clientX=0, clientY=0)5 (line 1)
>
> [Break on this error] var value = element.style[style];
> http://prototypejs.org/api/element/getStyle
>
> Does it mean that the <pre>-tag has no properties?
>> From looking at the generated html-code I would say it does...
> Or does it have to do with "innerHTML"?
> What am I missing..?
>
> Cheers,
>   Tom.
>
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Tom V.

2007-Apr-29 14:30 UTC

head link

Re: IPE: element.style has no properties (getStyle)

Hi Walter,

of course you are right!
I should get used to reading standards...
There also was a problem with escaping single and double quotes.
I managed to solve that (cost me another two dents...),
however the next problems show up:

(1) concerning my "file_contents" partial:

Earlier you told me to separate <pre>-Tag from actual partial-content:
> You may have to change where exactly your partial goes, and where the
> editor goes. The issue, as I see it, is that your partial is emitting
> the same id it is supposed to be replacing the *contents* of.
> Try doing it this way, and see if that helps.
> <pre id="xyz" onclick="activateEditor()">
>   (partial creates this bit) some gnarly text here (/partial)
> </pre>
At that time it worked.
But now I need to be able to assign dynamic id values to the <pre>-
tag.
So I use JS to be able to do that.
My partial looks like this:

<script type="text/javascript">
  var jsVerOfFileContents="<%= escape_javascript(file_contents)
%>";
  var now=new Date();
  preId="id_"+now.getTime();
  document.getElementById(tabbedInPlaceEditorId).innerHTML     "<div
id=\""+preId+"\" class=\"ruby\"
onclick\"createEditor(\''"+preId+"\'')\">"+jsVerOfFileContents+"<\/div>";
</script>

When I activate the IPE, inside the <textarea> there are some
whitespaces first
and then the actual file contents follows.
I assume that has to do with the javascript.
Because of the dynamic ids I cannot move this part into my layout - or
can I?
Is there any other way to get around this?
Like deleting those whitespaces before the textarea is actually shown?

(2) a new IPE for each click...

When I want to activate the IPE for the <pre> tag,
I need to click twice to make the IPE appear.

Before clicking the respective html looks like this (simplified):

<div id="fileXYZ.rb" class="DHTMLSuite_paneContentInner"
style="display: block;">
    <div id="id_1177856473589" class="ruby"
onclick="createEditor(''id_1177856473589'')">
    </div>
</div>

clicking ONCE adds ''title'' +
''background-color'' to the inner div:

<div id="id_1177856473589" class="ruby"
onclick="createEditor(''id_1177856473589'')"
    title="Click to edit" style="background-color: transparent;
background-image: none;">

clicking a second time a <form> tag is added and the textarea is
shown:

<div id="fileXYZ.rb" class="DHTMLSuite_paneContentInner"
style="display: block;">
    <form id="id_1177856626107-inplaceeditor"
class="inplaceeditor-
form">
        <textarea class="editor_field" name="value"
rows="21"
cols="165"/>
        <br/>
        <input class="editor_ok_button" type="submit"
value="save"/>
        <a class="editor_cancel"
href="#">cancel</a>
    </form>
    <div id="id_1177856626107" class="ruby"
onclick="createEditor(''id_1177856626107'')"
        title="Click to edit" style="background-image: none;
background-color: rgb(255, 255, 255); display: none;">
    </div>
</div>

Clicking "cancel" closes the textarea.
But when I click <pre> again (once!),
two identical IPEs appear underneth eachother.

<form id="id_1177856796715-inplaceeditor"
class="inplaceeditor-form">
<form id="id_1177856796715-inplaceeditor"
class="inplaceeditor-form">

Doing this again and again adds a new IPE for each click on the <pre>
tag...
The function for creating the IPE is located inside my default layout:

function createEditor(preId) {
  var editor = new Ajax.InPlaceEditor(preId, ''url/to/
save_function''...)
  var bak = editor.createEditField;
  editor.createEditField = function() {
    bak.apply(this, arguments);
    Event.observe(this.editField, ''focus'', function(ev) {
      if (this.setSelectionRange) {
        setTimeout(function () {
          this.setSelectionRange(0, 0);
        }.bind(this), 10);
      } else {
        if (this.createTextRange) {
          var range = this.createTextRange();
          range.collapse(true);
          range.moveEnd(''character'', 0);
          range.moveStart(''character'', 0);
          range.select();
        }
      }
    }.bindAsEventListener(this.editField)
    );
  };
}

My guess is that I have to separate creation of the IPE and its
''activation''.
Am I sort of right..?

Thanks for your help and patience!
Tom.


On Apr 26, 8:05 pm, Walter Lee Davis
<w...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org>
wrote:> Ids are not allowed to begin with numbers. I think that''s your
whole
> issue here.
>
> Walter
>
> On Apr 26, 2007, at 12:58 PM, Tom V. wrote:
>
>
>
> > Hi,
>
> > my project (and problem) in a nutshell:
> > the user is able to click a file system tree to select files.
> > The content of those files is shown in a multi-tabbed pane.
> > For each tab I want to create an IPE for editing the file.
> > So I need unique IDs for each tab and IPE.
>
> > my partial:
>
> > <script type="text/javascript">
> >   var contents = "<%= escape_javascript(h file_contents)
%>";
> >   var preId = now.getTime();     // Date Obj now defined in default
> > layout
> >   document.getElementById(tabbedIPEId).innerHTML = "<pre
id=\""+preId
> > +"\" class=\"sourcecode\"
onclick=\"createEditor\("+preId+"\)
> > \">"+contents+"<\/pre>";
> > </script>
>
> > ''tabbedIPEId'' is a unique ID for each tab opened
(i.e. ''filename.rb'').
> > the JS-function for the IPE makes use of the
''preId''-value:
>
> > function createEditor(preId) {
> >   //...
> >   var editor = new Ajax.InPlaceEditor(preId, ''<%> >
escape_javascript(url_for({ :action =>
"save_file"}))%>'', {okText...
> >   //...
> > }
>
> > Opening tabs just works fine, for each file I get the following html
> > (simplified):
>
> > <div id="filename.rb" class="classXYZ"
style="display: block;">
> >   <pre id="1177515282765" class="sourcecode"
> > onclick="createEditor(1177515282765)">...file
contents...</pre>
> > </div>
>
> > But when I click the <pre>-tag, Firebug yells at me:
>
> > element.style has no properties
> > getStyle(1177515282765, "backgroundColor")prototype.js (line
1536)
> > initialize(1177515282765, "/ide/save_file", Object
okText=save
> > cols=164 rows=11)controls.js (line 519)
> > create()prototype.js (line 34)
> > createEditor(1177515282765)5 (line 73)
> > onclick(click clientX=0, clientY=0)5 (line 1)
>
> > [Break on this error] var value = element.style[style];
> >http://prototypejs.org/api/element/getStyle
>
> > Does it mean that the <pre>-tag has no properties?
> >> From looking at the generated html-code I would say it does...
> > Or does it have to do with "innerHTML"?
> > What am I missing..?
>
> > Cheers,
> >   Tom.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Walter Lee Davis

2007-Apr-29 15:16 UTC

head link

Re: IPE: element.style has no properties (getStyle)

I am not following your code all that clearly this morning. Are you 
assigning the IDs in JavaScript or in Ruby?

Advice, in no particular order:

Have a read through the example related to getting a Textile/Markdown 
formatted DIV to work correctly with the IPE -- that''s where I went to 
look for clarity. And once I had that part working, the rest just 
worked.

Dynamically creating an editor as needed is just an implementation 
detail, it should not be central to your design. See if you can get it 
to all work long-hand, with a separate JS block after each thing you 
want to be able to edit creating an editor you may or may not need. If 
you are doing this with a lot of items on a page, it may make the whole 
thing unstable or suck memory like a pig, but for testing purposes it 
should get you started.

Once you have everything editing the way you want it to, then add the 
layer of "unobtrusive" IPE using a page listener to start a loop that 
adds a per-item listener. Then delete your separate JS blocks and see 
if it all still works.

There are some Prototype functions that clean out extraneous white 
space, you might want to have a look at those in your travels. But you 
might also want to fill the edited div and your database back in using 
a trim()med version of the IPE output to the same effect.

Walter

On Apr 29, 2007, at 10:30 AM, Tom V. wrote:
> My guess is that I have to separate creation of the IPE and its
> ''activation''.
> Am I sort of right..?
>
> Thanks for your help and patience!
> Tom.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Tom V.

2007-Apr-30 17:30 UTC

head link

Re: IPE: element.style has no properties (getStyle)

Hi Walter,
> I am not following your code all that clearly this morning.I don''t blame you, its a bunch of crap...
> Are you assigning the IDs in JavaScript or in Ruby?Actually I did it in JavaScript.

But I made a turn and now use inline rendering...
I guess this makes me quite an MVC-violator
but at least it solves my first problem
(no more whitespaces at the beginning, no tags inside textarea etc.).

The action for grabbing file paths and getting file output ready
now does not use a partial anymore but uses this line (simplified):

(1) using "onclick=" + JavaScript function:

render :inline => "<%= ''<div
id=\"''+timestamp+''\" class=\"ruby\"
                       onclick=\"createEditor()\">
                      
''+file_contents+''</div>''%>",
                       :locals => {:timestamp => ts,
                                   :file_contents =>
                            _get_file_contents(file_path,convert)}

So now I get dynamic IDs for each file/<div>.
However, problem no. 2 from last time still exists:

- Clicking once on the html-stuff created by above code
only adds ''title'' + ''background-color'' to
the div.
- Clicking once again makes the textarea appear.
- Closing it and clicking one more time creates two textareas and so
on.

When I omit JavaScript and use a plain old Rails in_place_editor,
this phenomenon does not appear:

(2) using JavaScriptMacrosHelper::in_place_editor:

render :inline => "<%= ''<div
id=\"''+timestamp+''\" class=\"ruby\">
                       ''+fcontents+''</div>''
                        + in_place_editor(timestamp,
                        :url => url_for({:action =>
\"save_file\"}),
                        :load_text_url => url_for({:action => ...

However I then miss the ability to assign user specific values
for ":rows" and :"cols" (using screen resolution etc.)
and of course the possibilty to prevent this "all text selected" thing
inside the textarea.
This is quite important so I would hate to miss it...

The JavaScript function for creating the IPE looks like this:

function createEditor(preId,file_path) {
  var size = paneSplitter.getSizeOfPaneInPixels(''center'');
  var width = Math.round(size.width * 0.12);
  var height = Math.round(size.height * 0.053);
  var editor = new Ajax.InPlaceEditor(preId, file_path);
  var bak = editor.createEditField;
  editor.createEditField = function() {
    bak.apply(this, arguments);
    Event.observe(this.editField, ''focus'', function(ev) {
      if (this.setSelectionRange) {
        setTimeout(function () {
          this.setSelectionRange(0, 0);
        }.bind(this), 10);
      } else {
        if (this.createTextRange) {
          var range = this.createTextRange();
          range.collapse(true);
          range.moveEnd(''character'', 0);
          range.moveStart(''character'', 0);
          range.select();
        }
      }
    }.bindAsEventListener(this.editField)
    );
  };
}

I deeply hope I explained my struggling well enough
so you might have a clue...

Thanks in advance,
Tom.
>
> Advice, in no particular order:
>
> Have a read through the example related to getting a Textile/Markdown
> formatted DIV to work correctly with the IPE -- that''s where I
went to
> look for clarity. And once I had that part working, the rest just
> worked.
>
> Dynamically creating an editor as needed is just an implementation
> detail, it should not be central toyourdesign. See if you can get it
> toallwork long-hand, with a separate JS block after each thing you
> want to be able to edit creating an editor you may or may not need. If
> you are doing this with a lot of items on a page, it may make the whole
> thing unstable or suck memory like a pig, but for testing purposes it
> should get you started.
>
> Once you have everything editing the way you want it to, then add the
> layer of "unobtrusive" IPE using a page listener to start a loop
that
> adds a per-item listener. Then deleteyourseparate JS blocks and see
> if itallstill works.
>
> There are some Prototype functions that clean out extraneous white
> space, you might want to have a look at those inyourtravels. But you
> might also want to fill the edited div andyourdatabase back in using
> a trim()med version of the IPE output to the same effect.
>
> Walter
>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Tom V.

2007-May-01 09:35 UTC

head link

Re: IPE: element.style has no properties (getStyle)

Ok, I got it working now but it''s reeeally ugly.

all file contents rendering, dynamic ID assignment
and JS functionality is done using inline rendering.

Often you need to use local variables to be able to use quotations.
For example:

# Ruby
render :inline =>
             "<%= ''<div
id=\"''+timestamp+''\" class=\"ruby\">
                 ''+fcontents+''
               <\/div>
               <script type=\"text\/javascript\">
                   var editor = new Ajax.InPlaceEditor(id,
''+url_w_quotes+'', {
                   //...
                   };
               <\/script>''%>",
               :locals => {:url_w_quotes =>
"\''/url/to/file\''" }


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Apr 2007 - IPE: element.style has no properties (getStyle)

IPE: element.style has no properties (getStyle)

Re: IPE: element.style has no properties (getStyle)

Re: IPE: element.style has no properties (getStyle)

Re: IPE: element.style has no properties (getStyle)

Re: IPE: element.style has no properties (getStyle)

Re: IPE: element.style has no properties (getStyle)