I have a button that is used to verify a user's zip code. When clicked, the desired functionality would be an alert display saying whether the zip code was verified or not.
<%= button_tag 'Verify zip code', :type => 'button', :id => 'self-install', remote: true %>
The alert file is in my Views and is in zipcodes/success.js.erb and zipcodes/failure/js.erb
This is my controller:
if data.empty?
respond_to do |format|
format.html do
redirect_to page_path(submitted_page)
end
format.js do
render 'zipcodes/failure'
end
end
else
respond_to do |format|
format.html do
redirect_to page_path(submitted_page)
end
format.js do
render 'zipcodes/success'
end
end
end
Here is my ajax request:
$(function(){
$('#self-install').click(function(e){
e.preventDefault();
$.ajax({
url: '/zipcodes/new',
type: 'get',
dataType: 'json',
data: { zip: zipCodes },
success: function(r){
}
});
});
});
When I click the button, my terminal says this:
But nothing is displaying. I am using Ruby on Rails. Any help would be greatly appreciated. Please let me know if there is anything I left out that would be helpful.
If you have a remote: true element, the ajax call in your js is unnecessary, besides your remote element should be a link_to with the respective url instead of button_tag
Resulting in the following code in your view:
<%= link_to 'new zipcode', new_zipcode_path, remote: true %>
Related
I have the following partial files
_report.html.erb
<h5>REPORT</h5>
<hr/>
<%= link_to "Extract REPORT", "#", :class => 'btn btn-primary', id: 'load_panel' %>
<br/>
<br/>
<div class="row">
<% rand = Time.now.to_i - Random.new.rand(1..Time.now.to_i) %>
<div class="col-md-12">
<input type="hidden" id="randValue" value="<%= rand %>" data-validate="false" data-hidden="true"/>
<div>
<b>File Name</b>
<hr/>
</div>
<div id="application-attachments-<%= rand %>" class="col-xs-12">
<%= render partial: 'report_attachment', locals: {application_attachments: f.object.application_attachments} %>
</div>
</div>
</div>
_report_attachment.html.erb
<% application_attachments.each do |attachment| %>
<div class="fields">
<%= render "report_attachment_fields", rep_attachment: attachment, instalment: true, type: 'application_assignment' %>
</div>
<% end %>
_report_attachment_fields.html.erb
<div class="row attachment_display">
<% if rep_attachment.attachment? && rep_attachment.attachment.model.share_file %>
<% if #action == "show" && #account_type %>
<div class="col-md-6 ellipis">
<%= link_to File.basename(rep_attachment.attachment.path), rep.attachment.url, target: "_blank", id: 'view_file', :data => { application_attachment_id: rep_attachment.id } %>
<%= rep_attachment.active %>
</div>
<% end %>
<% end %>
</div>
Upon initial load, it loads all 3 files accordingly. But Upon clicking Extract CTOS, it makes a javascript request
application.js
$('body').on('click', '#load_panel', function(event) {
object_selected = $(this)
$(this).attr('disabled', 'disabled');
$.ajax({
type: 'GET',
url: '/applications/generate_report?application_id='+$(this).attr('data-application-id')+'&rand_value='+$(this).attr('data-rand-value'),
dataType: 'json',
success: function(data) {
object_selected.removeAttr('disabled');
}
})
})
On calling the GET request, it will call this method
def generate_report
#rand_value = params[:rand_value]
#rep_application_attachment = #application.rep_attachment
respond_to do |format|
format.js
end
end
Which should call this js.erb file
generate_report.js.erb
$("#application-attachments-#{#rand_value}").html("<%= escape_javascript(render 'report_attachment', application_attachments: #rep_application_attachment) %>");
The problem now is that i dont get an error and it says generate_report.js.erb has been rendered but it doesnt render anything. What am i missing?
solved it. It had to do with my ajax call.
$.ajax({
type: 'GET',
url: '/applications/generate_report?application_id='+$(this).attr('data-application-id')+'&rand_value='+$(this).attr('data-rand-value'),
dataType: 'json',
success: function(data) {
object_selected.removeAttr('disabled');
}
})
should be this instead. by not including datatype ='script' and correct format, even though my js.erb got called, it wasn't executed.
$.ajax({
type: 'GET',
url: '/applications/generate_report?application_id='+$(this).attr('data-application-id')+'&rand_value='+$(this).attr('data-rand-value'),
data: {
format: 'js'
},
dataType: 'script',
success: function(data) {
object_selected.removeAttr('disabled');
}
})
You need to specify 'partial' option to render template using render method.
Try this
generate_report.js.erb
$("#application-attachments-#{#rand_value}").html("<%= escape_javascript(render partial: 'report_attachment', application_attachments: #rep_application_attachment) %>");
your original code:
$("#application-attachments-#{#rand_value}").html("<%= escape_javascript(render 'report_attachment', application_attachments: #rep_application_attachment) %>");
Rendering partials
Partial rendering in a controller is most commonly used together with Ajax calls that only update one or a few elements on a page without reloading. Rendering of partials from the controller makes it possible to use the same partial template in both the full-page rendering (by calling it from within the template) and when sub-page updates happen (from the controller action responding to Ajax calls). By default, the current layout is not used.
For more information about render
https://apidock.com/rails/ActionController/Base/render
I think the problem is that you're trying to interpolate your ruby instance variable the wrong way (you're using Ruby's string interpolation syntax "#{}"), when you need to use ERB "<%= %>".
This should work:
$("#application-attachments-<%= #rand_value %>").html("<%= escape_javascript(render 'report_attachment', application_attachments: #rep_application_attachment) %>");
Iam building a form in Rails. I want to submit it by ajax, so I setted remote: true
<%= form_for #post, html: { multipart: true }, remote: true do |f| %>
...
<%= end %>
In my controller:
def create
#post = Post.new(post_param)
respond_to do |format|
if #post.save
format.html { redirect_to #post, notice: 'Post was successfully created.' }
format.json { render :show, status: :created, location: #post }
else
format.html { render json: #post.errors, status: 400 }
format.json { render json: #post.errors, status: 400 }
end
end
end
In form on view
$('#new_post').on('ajax:success', function(data) {
console.log(data);
}).on('ajax:error', function(evt, xhr, status, error) {
console.log(xhr);
});
But in event 'ajax:error', I can't parse to get data about validation errors of post. All params 'xhr', 'status', 'error' both equal undefined.
How to parse response in 'ajax:error' to get data about validation errors ?
Rails 5.1 introduced rails-ujs, which changes the parameters of these event handlers. The following should work:
// ...
.on('ajax:error', function(event) {
var detail = event.detail;
var data = detail[0], status = detail[1], xhr = detail[2];
// ...
});
Source: http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
I am building a single-page-app with rails and client-side javascript. To dynamically manage the interface, I need to trigger a callback after the login form view (loginForm.html.erb) is returned (for user authentication via Bcrypt). I've tried jquery $.ajax requests, and can get the form OR the json responses but not both.
Here's the request to get the login form:
loginMenuEl.on("click", function(event){
event.preventDefault();
$.ajax({
url: "http://localhost:3000/login",
type: "GET",
dataType: "json"
}).done(function(jsonData) {
self.initLoginButton();
self.processContent(jsonData);
}).fail(function(){
console.log("*** ajax fail L1 ***");
});
});
Here are the relavent routes:
get "/login" => "sessions#login"
get "/loginForm" => "sessions#loginForm"
get "/login_attempt" => "sessions#login_attempt"
post "/login_attempt" => "sessions#login_attempt"
Here is the Sessions controller that processes the form and json:
def login
#contentInfo = Content.find_by_id(1)
respond_to do |format|
format.html { render :loginForm }
format.json { render json: #contentInfo }
end
end
I've tried other versions of the respond_to block but the form never returns:
format.html { redirect_to (:action => 'loginForm') }
format.html { redirect_to (action: 'loginForm') }
format.html { redirect_to action: 'loginForm' }
format.json { render json: #contentInfo }
Am I correct to believe that rails can return both json and a view file (loginForm.html.erb)
I'm trying to do a form submission through AJAX in Rails and I am not too sure what is wrong here. I got everything to work using "remote: true" but I want to gain a better understanding of how the AJAX works with jQuery. This is my javascript code:
$(document).ready(function(){
$("#new_user_friendship").on("submit", function(event){
event.preventDefault();
var friendId = $("#user_friendship_friend_id").val();
var _this = $(this);
$.ajax({
url: "/user_friendships",
data: _this.serialize(),
method: "POST",
dataType: "json",
success: function(data){
console.log(data);
friendButton.hide();
$(".friend-request-form").html("<p>Friend request sent</p>");
}
});
});
});
I am suspecting this line url: "/user_friendships/new?friend_id="+friendId containing the url is the culprit of my errors. I wrote this because a hidden field is being passed as a person's friend id but it throws a "404 error", I've also tried url: "/user_friendships" which doesn't return any errors but it also doesn't properly execute the Javascript as I expected.
This is the corresponding form_for that the AJAX request is sent to:
<div class="friend-request-form">
<%= form_for current_user.user_friendships.build(friend_id: #user), id: "new_user_friendship", method: :post do |f| %>
<%= f.hidden_field :friend_id, value: #user.id %>
<%= submit_tag "Send friend request", class: "button radius tiny", id: "friend-request-button" %>
<% end %>
</div>
What this form does is it sends a friend request to another user using a hidden field.
And in my user_friendships_controller.rb I have this code:
def create
if params[:user_friendship] && params[:user_friendship].has_key?(:friend_id)
#friend = User.find(params[:user_friendship][:friend_id])
#user_friendship = UserFriendship.request(current_user, #friend)
respond_to do |format|
if #user_friendship.new_record?
format.html do
flash[:error] = "There was a problem creating that friend request."
redirect_to user_path(#friend)
end
format.json {render json: #user_friendship.to_json, status: :precondition_failed}
else
format.html do
flash[:success] = "Friend request sent"
redirect_to user_path(#friend)
end
format.json {render json: #user_friendship.to_json, status: :precondition_failed}
end
end
else
flash[:error] = "Friend required"
redirect_to root_path
end
end
If anyone can provide any suggestions or feedback that'd be great!
UPDATE:
Now that I added in data: _this.serialize() and changed the url to: url: "/user_friendships" I'm now getting a 412 (Precondition Failed) error. Despite this error the data is actually being saved into the database. Does anyone know why I'm getting this 412 (Precondition Failed) error?
There is something I do not understand, with the dataType json, you said that you had a precondition failed status right ?
But you wrote
format.json {render json: #user_friendship.to_json, status: :precondition_failed}
So I don't think there is any problem, indeed, it seems to work fine, as you explicitly passed the status in your render command, try removing it and I think you will have a 200 (success) status instead.
Of course, you can keep the previous post ajax request, or use this short version
$.post(
/user_friendships',
{ user_friendship: { friend_id: friendId } },
function(){
console.log(data);
friendButton.hide();
$(".friend-request-form").html("<p>Friend request sent</p>");
},
'json')
Add a data attribute to the post params instead of passing it in the url:
$.ajax({
url: "/user_friendships",
data: { user_friendship: { friend_id: friendId } }, // <<< Updated
method: "POST",
dataType: "json",
success: function(data){
console.log(data);
friendButton.hide();
$(".friend-request-form").html("<p>Friend request sent</p>");
}
});
Update
The url should be /user_friendships, assuming that you're using RESTful actions. Have a look to this article about REST in Rails.
Also, when you do an AJAX request like this, your are not sending the rails authenticity tokens that are crated by the form helper. This may be the cause of your 412 (Precondition Failed) error.
See: Understanding the Rails Authenticity Token
How can I pass a variable (id) from the JavaScript listener:
Gmaps.map.callback = function() {
...
...
google.maps.event.addListener(marker, 'click', function() {
var id = this.currentMarker;
alert(id);
});
}
}
To the instance variable (#foo) in ruby-on-rails controller
def create
#foo = ???
...
end
to correctly create a relationship in the view (form):
<%= form_for user.relationships.build(:followed_id => #foo.id) do |f| %>
<div><%= f.hidden_field :followed_id %></div>
<div class="actions"><%= f.submit "Follow" %></div>
<% end %>
Thanks!
If I am understanding correctly, a good way to do this is to use AJAX to submit the id to your action and use the action to render your form.
That would look something like this in your javascript:
jQuery.ajax({
data: 'id=' + id,
dataType: 'script',
type: 'post',
url: "/controller/action"
});
You'll need a route:
post 'controller/action/:id' => 'controller#action'
Then in your action you can grab that id and render your form something like this:
def action
#user = User.relationships.build(:followed_id => params[:id])
render :viewname, :layout => false
end
Then you can just build a form for #user in a partial or whatever
<%= form_for #user do |f| %>
You'll have to fill in the details there, but that should get you pretty close.