I'm currently toying with updating page content via the following:
<%= link_to(content_tag(:span, 'Settings'), edit_admin_store_path, :remote => true)%>
With the javascript as such:
$('nav li a').bind("ajax:success", function(event, data){
console.log(event + data);
$('div#loading').hide();
$('div#container div#content').html(data).hide().fadeIn('100');
});
And was wondering if there is a 'rails way' to also update the address url as well?
Thanks a plenty for any help/advice!
Basically, you are asking for the HTML5 history.pushState method. Great documentation can be found here, at the mozilla developers network.
To be simple, you would push into the history by doing something like this:
var stateObj = { foo: "bar" };
history.pushState( stateObj, "new page title", "forbear.html" )
This will cause the URL to display http://www.yoursite.html/whatever/foobar.html depending on what the URL currently looks like.
Cheers!
Related
When I click href, the URL is changed during page load.
I click href, www.test.com/main#/?arg1=1&arg2=2
, then it is displayed in URL bar.
But during page loading URL is suddenly changed to www.test.com/main#!#%2F%3Farg1=1&arg2=2
I am not sure why #/? characters are changed to #!#%2F%3F
This issue has happened since I update Angularjs version.
Rails is not able to work with urls with # in the middle. Only when # is the anchor of the URL.
When .html.erb is loaded, Rails encode this symbols inside the URLs. You can do something like this.
.html.erb
<%= link_to 'angular link','www.test.com/main#/?arg1=1&arg2=2', class: 'angular-link', data: { url: 'www.test.com/main#/?arg1=1&arg2=2' } %>
javascript
document.addEventListener('DOMContentLoaded', () => {
const angularLinks = document.getElementsByClassName('angular-link');
for(let angularLink of angularLinks) {
setTimeout(function(){
var angularURL = angularLink.getAttribute('data-url');
angularLink.setAttribute('href', angularURL);
}, 1000);
}
});
Is not the best solution, but it works 🤷🏻♂️
The root cause was the hashbang of angularjs.
angularjs now requires Exclamation mark.
I puts ! symbol like this and it works.
!/?
I want to upload files with AJAX. In the past I accomplished this by using the magical jQuery form plugin and it worked great. Currently I'm building a Rails app and trying to do things "The Rails Way" so I'm using the Form Helper and the paperclip gem to add file attachments.
The rails docs warn that the Form Helper does not work for AJAX file uploads:
Unlike other forms making an asynchronous file upload form is not as
simple as providing form_for with remote: true. With an Ajax form the
serialization is done by JavaScript running inside the browser and
since JavaScript cannot read files from your hard drive the file
cannot be uploaded. The most common workaround is to use an invisible
iframe that serves as the target for the form submission.
It seems clear there's no off-the-shelf solution. So I'm wondering what's the smartest thing to do. Seems like I have several options:
Use the form helper and the iframe trick.
Use the form helper + load jQuery form plugin to submit the file (not sure if this will play nice with Rails's authenticity token, etc)
Use the form helper + paperclip + [some other gem] to extend it's functionality to allow AJAX form submission.
All three seem possible. I know the least about #3, specifically the [some other gem] part. I found two similar questions (this and this) which mention a branch of Pic-Upload called Uploadify but those are both 2 years old and deal with Rails 2 and 3 (and Uploadify hasn't been updated in years). So given how much has changed, I think this is really a whole new question:
What's the best way to upload files with AJAX in Rails 4?
Have a look into the remotipart gem: https://github.com/JangoSteve/remotipart -- may get you all of the way there with very little work!
Using #rails/ujs.
view (.html.erb):
<%= file_field_tag :file, { id: "ajax_file_upload"} %>
controller(_controller.rb):
def update
#record = YourModel.find(params[:id])
respond_to do |format|
if #record.update_attributes(params[:your_model])
format.json { render json: { success: true } }
else
error_messages = #record.errors.messages.values.flatten
format.json { render json: { success: false, errors: error_messages } }
end
end
end
javascript(.js)
const uploadFile = element => {
const formData = new FormData();
formData.append("your_model[attribute_name]", element.target.files[0]);
Rails.ajax({
url: "your_model/:id",
type: "PUT",
beforeSend(xhr, options) {
options.data = formData;
return true;
},
success: response => {
if (response.success) {
alert("File uploaded successfully");
}
else {
alert(response.errors.join("<br>"));
}
},
error: () => {
alert("ajax send error");
}
});
};
const documentOnReady = () => {
const fileField = document.getElementById("ajax_file_upload");
if (fileField) {
fileField.addEventListener("change", uploadFile);
}
}
document.addEventListener("turbolinks:load", documentOnReady);
Note: No need to setRequestHeader in ajax while using FormData.
FormData uses the same format a form would use if the encoding type were set to "multipart/form-data"
IMHO Rails is not perfect when dealing with upload files using AJAX, especially if you want a progress bar. My suggestion is to use Javascript for the form submission over an AJAX request like you suggested in (2). If you are comfortable with Javascript you will not have many problems.
I recently used the same approach by using this very simple JS library https://github.com/hayageek/jquery-upload-file and I wrote more details here http://www.alfredo.motta.name/upload-video-files-with-rails-paperclip-and-jquery-upload-file/
For an application with a form to upload a movie with title and description the JS code looks like follow:
$(document).ready(function() {
var uploadObj = $("#movie_video").uploadFile({
url: "/movies",
multiple: false,
fileName: "movie[video]",
autoSubmit: false,
formData: {
"movie[title]": $('#movie_title').text(),
"movie[description]": $('#movie_description').text()
},
onSuccess:function(files,data,xhr)
{
window.location.href = data.to;
}
});
$("#fileUpload").click(function(e) {
e.preventDefault();
$.rails.disableFormElements($($.rails.formSubmitSelector));
uploadObj.startUpload();
});
});
Far from perfect, but gives you flexibility on your frontend.
On my landing page I want users to be able to Share on Facebook and Share on Twitter that page with a particular message. I would like to be able to know when they have actually post it on Facebook and/or Twitter (any way to get the callback).
What is the correct way to add a Facebook Share link in Rails? I want to have my own button.
I have taken a look at Koala but I am wondering if it is too much because I just want to be able to Share that landing page. I don't want to provide any kind of authentication or anything more complex. The only tricky part is that I need to know when they have actually shared.
Thanks
You can use external service like sharethis,addthis with some option,
For facebook you can use own way of sharing for this by registering with facebook app
consider following example
<a href="#" onclick='postToFeed("<%= image_url%>","<%= somte text %>"); return false;'>
<%= image_tag("btn_fb.png" , :alt=>"Facebook") %>
</a>
<script type="text/javascript">
FB.init({appId: APP_ID", status: true, cookie: true});
function postToFeed(img,name) {
// calling the API ...
var obj = {
method: 'feed',
// redirect_uri: 'http://localhost:3000',
link: 'http://url/',
picture: img,
name: 'NAME',
caption: 'CAPTION',
description: DESCRIPTION
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
Friends,
I am going crazy with this issue, I hope you have the answer for me as I have searched wide for this issue. I have a WEB site that has implemented both the 'Like' button and the 'Comments' button. The issue I'm having is actually two-fold:
First:
The usual 'Admin Page' link that goes beside the 'Like' button once the Admin (me) has liked the page is not always present... I can't figure why, because they are exactly the same PHP pages with different info filled from the DB, but they have identical structure. So I don't understand why:
www.rafaelpolit.com/inicio/index.php?sid=14&gim=10
Shows me the Admin Page link, while
www.rafaelpolit.com/inicio/index.php?sid=14&gim=183
Doesn't.
Any ideas?
Second:
The above problem would not be much of an issue if the procedure described on the Open Graph Protocol page (https://developers.facebook.com/docs/opengraph/#publishing) under Publishing would actually work! Here's the actual problem:
My page uses two parameters in the URL to define the page content: one is the section, the other is the image ID.
My other pages that use a single URL attribute, work fine!!! So, if I access (I am using the graph for simplified purposes):
https://graph.facebook.com/http%3A%2F%2Fwww.rafaelpolit.com%2Finicio%2Findex.php%3Fsid%3D106
It correctly shows:
{
"id": "117419061672096",
"name": "Rafael P\u00f3lit - Macro y Objetos",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/188186_117419061672096_2606222_s.jpg",
"link": "http://www.rafaelpolit.com/inicio/index.php?sid=106",
"likes": 2,
"category": "Unknown",
"website": "http://www.rafaelpolit.com/inicio/index.php?sid=106",
"description": "-",
"can_post": true
}
But if I access the graph for one of the URLs with multiple arguments, like:
https://graph.facebook.com/http%3A%2F%2Fwww.rafaelpolit.com%2Finicio%2Findex.php%3Fsid%3D14%26gim%3D10
It truncates the second argument and shows:
{
"id": "http://www.rafaelpolit.com/inicio/index.php?sid=14"
}
As you can see if you enter this though:
graph.facebook.com/159684077425429
The Facebook page is actually correctly working!!! :( Is there a way to actually know a Page_ID if I cannot access the page from any place other than my own site?
So, to sum up my issue:
For some pages I don't get the Admin Page link
For those pages, I have no way of knowing the Page_id
The graph options are not working for pages that have multiple URL arguments/parameters
In the exact same fashion, the https://graph.facebook.com/feed option does not send messages to the people that have 'liked' a page for those pages that have multiple URL parameters, it works fine for those with single parameter.
How do I access the information of a page with two or more parameters?
My final goal is to make something like this actually WORK!:
<?php
$ogurl = urlencode("http://www.rafaelpolit.com/inicio/index.php?sid=14&gim=10");
define("FACEBOOK_APP_ID", "15xxxx84127xxxx");
define("FACEBOOK_SECRET", "xxxx5391830xxxx744b171f0d4b5xxxx");
$mymessage = "Thank you for 'Liking' my Picture.";
$access_token_url = "https://graph.facebook.com/oauth/access_token";
$parameters = "grant_type=client_credentials&client_id=" . FACEBOOK_APP_ID .
"&client_secret=" . FACEBOOK_SECRET;
$access_token = file_get_contents($access_token_url . "?" . $parameters);
$apprequest_url = "https://graph.facebook.com/feed";
$parameters = "?" . $access_token . "&message=" .
urlencode($mymessage) . "&id=" . $ogurl . "&method=post";
$myurl = $apprequest_url . $parameters;
$result = file_get_contents($myurl);
// output the post id
echo "post_id" . $result;
?>
I repeat: This works FINE! if I use the URL of pages with a single URL parameter, it does NOT work if I use URL of pages with multiple parameters.
Any insight? This is a complex issue and I am not a native English speaker, so forgive the extension and any confusion. I appreciate all and every help you may provide!
Thanks a lot,
Rafael Pólit.
ps. Please forgive the non-working links, since I'm new only two of them could actually be links. Most work as copy paste links though, except the graph link which needs https:// in the beginning. Thanks for understanding.
Edit 1:
In response to #Abby 's comment bellow, this is the code I'm using (hopefully formatted instead of the responses in my comments) to insert the button:
<div class="fb_cont ui-corner-all" style="width:706px">
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: '154581841273133', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
<div class="fb_cont_int" style="padding:5px;">
<div class="fb_likeDiv" style="width:240px;">
<div class="fb-like" data-href="http://www.rafaelpolit.com/inicio/index.php?sid=14&gim=183" data-send="false" data-width="240" data-show-faces="true" data-colorscheme="dark" data-font="tahoma"></div>
</div>
<div class="fb_commentDiv" style="width:446px;">
<div class="fb-comments" data-href="http://www.rafaelpolit.com/inicio/index.php?sid=14&gim=183" data-num-posts="4" data-width="446" data-colorscheme="dark"></div>
</div>
<div class="dummy"><!-- --></div>
</div>
</div>
Thanks again #Abby for looking into my issue.
I am looking to only show a form if it is pulled on a page within an iframe. How do I do that? Is there a server side solution?
If you are using JQuery... (installation instructions here: http://jquery.com/ )
$(document).ready(function(){
if( window == window.top) { $('form#myform').hide(); }
});
Which just hides the form with id "myform" if the window is not the topmost window.
I can't think of purely serverside way, but you could use a bit of hybrid javascript/rails.
assuming that you have a dedicated iframe layout template e.g. 'layouts/iframe.erb'
you could put some javascript in the head to check if it is being loaded as an iframe, and if it is not, redirect to an action and maybe display a flash msg "can only load this page inside application"
The javascript/rails for the head
<script type="text/javascript">
function parentExists()
{
return (parent.location == window.location)? true : false;
};
function check_modal(){
if (parentExists()) {
window.location = '<%= url_for( :controller => "home", :action => 'iframe_action', :iframe_fail => 'true')%>'}
}
check_modal()
</script>
notice the param :iframe_fail which you could check for in a controller and do whatever you please if that param is present e.g. display flash msg or redirect
example controller
def iframe_action
if params[:iframe_fail]
flash[:notice] = 'can only load inside app'
else
#do something else
end
end
Not real pretty but might help you get the job done.
My iframe tag was like
%iframe{:height => "98%", :width => "98%",:"id" => "profileIframe"}
I wanted to hide header of my webpage within this iframe hence I used code as:
var $frame = $(window.parent.frames["profileIframe"]).contents();
$frame.find('.header-ui').hide();
If you observe then contents() returns a element as "#document", which is html of iframe, hence calling a javascript without this will try to access your actual webpage rendered in background of iframe.
You can only check it on the client side via JavaScript.
However: DO NOT DO THAT. There are plenty of legitimate uses of putting a site in a (i)frame. Breaking out of such iframe or changing your site in any way in such circumstances them will only make your users pissed unhappy.