I have this javascript in my view
What can I do to fix this error?
<%= javascript_tag do %>
$("#check_module").click(function () {
IMP.init('imp45233'); //iamport 대신 자신의 "가맹점 식별코드"를 사용하시면 됩니다
IMP.request_pay({
merchant_uid : "<%= #merchant_uid %>",
name : '결제테스트',
amount : <%= #course.price %>,
buyer_email : '<%= current_user.email %>',
buyer_name : '<%= current_user.name %>',
buyer_tel : ' no phone ',
buyer_addr : ' course name: no address',
buyer_postcode : ' no postcode ',
m_redirect_url: ""
}, function(rsp) {
if ( rsp.success ) {// Successful payment: Successful payment approval or issuance of a virtual account
window.location.href= "<%= add_enrollment_path(:course_id => #course) %>"?imp_uid=rsp.data.imp_uid&merchant_uid=rsp.data.merchant_uid;
} else {
var msg = '결제에 실패하였습니다.';
msg += '에러내용 : ' + rsp.error_msg;
alert(msg);
}
});
});
<% end %>
I'm having problem with this line
window.location.href= "<%= add_enrollment_path(:course_id => #course) %>"?imp_uid=rsp.data.imp_uid&merchant_uid=rsp.data.merchant_uid;
After fixing the error with the suggestion below :
window.location.href= "<%= add_enrollment_path(:course_id => #course) %>?imp_uid=" + rsp.imp_uid + "&merchant_uid=" + rsp.merchant_uid;
Now I am running into a different problem: I think it is related to my route:
get 'enrollments/add_enrollment/', :to => 'enrollments#add_enrollment', :as => 'add_enrollment'
Here is the error
can't find record with friendly id: "reading-starter-01?imp_uid=imp_376842875552"
do I need to add /:course_id/ ?? I will try ^^ wish me luck
Try building the string properly:
"<%= add_enrollment_path(:course_id => #course) %>?imp_uid=" + rsp.data.imp_uid + "&merchant_uid=" + rsp.data.merchant_uid;
Related
The goal is to load the comment for each article on my index page using AJAX.
I'm getting a bad request error 400:
ERROR bad URI `/comments/%3C%=%20comment.id%20%%3E?_=1457892605480'.
Index:
#welcome/index.haml
- #articles.each do |article|
= article.title
- article.comments.each do |comment|
%comment-content{ :id => "comment-<%= comment.id %>", :class => "comment-content", "data-comment-id" => "<%= comment.id %>"}
JS:
#comments.js
var loadComment = function() {
return $('.comment-content').each(function() {
var comment_id = $(this).data('comment-id');
return $.ajax({
url: /comments/+comment_id,
type: 'GET',
dataType: 'script',
error: function(jqXHR, textStatus, errorThrown) {
return console.log("AJAX Error: " + textStatus);
},
success: function(data, textStatus, jqXHR) {
return console.log("Worked OK!");
}
});
});
};
$(document).ready(loadComment);
$(document).on('page:change', loadComment);
Show:
#comments/show.js.erb
$('#comment-<%= #comment.id %>').append('j render(#comment.content)');
Routes:
resources :articles do
resources :comments do
end
end
When you URLdecode the URL in the error message, you'll get the following:
ERROR bad URI `/comments/<%= comment.id %>?_=1457892605480'.
Seeing that, the error becomes quite clear: the interpolations in your HAML template are wrong. Instead of ERB interpolation style, you need to use the ruby string interpolation style, as described in HAML docs:
%comment-content{ :id => "comment-#{comment.id}", :class => "comment-content", "data-comment-id" => comment.id }
your url needs to be a string:
url: "/comments/" + comment_id
I have a form partial inside which I select associated users through a multiple: true collection select:
= f.collection_select(:user_ids, User.all, :id, :email, {selected: #limit_group.user_ids, include_blank: true}, {multiple: true, "data-placeholder" => "Add users to group"})
But how can I do this more efficiently to avoid big load times when the database has like thousands of users?
You'll be better using something called AutoComplete / LiveSearch with a text box (like Pardeep Saini mentioned).
We've done this before:
You could achieve this relatively simply:
= f.text_field :user_ids, placeholder: "Search for users"
You'd then have to use javascript:
#app/assets/javascripts/application.js
$(document).on("keyup", "input[type=text]#user_ids", function(){
$.getJSON("users/search", {name: $(this).val()}).done(function(json){
var users = [];
$.each(json.users, function(user) {
users.push("" + user.name + "");
});
$(".search").html(users).show();
});
});
$(document).on("click", ".search a", function(e) {
e.preventDefault();
// add hidden field with user name to form
});
You'd have to back it up with the relevant controller action:
#config/routes.rb
resources :users do
get :search, on: :collection
end
#app/controllers/users_controller.rb
class UsersController < ApplicationController
def search
#users = User.where("name LIKE ?", "%" + params[:name] + "%")
respond_to do |format|
format.json (render json: #users.to_json)
end
end
end
The above code should be refactored.
--
To get this working with multiple values would be a little bit more involved. It could be done, but you'd have to do it like the tags setup in StackOverflow...
The way they do that is to basically use a similar principle to the above (each tag will be a returned piece of data from the search).
Here's the actual code we used in the cosmetics example above:
#app/assets/javascripts/extra/jquery.livesearch.js
(function($) {
$.searchbox = {}
$.extend(true, $.searchbox, {
settings: {
url: 'search',
param: 'search',
dom_id: '#livesearch',
minChars: 2,
loading_css: '#livesearch_loading',
del_id: '#livesearch_del'
},
loading: function() {
$($.searchbox.settings.loading_css).show()
},
idle: function() {
$($.searchbox.settings.loading_css).hide()
},
start: function() {
$.searchbox.loading()
$(document).trigger('before.searchbox')
},
stop: function() {
$.searchbox.idle()
$(document).trigger('after.searchbox')
},
kill: function() {
$($.searchbox.settings.dom_id).fadeOut(50)
$($.searchbox.settings.dom_id).html('')
$($.searchbox.settings.del_id).fadeOut(100)
},
reset: function() {
$($.searchbox.settings.dom_id).html('')
$($.searchbox.settings.dom_id).fadeOut(50)
$('#SearchSearch').val('')
$($.searchbox.settings.del_id).fadeOut(100)
},
process: function(terms) {
if(/\S/.test(terms)) {
$.ajax({
type: 'GET',
url: $.searchbox.settings.url,
data: {search: terms.trim()},
complete: function(data) {
$($.searchbox.settings.del_id).fadeIn(50)
$($.searchbox.settings.dom_id).html(data.responseText)
if (!$($.searchbox.settings.dom_id).is(':empty')) {
$($.searchbox.settings.dom_id).fadeIn(100)
}
$.searchbox.stop();
}
});
return false;
}else{
$.searchbox.kill();
}
}
});
$.fn.searchbox = function(config) {
var settings = $.extend(true, $.searchbox.settings, config || {})
$(document).trigger('init.searchbox')
$.searchbox.idle()
return this.each(function() {
var $input = $(this)
$input
.keyup(function() {
if ($input.val() != this.previousValue) {
if(/\S/.test($input.val().trim()) && $input.val().trim().length > $.searchbox.settings.minChars){
$.searchbox.start()
$.searchbox.process($input.val())
}else{
$.searchbox.kill()
}
this.previousValue = $input.val()
}
})
})
}
})(jQuery);
... and ...
#app/assets/javascripts/application.js
$(document).ready( function() {
var base_url = window.location.protocol + "//" + window.location.host;
$('#SearchSearch').searchbox({
url: base_url + '/search/',
param: 'search',
dom_id: '#livesearch',
loading_css: '#livesearch_loading'
})
});
$(document).on('click', '#livesearch_del', function() { $.searchbox.reset(); })
$(document).on('submit', '#SearchForm', function() { $.searchbox.kill(); });
$(document).on('click', '.livesearch_results tr', function() { window.location = $('a:first', this).attr('href'); });
The routes & controller:
#config/routes.rb
match 'search(/:search)', :to => 'products#search', :as => :search, via: [:get, :post]
#app/models/product.rb
class Product < ActiveRecord::Base
def self.search(search)
where("name LIKE ? OR description LIKE ?", "%#{search}%", "%#{search}%").take(5)
end
end
#app/controllers/product_controller.rb
class ProductsController < ApplicationController
def search
#products = Product.search params[:search]
respond_to do |format|
format.js { render :partial => "elements/livesearch", :locals => {:search => #products, :query => params[:search]} }
format.html {
render :index
}
end
end
end
The views:
#app/views/elements/_livesearch.html.erb
<div class="livesearch_container">
<table class="livesearch_results">
<% unless search.blank? %>
<% search.each_with_index do |item,i| %>
<% pos ||= '' %>
<% if (i == 0) then pos = 'first' end %>
<% if (i == search.size - 1) then pos += ' last' end %>
<tr data-link="<%= "/#{item.slug}" %>" class="<%= "#{pos}" %>">
<td class="image">
<% model = item.images.first || item.images.build %>
<%= image_tag(model.image.url(:thumb), :title => item.name, data: {"placement" => "left"}, :height => "85") %><br/>
</td>
<td class="information">
<%= link_to image_tag(item.brand.images.first.image.url(:thumb), :width => "55", :title => "View #{item.brand.name}"), "/#{item.brand.slug}", :class => "brand" if defined?(item.brand.images.first) %>
<div class="name"><%= link_to item.name, "/#{item.slug}" %></div>
</td>
<td class="price">
<%= number_to_currency(item.price, unit: "£") %>
</td>
</tr>
<% end %>
<tr class="results"><td colspan="3"><%= link_to "See all #{search.size} results here »", search_path(query) %></td></tr>
<% else %>
<tr class="results"><td colspan="3"><%= link_to 'No results found', search_path(query) %></td></tr>
<% end %>
</table>
</div>
I also made a gist here: https://gist.github.com/richpeck/2310ff3ab1ffcd6a9138
I am trying to create a form that submits on the collection select option, like when I select a value from the dropdown, it should post, what is posted below is not working,
<%= form_tag edit_zone_management_path, :method => 'get', :id => "bar" do %>
<%= collection_select :dropdown, :id, Server.where(:id => #arr),:id, :server_name, :prompt => true, :selected => #sid %>
<%end%>
Can someone please point out what is missing here?
Addition
There is some coffeescript that is bound to this collection select.
$ ->
$("#dropdown_id").live "change", -> // id of the collection_select
index = this.selectedIndex
uid = window.location.pathname.split("/")
if index == 0
index += 1
response = "{ \"key\": { \"value\" : #{index} } }"
#window.location.replace(uid[0]+ "/" + uid[1] + "/" + uid[2] + "/" + uid[3] + "/" +uid[4])
$.ajax({
type: 'POST',
url: '/configuration/zone_management/updategrid/',
data: response,
contentType: "application/json",
});
It looks like you are missing any handler for your $.ajax call, try adding some:
$.ajax({
type: 'POST'
url: '/configuration/zone_management/updategrid/'
data: response
contentType: "application/json"
success: (response) ->
console.log response
alert "Success fired"
error: (response) ->
console.log response
alert "Error fired"
})
This is just example, so adjust your handlers accordingly!
Good luck!
I'm trying to make it reload the partial that shows the number of messages unread every 3seconds.
But the codes I wrote won't show the numbers at all even if there's 1 unread message...
How can I reload partial that shows correct number of messages unread??
My codes are
assets/javascript/refresh_messages_count.js
$(document).ready(function () {
// will call refreshPartial every 3 seconds
setInterval(refreshPartial, 3000)
});
function refreshParital() {
$.ajax({
url: "messages/refresh_part";
})
}
messages_controller.rb
def refresh_part
#message_count = current_user.mailbox.inbox(:read => false).count(:id, :distinct => true)
# get whatever data you need to a variable named #data
respond_to do |format|
format.js {render :action=>"refresh_part.js"}
end
end
views/layouts/_menu.html.erb
<span id="message_received_count">
<%= render :partial => "layouts/message_received_count" %>
</span>
views/layouts/_message_received_count.html.erb
<% if user_signed_in? && current_user.mailbox.inbox(:read => false).count(:id, :distinct => true) > 0 %>
<li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "Received" + sanitize(' <span class="badge badge-info">'+#message_count.to_s+'</span>'), messages_received_path %>
</li>
<% else %>
<li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "Received", messages_received_path %>
</li>
views/messages/refresh_part.js.erb
$('#message_received_count').html("#{escape_javascript(render 'layouts/messages_received_count', data: #message_count)}");
Change your function refreshPartial to the following:
function refreshPartial() {
$.ajax({
url: "/messages/refresh_part",
type: "GET",
dataType: "script",
success: function(data) {
console.log("Called refresh_part");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + xhr.status + " " + thrownError);
}
});
}
(the / in front of messages is important, the other fields are useful as well - you can remove the success option once you get it working).
And change your method in your controller to:
def refresh_part
#message_count = current_user.mailbox.inbox(:read => false).count(:id, :distinct => true)
# get whatever data you need to a variable named #data
respond_to do |format|
format.js
end
end
(removing the render part - rails knows how to do this automatically).
Edit
After discussion - the last problem to be resolved was related to JQuery conflict - JQuery was being included in multiple places and stopping the $(document).ready from firing. Fixed.
I have a view with several "Invite" buttons like this:
<div class = "fbinvite_form" id = "<%= friend[:identifier] %>" name = "fb">
<div class = "btn btn-small">
Invite
</div>
</div>
When one of these buttons are clicked an AJAX function is called (invite_friend) :
$('.fbinvite_form').click(function() {
invite_friend();
});
Here's invite_friend (some values are hard-coded as I debug):
function invite_friend() {
$.post('/groups/7/invitations',
{
"recipient_email": "facebook#meetcody.com",
"commit" : "fb",
"fb" : "fb"
},
function(response) {
});
}
Here's the relevant line that is returned from the controller:
render :json => {
:url => signup_with_token_url(#invitation.token),
:id => #invitation.id
},
:status => :created
I can confirm that this json is being rendered correctly. At this point I'm expecting an ajax:success event to fire. I have the following code at the top of my page:
$('.fbinvite_form').bind("ajax:success", function(evt, data, status, xhr) {
...
});
But it's not firing. Any clue what might be going wrong or how to better troubleshoot (I'm a bit of a noob)?
Additional Context
I wanted to add a little bit more as it might help. I had originally built this to work with a form and it worked fine. For some performance reasons I decided to switch to buttons with AJAX. Here's the original form:
<%= form_for([#group, #invitation], :remote => true, :html => { :'data-type' => 'html', :class => 'fbinvite_form', :id => friend[:identifier]}) do |f| %>
<%= f.hidden_field :recipient_email, :value => "facebook#meetcody.com" %>
<div class = "fbinvite btn_list_right" id = "<%= friend[:identifier] %>">
<%= f.submit "Invite", :class => "btn btn-medium btn-primary", :name => "fb" %>
</div>
<% end %>
This has since been replace with all the code you see above the controller snippet.
UPDATE 1
Per Vince's suggestion I have moved the "ajax:success" code into the success function. Here is the original "ajax:success" function:
$('.fbinvite_form').bind("ajax:success", function(evt, data, status, xhr){
var fb_id = $(this).attr('id');
var response = eval("(" + xhr.responseText + ")");
var link_url = response.url;
var id = response.id;
var inv_url = <%= raw('"' + group_url(#group) + '/invitations/"') %> + id;
var picture_url = "https://www.example.com.com/assets/cody_130by130.png";
var desc = <%= raw('"' + first_name(current_user) + " is working with Cody on fitness. Join " + genderizer(current_user, "his") + " group to start tracking your workouts. Cody and the other group members will keep you motivated!" + '"') %>;
send_invite(fb_id, link_url, picture_url, desc, inv_url); return false;
});
And here is what I've done to move the code into the success function. The issue is that I don't seem to have access to "xhr"
$.ajax({
type: "POST",
url: "/groups/7/invitations",
data: {recipient_email: "facebook#meetcody.com", commit : "fb", fb : "fb" },
dataType: "json",
success: function(evt, data, status, xhr) {
var fb_id = $(this).attr('id');
var response = eval("(" + xhr.responseText + ")");
var link_url = response.url;
var id = response.id;
var inv_url = <%= raw('"' + group_url(#group) + '/invitations/"') %> + id;
var picture_url = "https://www.meetcody.com/assets/cody_130by130.png";
var desc = <%= raw('"' + first_name(current_user) + " is working with Cody on fitness. Join " + genderizer(current_user, "his") + " group to start tracking your workouts. Cody and the other group members will keep you motivated!" + '"') %>;
send_invite(fb_id, link_url, picture_url, desc, inv_url); return false;
}
});
Add error handler like this and log the error, this should help diagnose the issue.
error: function(xhr, status, error) {
console.log(error);
}
EDIT
Sorry you need to use .ajax instead of .post.
$.ajax({
type: "POST",
url: "/groups/7/invitations",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
},
error(xhr, status, error) {
console.log(error);
}
});