I would like to use Ujs in my rails 3 app.
Can any one explain me about obtrusive and unobtrusive javascripts in rails?
why does rails 3 before versions don't support ujs ?
Rails has had javascript helpers since early versions.
The difference since Rails 3 is that now it's unobtrusive, by unobtrusive it means that functionality its separated from content.
For example the following:
<%= link_to "Delete", resource_path(#resource), :method => "delete", :confirm => "Are you sure?" %>
Would render pre Rails 3
Delete
With Rails 3 UJS
Delete
The difference is that unobtrusive javascript is handled without inline code in the views and passed through the "data" attributes and taken care of in the background with other default JS that is in your app that picks up this data attributes and runs the corresponding JS code.
UJS is also commonly used for making remote (AJAX) calls using :remote => "true" or link_to_remote.
More info on that here: AJAX on Rails
Basically UJS means that the javascript helpers included in Rails such as confirmation, and AJAX, among others are separated from the view code (HTML).
UJS helpers can also be easily switched out for example if you prefer to use Prototype you could switch easily from jQuery while keeping the helpers functionality.
Why Rails older versions didn't support UJS, is because it just wasn't built in at the time, so it was done with inline JS.
Related
I've added modernizr-rails to my rails project, and it seems to load fine (I can access Modernizr in a debug javascript console). According to the documentation, I added the include tag to the html head section like so:
<%= javascript_include_tag :modernizr %>
But it seems to load after my application javascript file (app/assets/javascripts/app.js), causing any reference to it to fail.
It's a mostly fresh new rails project, is there anything I'm missing? Or am I meant to wait for the document loaded event before calling Modernizr anyway?
Oops, yes there was something missing. I had put the javascript_include_tag :modernizr code in my template, rather than the application layout (app/views/layouts/application), which defines the html head for all templates in the app.
Does anyone know of any bugs or other insight to explain why when using MVC4 with jquery mobile, any form that is created using Ajax.BeginForm results in the form being submitted twice to the controller.
I had originally thought that since I am using the js bundling that the same js file might have been being included twice and might be triggering on form submit, however thats not the case, my list of js files are:
jquery-1.6.4.js
jquery-ui.1.8.11.js
jquery.mobile-1.1.0.js
jquery.unobtrusive-ajax.js
jquery.validate.js
knockout-2.0.0.js
MicrosoftAjax.js
MicrosoftMvcAjax.js
MicrosoftMvcValidation.js
Modernizr.js
Within the project Ajax is fully enabled for everything i.e. i'm not disabling anything through mobileinit.
I have not posted any form code because it literally happens with every form - a form with one field and a submit button will cause the submission twice - but only where Ajax.BeginForm is being used.
Html.BeginForm doesn't exhibit any of these problems.
I've been stuck on this for a few days now so any help would be greatly appreciated
jQuery Mobile by default hi-jacks any form submission and performs its own AJAX request. To stop this behavior you can place the data-ajax="false" attribute on any <form> tag. Also make sure to stop the regular behavior of the form so it doesn't submit normally, something like:
$('#my-form').on('submit', false);
Docs: http://jquerymobile.com/demos/1.1.0/docs/forms/forms-sample.html
You could also just use the built-in jQuery Mobile AJAX rather than including extra JS for it. Which would only require you to make the action attributes of the forms to the server-side file to which they posts.
I have a legacy application using CakePHP 1.1.6 and I am updating it. I have an ajax form submission which updates a div after a series of ajax requests. All is working well until I want to return to the main menu page of the app. I can't figure how to get out of the ajax layout with the final redirect into the default layout on the menu page.
I've tried various methods of overwriting the redirect() method without success. Has anyone managed this in v1.1.6?
Thanks.
By "AJAX layout" is suspect you simply mean a URL prefix or something of that kind.
E.g. all URLs like /ajax/foo/bar are displayed with an AJAX layout,
and a simple redirect(array('action' => 'baz')) generates /ajax/foo/baz.
It kind of depends on how your routes are set up, but usually you just set the specific prefix to false:
$this->redirect(array('ajax' => false, 'controller' => 'normal', 'action' => 'home'));
I am having problems setting rjs up and I don't know the right way to code this for rails 2.3.14
Are they (link_to_remote and link_to with :remote > true) the same or do they reflect rails versions or are they in fact different?
I am using prototype, as required by my company (so jquery is not an option).
I also see that there is link_to_function so I am really not sure what the right approach is!
link_to :remote => true is a Rails 3 convention and doesn't work in Rails 2. Since you are using Rails 2.3 you'll want to use link_to_remote for ajax calls.
link_to_function is used for when you want some javascript to run when a link is clicked and not necessarily an ajax call to the server. Stuff like showing/hiding elements on a page.
For 90% of my site the standard MVC annotation with client script method is working a treat. But I have a form on the site that is quite complicated with multiple instances of dynamic form content dependant on answers to questions etc.
If I have the unobtrusive script included on the page, it's capturing the form submit and not allowing my custom jquery validate to validate the form.
I don't really want to refactor the site to have a seperate layout to remove the script when it's not needed. I wondered if there was an easy way to give control back to my custom validate script.
Any help would be great.
In your view you can disable client side validation like this
Html.ViewContext.ClientValidationEnabled = false