How could I check the value of an javascript object's attribute?
<div id="new_item_details" style="display:none"></div>
<%= link_to_function("Show details...", nil, :id => "show_details") do
page>
page.visual_effect(:toggle_blind, :new_item_details)
if (page[:new_item_details].style.visibility == "none")
<----------------------------------------???
page[:show_details].replace_html "Hide details"
else
page[:show_details].replace_html "Show details"
end
end %>
It tries to call style().visibility().== and this throws a javascript
error
short answer: you can't use a ruby if. you need to generate the
appropriate javascript yourself.
long answer: Conditional RJS explained - Space Vatican
Fred
Thanks Frederick!, the long answer is what I needed :), very useful
indeed.
I also tried to write a RJS partial embedding javascript, then render
it within the view, but
I only got an HTML page not rendered.
Well, as I realized I need to generate the javascript by myself, I've
written a RJS partial:
_toggle_details.rjs
page << "function toggle_details() {"
page.visual_effect :toggle_blind, 'new_item_details'
page << "if ($('new_item_details').style.display == 'none') {"
page['show_details'].replace_html "Hide details"
page << "else"
page['show_details'].replace_html "Show details"
page << "}"
then in my view (which is an .erb partial) I render it:
<script type="text/javascript">
<%= render :partial => 'toggle_details', :type => 'rjs' %>
</script>
But I don't get the page rendered fine, I only get the HTML as plain
text, but no errors. What am i doing wrong?
Well, as I realized I need to generate the javascript by myself, I've
written a RJS partial:
_toggle_details.rjs
page << "function toggle_details() {"
page.visual_effect :toggle_blind, 'new_item_details'
page << "if ($('new_item_details').style.display == 'none') {"
page['show_details'].replace_html "Hide details"
page << "else"
page['show_details'].replace_html "Show details"
page << "}"
then in my view (which is an .erb partial) I render it:
<script type="text/javascript">
<%= render :partial => 'toggle_details', :type => 'rjs' %>
</script>
But I don't get the page rendered fine, I only get the HTML as plain
text, but no errors. What am i doing wrong?
You're creating syntactically invalid javascript: the curly brace
you're opening on the if line is never closed.
Fred
Thanks again, but that's not the problem, because if I fix the syntax
error or leave the partial RJS file empty.
My fixed partial is:
page << "function toggle_details() {"
page.visual_effect :toggle_blind, 'new_item_details'
page << "if ($('new_item_details').style.display == 'none') {"
page['show_details'].replace_html "Hide details"
page << "} else {"
page['show_details'].replace_html "Show details"
page << "}"
page << "}"
but the page is not rendered fine. So I've chosen an easy solution,
I've written the function into application.js as javascript, and all
works fine now.
Thank you Frederick for your help!
Thanks again, but that's not the problem, because if I fix the syntax
error or leave the partial RJS file empty.
My fixed partial is:
page << "function toggle_details() {"
page.visual_effect :toggle_blind, 'new_item_details'
page << "if ($('new_item_details').style.display == 'none') {"
page['show_details'].replace_html "Hide details"
page << "} else {"
page['show_details'].replace_html "Show details"
page << "}"
page << "}"
but the page is not rendered fine. So I've chosen an easy solution,
I've written the function into application.js as javascript, and all
works fine now.
Hard to say without seeing what was inserted into the page, but if the
javascript that is created included " (which it probably does) then
crazy stuff would happen. Wrapping the render :partial in a
javascript_tag would probably have helped.
Fred
Yes, may be that double quotes broke the page. Anyway it's more clear
to have javascript in a javascript file :), but I was trying to do it
with RJS because
I'm not used to use it.
Although it already works fine into application.js, I've tried one
last attempt with RJS. My partial now is:
page << 'function toggle_details() {'
page.visual_effect :toggle_blind, 'new_item_details'
page << "if ($('new_item_details').style.display == 'none') {"
page['show_details'].replace_html 'Hide details'
page << '} else {'
page['show_details'].replace_html 'Show details'
page << '} }'
And the generated code is:
<script type='text/javascript'>
try {
function toggle_details() {
Effect.toggle("new_item_details",'blind',{});
if ($('new_item_details').style.display == 'none') {
$("show_details").update("Hide details");
} else {
$("show_details").update("Show details");
}
}
} catch (e) {
alert('RJS error:\n\n' + e.toString());
alert('function toggle_details() {\n
Effect.toggle(\"new_item_details\",\'blind\',{});\n
if ($(\'new_item_details\').style.display == \'none\') {\n
$(\"show_details\").update(\"Hide details\");\n
} else {\n
$(\"show_details\").update(\"Show details\");\n
}
}');
throw e }
</script>
but still doesn't render fine. Moreover, if I leave the partial empty
(nothing into the RJS), it doesn't work!!!
Although it already works fine into application.js, I've tried one
last attempt with RJS. My partial now is:
page << 'function toggle_details() {'
page.visual_effect :toggle_blind, 'new_item_details'
page << "if ($('new_item_details').style.display == 'none') {"
page['show_details'].replace_html 'Hide details'
page << '} else {'
page['show_details'].replace_html 'Show details'
page << '} }'
And the generated code is:
<script type='text/javascript'>
try {
function toggle_details() {
Effect.toggle("new_item_details",'blind',{});
if ($('new_item_details').style.display == 'none') {
$("show_details").update("Hide details");
} else {
$("show_details").update("Show details");
}
}
} catch (e) {
alert('RJS error:\n\n' + e.toString());
alert('function toggle_details() {\n
Effect.toggle(\"new_item_details\",\'blind\',{});\n
if ($(\'new_item_details\').style.display == \'none\') {\n
$(\"show_details\").update(\"Hide details\");\n
} else {\n
$(\"show_details\").update(\"Show details\");\n
}
}');
throw e }
</script>
but still doesn't render fine. Moreover, if I leave the partial empty
(nothing into the RJS), it doesn't work!!!
because of the try/catch stuff that's still there even if the partial
is empty.
The javascript_tag helper will wrap this in a CDATA section which
should make everything happy.
Fred
Although it already works fine into application.js, I've tried one
last attempt with RJS. My partial now is:
Forgot to say - I think this is absolutely the right way to go -
there's no point trying to shoehorn stuff into rjs which is more
easily written as just plain javascript. But it's always good to
understand why something didn't work.
Fred
