Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

config.columns[:script].css_class = 'ace_script_editor' #501

Open
markmcdonald51 opened this issue May 6, 2016 · 3 comments
Open

config.columns[:script].css_class = 'ace_script_editor' #501

markmcdonald51 opened this issue May 6, 2016 · 3 comments

Comments

@markmcdonald51
Copy link

I seem to be having a bit of a problem setting the desired css class name to a textarea using AS:

config.columns[:script].options = { :cols => 80, :rows => 20}
 config.columns[:script].css_class = 'ace_script_editor'

It doesn't seem to be setting the css class (see attached).

Is there any known problem using this method?

screenshot from 2016-05-06 08 18 26

Also, if I wanted to set a jquery call for this page where would the best place be to do this for just an AS view?
If the below is called it will transform the textarea into a nice code editor!
$('.script-input').ace({ theme: 'twilight', lang: 'ruby' })

screenshot from 2016-05-06 08 32 24

Thanks in advance,
Mark

@scambra
Copy link
Member

scambra commented May 9, 2016

The class is added to li, in some cases someone may want to set styles for dt, dd or label, so it's more flexible to add class to li.
In your case, you can use this selector: '.ace_script_editor textarea'

@markmcdonald51
Copy link
Author

Hi Sergio.

Yeah, that works..but only if I put it into the javascript console. Doesn't this selector need to be in the page's eval for that new fame? If I put this:

$('.ace_script_editor textarea').ace({ theme: 'twilight', lang: 'ruby' })

in application.js it doesn't seem to activate it. Is there a way to insert javascript in the AS nested scaffold for a given controller?

Thanks in advance.
Mark

@scambra
Copy link
Member

scambra commented May 17, 2016

ActiveScaffold has some events which are triggered when something is added or replace, you can add listener for them and activate ace there.

https://github.com/activescaffold/active_scaffold/wiki/Javascript-Events-and-Customization

Events should be explained better on that page, but you can get the idea. There are three events:

  • as:action_success => action link is clicked and form/nested list is open (open form or list is inside action_link.adapter)
  • as:element_updated => something which was at page is replaced with new html (form updated because validations fail, form field changed, list refreshed, ...) event.target is the replaced element
  • as:element_created => new element is added (not by an action link), such as new subform record, new row added to list after create, event.target is the new element

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants