Submit a form via Ajax with Simple Form and Rails 4 - ruby

I'm using Rails 4.0.1, Simple Form and Bootstrap 3 to create a modal dialogue for creating a new record. I'm trying to submit the form via ajax, but I am unable to do so.
I've added :remote => true to the form declaration, as well as to the submit button. Yet the request is still being sent via HTML POST, causing a full-page reload.
The form is created as:
<%= simple_form_for SomeClass.new, :authenticity_token => true, :remote => true, :html => {:class => 'form-horizontal'} do |f| %>
And I've tried to create the submit button with:
<%= f.submit :data => {:remote => true}, :class => "control-button" %>
Neither of these work. The generated HTML shows the proper data-remote attributes. Yet elsewhere in my app, I've been using standalone links with link_to together with the :data-remote => true option, which work via ajax as expected. Turbolinks is disabled. But I'm simply having trouble submitting the form with ajax.
Am I overlooking something? What is a suitable alternative?

Related

Rails views to get variable from controller

I'm using form with :remote => true for ajax functionality, this form works fine but outside this form I have select_tag for other feature :
<%= select_tag "months", options_for_select(#dynamic_month.collect { |name|
name }, 'ALL'), id: 'chart_filter', :onchange =>"monthWise(this)" %>
Here I'm passing #dynamic_month from controller, but I'm not getting updated value from controller after submission of form, Is there any way we can achieve this keeping this select option outside the form and getting updated data from controller.
Thank you.

redirect to another URL using submit button in ruby

