I'm using the wikedpdf gem on a rails project to get my reports.
But to one report I need to use an ajax request
$.ajax({
type: "POST",
url: url,
dataType: 'pdf',
data: { ids: getIdsJavascriptMethod() },
success(data) { $("#load-app").hide(); return false; },
error(data) { $("#load-app").hide(); return false; }
});
I'm calling the ajax reques wth a link_to
<%= link_to "PDF", "#", onclick: "pdf()", target: :_blank %>
But are rendering the same page "#" on a _blank target, how to render a PDF file using wikedpdf gem with an ajax request?
It's opening a new tab because that's the default behavior of clicking a link with target="_blank". Use e.preventDefault() first thing in your pdf() function to prevent this behavior.
function pdf(e) {
e.preventDefault();
// make Ajax request
}
And replace "#" with the js call on link_to:
= link_to "PDF", "javascript:pdf()", target: :_blank
Or, better yet in IMO, add an id to your link event:
<%= link_to "PDF", "#", id: "pdf-link", target: :_blank %>
And listen to the click (code assumes you have jQuery loaded):
$(document).ready(function() {
$('#pdf-link').click(function(e) {
e.preventDefault();
pdf();
});
});
Related
Say I have a button on my form, it doesn't submit the form, but it basically goes off to get some more information:
<%= f.button '', class:'hidden', id: 'do_calculation', remote: true %>
How do I tie this up so that when it is clicked it calls a controller action and returns the data?
Should I have something like this on the same page?
<script>
function calculate_close() {
var id = '<%= #thing.id %>';
$.ajax({
url: "<%= calculate_path %>",
data: {
id: id
},
dataType: "script"
})
}
</script>
Here you can create a html button without using form builder like.
<button id="do_calculation">Button</button>
Then you can bind the click event to that button and call the ajax inside that event, like:
$("#do_calculation").on('click', function(){
var id = '<%= #thing.id %>';
$.ajax({
url: "<%= calculate_path %>",
data: {
id: id
},
dataType: "json"
})
})
and in the controller you can use something like:
respond_to do |format|
format.json { render :json => {:message => "success"} }
end
Hope this will help!
Can I provide AJAX with a Rails URL/path?
For example, what I need is url: articles/1/comments/1.
Since I'm experiencing difficulties for some time now making AJAX execute this URL, I wonder if there's a way to use the Rails route I'm familiar with [comment.article, comment].
Note:
I'm loading a DIV using AJAX:
#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 }
AJAX:
var loadComment = function() {
return $('.comment-content').each(function() {
var comment_id = $(this).data('comment-id');
return $.ajax({
url: "" ,
type: 'GET',
dataType: 'script',
});
});
};
Rails provide data-remote attribute in form. It works like AJAX and it uses url as you added in form
you can use it like below:
<%= form_for([comment.article, comment], remote: true) do |f| %>
...
<% end %>
you can use like
<%= form_for([comment.article, comment], remote: true) do |f| %>
...
<% end %>
if you are using form_for or if you want to send ajax like:
$.ajax({
})
then you can use
$.ajax({
url : "<%= url_for article_comment_path(article, comment)%>"
})
This is working just fine
<%#= link_to t('.add_html'), 'javascript:void(0);', :class => "line-item", :product => product.id %>
$('document').ready(function(){
$(".line-item").click(function(){
var prod = $(this).attr('product');
$.ajax({
url:'<%#= line_items_url %>',
data: {product_id: prod},
type: 'POST',
dataType: 'script'
});
});
});
But when I use button nothing happens. Please let me know what am I missing here?
<%= button_to t('.add_html'), 'javascript:void(0);', :class => "line-item", :product => product.id %>
:remote => :true just creates an ajax request; you can do your own ajax request no problem:
$("button").on("click", function(){
$.ajax({
url: $(this).attr("href");
success: function(data) { //handle returned data },
error: function(data) { //handle errors }
});
});
I think you are asking a different question (how to get your call working), which I can update the answer to reflect if you wish
You need to prevent default:
$(document).ready(function(){
$("button").click(function(ev){
$.post(this.url); // I'm not sure this is correct
ev.preventDefault();
});
});
In the controller a response to an AJAX Request is following:
#response = {resp: "ack"}
render json: #response
JS which handles AJAX is:
$('#some_btn').click(function() {
var valuesToSubmit = $('#some_form').serialize();
var url = $('#some_form').attr('action');
console.log("VALUE: " + valuesToSubmit);
console.log("URL: " + search_url);
$.ajax({
type: 'POST',
url: url, //sumbits it to the given url of the form
data: valuesToSubmit,
dataType: "JSON",
success: function(data) {
console.log("saved");
console.log(data);
}
});
return false;
});
But the problem is that I don't get console messages, instead the page reloads and I get json as text on a new page. How to prevent this "non-true-AJAX" behaviour?
So, I had almost the same problem. In my case, I was using the folliwing link to send the request:
<td>
<%= link_to add_item_path(item),
class: 'ui icon button',
id: "add-item-#{item.id}",
method: :post do %>
<%= fa_icon 'shopping-cart' %>
<% end %>
</td>
My js to send the ajax was:
$(document).ready(function() {
$("a:regex(id,add-item-[0-9]+)").click(function(event) {
event.preventDefault();
var link = $(this).attr("href");
$.ajax({
url: link,
method: "POST",
dataType: "json",
success: function(data) {
console.log(data);
$('#notice-modal').modal('show');
}
});
})
});
and my rails controller action was:
def add
#item = Item.find(params[:item_id])
current_cart << { item_id: #item.id, quantity: 1 }
render json: {quantity: 1}
end
So the problem was I using only event.preventDefault() but wasn't enought. For working fine, I need to use event.stopPropagation(). Like this:
$("a:regex(id,add-item-[0-9]+)").click(function(event) {
event.preventDefault();
event.stopPropagation();
var link = $(this).attr("href");
$.ajax({
url: link,
method: "GET",
dataType: "json",
success: function(data) {
console.log(data);
$('#notice-modal').modal('show');
}
});
})
The event.stopPropagation() is needed because rails component (rails-ujs I think) sent the request elsewhere. You can also remove the method: :post, and will work fine.
Hope I helped!
Do you need to prevent the default form submit action?
$('#some_btn').click(function(event) {
event.preventDefault();
//...
});
I had this problem myself. Turns out, I'd just forgotten to add "//= require jquery_ujs" to my application.js file. As soon as I added it, everything worked fine.
I have a form in my application which I need to submit via Ajax (JQuery), however It needs to get submitted remotely from my JavaScript (i.e. I can not user :remote => true).
I can locate my form in my JavaScript no problems:
my_form = $("#the_id_of_the_form");
Then I create my Ajax request:
$.post('hardcoded path?', function(data) {
// how would I serialize my parameters?
});
Many thanks.
from jquery api
Example: send form data using ajax requests
$.post("test.php", $("#testform").serialize());
In your situation it can be something like that.
$('#your_form').submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "JSON"
});
});
Do not hardcode the url, instead use the url as stored in the form.
You can do this as follows:
$("#the_id_of_the_form").submit(function() {
$.post({
url: $(this).attr('action'),
data: $(this).serialize()
});
});
Hope this helps.
Use jQuery(<FORM_ID>).ajaxSubmit
Your form should be something like following
<%= form_for #user,:url=>{:controller=>:logins, :action => 'sign_up'}, :html=>{ :onSubmit => "return checkSignupValidation()",:id=>"signup_form"} do |f|%>
<% end %>
And your js
function checkSignupValidation()
{
jQuery('#signup_form').ajaxSubmit({
url:"/logins/sign_up",
iframe: true,
dataType: 'script',
success: function(data){
//console.log(data)
}
});
}
Try not to use $.post or $.get, it is not agile and cause troubles in debug and refactoring/
$.ajax({
url: 'only_hardcore_path/' + my_form.serialize(),
type: 'POST'
});
or may be:
$.ajax({
url: 'only_hardcore_path/',
type: 'POST',
data: my_form.serialize()
});