jquery-mobile and stopping an ajax request in my rails app - jquery-mobile

I'm using JQuery mobile to build my rails app (ruby 2, rails 4).
Users can log in with Facebook:
<%= link_to "Log in with Facebook", user_omniauth_authorize_path(:facebook), class: "custom-btn" %>
It works fine when I disable JQuery mobile - when I comment out the line in my application.html.erb:
<%= javascript_include_tag "http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js" %>
But with jquery mobile being used I get the error, when I click the 'Log in with FB' button: 'error loading page'.
I think this is because a callback is being initiated to the FB site, which Jquery Mobile doesn't like, as ajax is used by default, and it wants everything to stay within my domain. So I'm trying to disable ajax for this request. In the jquery mobile support docs it says this can be done with:
data-ajax="false"
But what is the syntax for my button? I've tried lots of different things like:
<%= link_to "Log in with Facebook", user_omniauth_authorize_path(:facebook), class: "custom-btn", data-ajax: "false" %>
but it just gives me errors. Any ideas would be appreciated, thanks.

It's
"data-ajax" => "false"
as in:
<%= link_to "Log in with Facebook", user_omniauth_authorize_path(:facebook), "data-ajax" => "false", class: "custom-btn" %>
Although I did think => was deprecated in Rails 4.

Related

Hotwire breaks link_to rails