I have submit button and i want to redirect in another URL (hard coded) this URL
https://www.ccavenue.com/shopzone/cc_details.jsp
my code :
<%= form_tag #ccavanue do |f| , url => "https://www.ccavenue.com/shopzone/cc_details.jsp", :html => :method => "put" %>
<%= hidden_field_tag :my_field, #MerchantId, :id => 'merchant_id' %>
<%= submit_tag "Click Me" %>
<% end %>
i want to redirect another website URL with this submit button . please guided me.
Change your code to following:
<%= form_for #ccavanue, url: "https://www.ccavenue.com/shopzone/cc_details.jsp" do |f| %>
<%= f.hidden_field :my_field, #MerchantId, :id => 'merchant_id' %>
<%= f.submit "Click Me" %>
<% end %>
In Rails a form is designed to create or update a resource and reflects the identity of the resource in several ways:
The url that the form is sent to (the form element's action attribute) should result in a request being routed to the appropriate controller action (with the appropriate :id parameter in the case of an existing resource),
Input fields should be named in such a way that in the controller their values appear in the appropriate places within the params hash, and
For an existing record, when the form is initially displayed, input fields corresponding to attributes of the resource should show the current values of those attributes.
In Rails this is achieved by creating form using form_for where:
If we want to create any object we use POST method within url and PUT method if we are trying to update an existing record.
Rails framework is smart enough to use POST or PUT method by itself looking at the url of the form. So in this case we need not use method parameter within form_for url.
Probably you can start with Michael Hartl's tutorial

Ruby rails - text field change event and ajax

Ok.. I am running into this types of issues more often. Most of my html is ajax rendered and I use fields and values from rendered page to make new ajax requests. But none of the events seem to fire. Need to understand this why is that.
This is a simple form with text field which I want to make ajax call on a change event, to skip the form/button. And it is not working. What do I change here?
<div><%= form_tag users_search_path, :remote => true, :id => 'search_form' do %>
<%= text_field_tag :keyword, nil, :maxlength => 11, :size => 20 %># Tried this putting outside of this form, didn't work.
<%= submit_tag " Search ", :id => "search_button", :onclick => "javascript:user_search()"%>
<% end %></div>
<%= text_field_tag :keyword, nil, :maxlength => 11, :size => 20 %> Tried this putting outside of this form, didn't work.
$(function(){
$("#keyword").change(function() {
alert('ok');
$.post('/users/search', function(data) {
$("#search").html(data);
});
});
}
Because the last jquery code is a function, it's not executed until you call it. Remove the first and last line, then it will be run when the page is loaded so it will attach the function defined inside to your text box.

Multiple pagination with kaminari via Ajax

I want to apply multiple pagination with Kaminari via Ajax now here is my code for controller
def user_note
#user = current_user
#notes = Bookmark.where('user_id = ? && note is not NULL',current_user.id).order('created_at DESC').page(params[:page_1]).per(4)
#bookmarks = Bookmark.where('user_id = ? && note is NULL',current_user.id).order('created_at DESC').page(params[:page_2]).per(4)
respond_to do |format|
format.html
format.xml{ render :xml => #user}
end end
now for views i have two partials to render this arrays
<div id="bookmarks">
<%= render :partial =>"users/bookmark",:locals => { :bookmark => #bookmarks} %>
</div>
<%= paginate #bookmarks,:remote => true, :param_name => 'page' %>
inner partial is
<% bookmark.each do |bookmar| %>
<%= render :partial => 'show_bookmark.html.erb' , :locals => { :bookma => bookmar} %>
<%end%>
script for pagination update is being handled in a separate file
$('#bookmarks').html('<%= escape_javascript render(:partial =>"users/bookmark",:locals => { :bookmark => #bookmarks}) %>');
$('#paginator').html('<%= escape_javascript(paginate(#bookmarks, :remote => true).to_s) %>');
But by doing every thing it is not updating to state of page neither the contain in the page.
you are missing to pass params at this line
$('#paginator').html('<%= escape_javascript(paginate(#bookmarks, :remote => true).to_s) %>');
i think it should be like this
$('#paginator').html('<%= escape_javascript(paginate(#bookmarks, :remote => true, :param_name => 'page_2').to_s) %>');
and you are also passing wrong param at this line
<%= paginate #bookmarks,:remote => true, :param_name => 'page' %>
it should be like this
<%= paginate #bookmarks,:remote => true, :param_name => 'page_2' %>
and please also check that whether you are sending the response correctly to the JS file or not.
I found this question searching for paginating multiple models on the same page. It's not clear to me how the pagination for the #notes collection is intended to work, but as presented, the solutions will only paginate the #bookmarks collection via AJAX.
There will be issues if you want to maintain pagination for both collections via html OR if you change the js file to render both collections.
I implemented a solution to my similar problem like this:
An html view that renders a template with two partials: one for #notes (including its pagination helper) and another that renders #bookmarks with its pagination helper
Pagination links marked with remote: true
One js view that re-renders the two partials, something like
$('#notes_container').html('<%= j(render partial: 'paginated_notes_list') %>');
$('#bookmarks_container').html('<%= j(render partial: 'paginated_bookmarks_list'); %>');
This is the key: Pagination links that take the current page of the other model as a parameter. This way you do not "lose" which page you are on in the other model.
<%= paginate #notes, param_name: 'page_1', params: {page_2: params[:page_2]} %>
<%= paginate #bookmarks, param_name: 'page_2', params: {page_1: params[:page_1]} %>
Again, I'm not really clear on how the asker's system is supposed to function, but this solution will allow user to page through both models without losing their "place" in the other model via AJAX or html.

How to specify a controller & action for Ajax pagination with Kaminari?

I'm using the Kaminari gem for my ruby on rails application (For anybody still using will_paginate, I would recommend to consider switching! Much cleaner and more versatile).
The problem I have is that I want to specify a controller action when doing AJAX pagination, ie. get my pagination to work remotely, as such:
<%= paginate #feeds, :param_name => :page, :remote => true%>
By default, when I set :remote => true, and add the following lines to my "pages" controller home.js.erb file, it works on my homepage. I don't even need to specify which js partial to refer to; it chooses automatically.
$('.synopsis').html('<%= escape_javascript render('exchanges/synopsis', :feeds => #feeds)%>');
$('.paginator').html('<%= escape_javascript(paginate(#feeds, :param_name => :page, :remote => true).to_s)%>')
BUT the catch is that this "synopsis" div is a partial that I render on a lot of different pages in my application. So on pages where the controller isn't my "pages" controller, the remote pagination no longer works.
One solution would be to add these two lines to js.erb files in my many different controllers. But that would be redundant and inelegant.
I would prefer to be able to specify in the "paginate" call, which controller and which action to use for the remote call. Then I think I would write an action like:
def paginate_remotely
respond_to paginate_remotely.js
end
How would I be able to do this? It seems like such a simple question but I haven't been able to figure it out. The following certainly does not work:
<%= paginate #feed_exchanges, :param_name => :exchange_page, :remote => true, :controller => :exchanges, :action => :paginate_remotely %>
For those who are interested, the answer is you have to specify the controller and action under a :params specification, as follows:
<%= paginate #feed_exchanges, :params => {:controller => :exchanges, :action => :paginate_remotely}, :param_name => :exchange_page, :remote => true %>
Don't forget to write define the route for this action in config/routes.rb, and create a js partial, in my case called paginate_remotely.js.erb, containing:
$('.synopsis').html('<%= escape_javascript render('exchanges/synopsis', :feeds => #feeds)%>');
$('.paginator').html('<%= escape_javascript(paginate(#feeds, :param_name => :page, :remote => true).to_s)%>')

Resources