I recently added Hotwire to my rails app to update modals but this broke a link_to I had that redirected users to stripe. I looked online for ways to work around it but since Hotwire is relatively new, I couldn't find it. Does anyone have any recommendations on getting link_to to work with turbo stream?
There are three ways (at least) to restore default (non-Turbo) link behavior.
1: Set the data-turbo attribute to false.
<%= link_to "Click Here", path_helper_method, data: { turbo: false } %>
(or in plain html)
<a href="" data-turbo="false">
2: Set the target attribute.
<%= link_to "Click Here", path_helper_method, target: "_top" %>
(or in plain html)
<a href="" target="_top">
3: Move the link outside any Turbo frame. Any link inside a Turbo frame, without one of the above attributes, will be handled by Turbo by default (often with unexpected results).
If there is a link inside a turbo_frame_tag you can make it work as usual by implementing a special frame called _top that represents the whole page. Just add data: { turbo_frame: "_top" } to your link.
link_to "string", object, data: { turbo_frame: "_top" }
If the link is inside of a turbo_frame_tag with a turbo: true or turbo: true is set globally/on any of the parent elements, the link will act as turbo: true meaning it won't redirect you as it will try doing an ajax request. Try doing <%= link_to 'Woodoo', root_path, data: { turbo: false } %>
The helpers that turn link_to into remote invocations will not currently work with Turbo. Links that have been made remote will not stick within frames nor will they allow you to respond with turbo stream actions. The recommendation is to replace these links with styled button_to, so you'll flow through a regular form, and you'll be better off with a11y compliance.
#edit
use target: "_top" on the turbo_frame_tag to enable links within it
I faced the same problem but
I change this
<%= link_to "Create A Comment", new_model_post_comment_path(#model_post.id),method: :get%> </span>
to this and it worked for me
<%= link_to "Create A Comment", new_model_post_comment_path(#model_post.id)%> </span>

Form_tag link to page in another folder

I am integrating 2 rails projects using button to link the first project to the second. Now I have this code
<%= form_tag fast_url_for(' ') do %>
<%= button_to AppConfig.app_clockout %>
<% end %>
and my current directory is
/var/www/html/wizTime/wizProject/Source/project_1
but I don't know how can this redirect to the home page of another project. The directory of my second project that I want to integrate is
/var/www/html/project_2
Please give me ideas. Thank you!
If you only want a link_to and your projects will have domains later, you can just create a link like this in rails:
<%= link_to 'sec project', "http://www.rubyonrails.org/" %> which will create an ordinary html link: <a href=""http://www.rubyonrails.org/" ...>
The form usually should not link to another project?!
If after submitting the form you want to redirect the view to another project, than you can use the controller action and redirect after submit.
As the other commenter said - you can just create a link to the other domain. You should not ever rely on your directory-structure - because when you deploy, that directory structure will very likely be subtly different.
So use the domains instead.
You can even put the domains into environment variables so that you can use different domains (eg localhost:3000 vs localhost:3001) on your development machine. you'd use them like this:
<%= link_to 'My App', ENV['MY_APP_DOMAIN'] %>
<%= link_to 'My Other App', ENV['MY_OTHER_APP_DOMAIN'] %>
Then google for how to set environment variables on your local machine to set the values.
If you want them to be buttons... then you don't need to use a form. button_to creates its own form and is used exactly the same way as a link_to eg:
<%= button_to 'My App', ENV['MY_APP_DOMAIN'] %>
<%= button_to 'My Other App', ENV['MY_OTHER_APP_DOMAIN'] %>
However... you really don't need to use a button-to if you are just doing a GET for a URL like this...
(you use buttons when you need to POST data eg POSTing form data to a create action)
You can just pass in a CSS-class and style the link-to to look as though it were a button.
eg using Bootstrap classes:
<%= link_to 'My App', ENV['MY_APP_DOMAIN'], class: 'btn btn-success' %>
<%= link_to 'My Other App', ENV['MY_OTHER_APP_DOMAIN'], class: 'btn btn-danger' %>
OR similar.

Devise login straight with github

Im using devise for user registration and have a link which redirects to the login page.
<%= link_to "User Sign in", new_user_session_path, :class => "btn btn-default navbar-btn" %>
Iv set up omniauth using the following tutorial.
The link_to I'm using above takes me to the devise sign_in page where I then have to click on sign in with github which then redirects me login with github.
I would rather skip the sign-up page and once I click on the above link_to I want it to go straight to the github authentication.
you should be able to use the following link_to helper in any view of your app:
<%= link_to "Sign in with GitHub", user_omniauth_authorize_path(:github) %>
You can find more info about devise-omniauth integration here.
I worked it out, I changed the link_to to:
<%= link_to user_github_omniauth_authorize_path %>

Submit form using link_to in rails

I'm trying to submit a form using link_to as follows:
<%= form_for(#post, :url=> '/post/action', :method=> 'post', :html => {:id=>'form_id'} ) do |f| %>
....
<%= link_to 'submit', "/post/action", :onclick=>"document.getElementById('form_id').submit()" %>
....
but it is not posting the form, it is simply redirecting my form to the specified url. Does anyone know how to do this?
You can use:
<%= link_to 'submit', "#", :onclick => "$('#form_id').submit()" %>
if you are using JQuery and a later version of rails.
Above will work but if you have a really long page it will navigate to top of the page because of "#" so if you want to avoid that you can do:
<%= link_to 'submit', "", :onclick => "$('#form_id').submit()" %>
I think both things happen. The browser starts to submit the form, but it also follows the link's href. You can fix it by linking to # instead of /post/action...
...however, I don't recommend doing it. There are a few better approaches:
First, you can use a button instead of a link. You'll have to style it to make it look like a link, but that should not be a problem. It will be better, because it won't break the Principle of Least Surprise (people who read the code expect forms to be submitted with buttons) and you won't need the JavaScript.
If you insist on using a link, you should at least move the JavaScript code from the view to a JavaScript file. Then have this behavior added unobtrusively (although, you won't have a good fallback with the link). Assuming you're using jQuery, it should be as simple as:
$(document).on('click', '[data-submit-form]', function(e) {
e.preventDefault();
$(this).closest('form').submit()
}

How to disable a form submit button "a là Ruby on Rails Way"?

I am using Ruby on Rails 3 and I would like to disable and toogle the CSS class of a form.submit when the form is AJAX submitted and until the AJAX HTTP request is completed (I am using the default jQuery framework for JavaScript).
My form is the following:
<%= form_for(#article, :remote => true) do |form| %>
...
<%= form.submit(nil, {:id => 'button_id', :class => 'button_class'}) %>
<% end %>
How can I make that in a "common"/"good"/"proper" way?
The Rails jQuery bridge (jquery_ujs.js) code actually has a helper for this.
<%= form.submit "Save", id: "button_id", class: "button", disable_with: "Submitting..."
It will replace the button text with the value you give.
See http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag
API change: as Renan suggests in a comment below, as of Rails 4 beta there is a deprecation notice on the disable_with option. It should be changed to be a data attribute:
<%= form.submit "Save", id: "button_id", class: "button", data: {disable_with: "Submitting..."} %>
This should work with all recent versions of Rails as it's what the option did anyway. So it'll be one less deprecation notice to fix when you upgrade to Rails 4. :)

Resources