Rails js-routes: get path - javascript

In my rails app I'm trying to make a transition link in my javascript file with help of js-routes gem
$.get(Routes.pay_account_path(self.tour.ID(), {format: 'html'}), function () {
return true;
});
This code seems correct, but there is no transition to path when I click on the button. In browser inspector network I see that http://example.dev/account/38469212-6116-91B2-591C-91D30FBDD6B6/pay.html response is OK

Related

Splash does not render java script

My question is closely related to this post: Splash do not render the whole page
I am not able to configure splash in a way that in renders the dynamic part of the following website:
https://www.wunderground.com/history/daily/ro/slava-cerchez%C4%83/LRTC/date/2018-8-03?cm_ven=localwx_history
The page looks like this
But it should look like this
Here is the splash-script:
function main(splash, args)
assert(splash:go(args.url))
assert(splash:wait(5))
splash:set_viewport_full()
splash.private_mode_enabled = false
splash.indexeddb_enabled = true
splash.html5_media_enabled = true
return {
html = splash:html(),
png = splash:png(),
har = splash:har(),
}
end
I already tried to increase waiting time and to disable private mode. I would be very glad if someone could give a hint how to configure splash correctly so that it renders the java script part.
I had the same issue with the historical weather data on that site. I was unable to figure out how to get the page to render using Splash. However, using a Seleuium driven browser appears to render the page correctly. This isn't as ideal because you'll actually have to render the page, but it works.
Selenium: https://selenium-python.readthedocs.io/installation.html

Google VR View for the Web

I'm trying to embed some 360 images on my site using Google VR View, but I'm having no luck getting anything to work. I'm following the Google provided documentation as a guide...
https://developers.google.com/vr/concepts/vrview-web
`window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'img/jtree.jpg',
is_stereo: false
});
}`
I copied the example code, and am getting errors in the console (see attached screen shots)
Console Errors
Does anyone know of a tutorial that would better outline how to use this? Or possibly can someone shed some light on what I may be doing incorrectly?
You have to open your HTML file in a server.
Enable CORS https://enable-cors.org/server.html.
I find an easy way to enable CORS with the Chrome web server just for your experiment purpose.
I had absolutely no luck getting this to work with the instructions provided by Google - guess I'm not versed enough in coding. For me it only worked when I used the iframe, see https://www.museum-joanneum.at/spielwiese/360.
However, the view is still not exactly the same, the info-Tag is not layered over the image in the left lower corner like the demo on Google, but on top of the image and reduces the image height by about 30 pixels. Maybe that's related to the iframe since the instructions state, that the functionality isn't exactly the same as with the JavaScript API.
Also, for my images I had to select "false" for stereo in order to display correctly.
I hope this helps!
Looks like you are not setting up the directories properly. Is your web server set up so the root is the root of the repo? Are you also getting a 404 error? (looks like vrview.js is not being loaded)
As for places to get help with this, I recommend the vrview-web google group.
you need add this html id on web page.
<div id="vrview"></div>
Below JavaScript will call out the image on HTML.
var vrView;
var scenes = {
petra: {
image: 'images/petra.jpg',
preview: 'images/petra-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'images/blank.png',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);
You can run those scripts only on the server and then only it will render the texture so you can add your all files in the wamp server path and access through or you can create a web project in asp.net, add your files and build the project. everything will be taken care of by the Visual Studio.
For example
download this sample Code
Add this in your wamp server path or create a project in visual
studio and add these files
Open your index.html file the in browser

AngularJS & PrerenderIO, prerenderReady isn't working

I'm setting the prerenderReady flag in my html (inline)
<script> console.log(Date()); window.prerenderReady = false; </script>
and setting it to true in my angular controller upon $http get success like this:
Post.getAll($stateParams.order, $stateParams.type, 10)
.success(function(response) {
Post.setPosts(response.data);
vm.nextUrl = response.next_page_url;
vm.loading = false;
$window.prerenderReady = true;
console.log(Date());
console.log($window.prerenderReady);
});
the difference between the inline date() and the success of the request is 3secs
nevertheless the prerender server reaches over 11500ms gets timed out and renders only the page's header.
I removed the comment from prerender logger and found out prerender had a problem with socket.io
I didn't knew what could be the problem since I am running prerender server and Socket.io server from different nodes and on different ports.
after trying to upgrade phantomjs from 1.9 to 2.0 with no avail
miraculously I tried replacing the socket.io cdn link in my index.html file
with inline script.
Now the pages are rendered perfectly :)

Permission denied to access property 'filepicker_comm_iframe'

Currently facing an issue with Filepicker's iframe in my application... my tools:
Framework: Rails 4 (including turbolinks)
API: Filepicker.io (JS)
File type: Coffeescript
My sample code:
ready = ->
filepicker_api_key = $js_data.data('filepickerApiKey')
unprocessed_path = $js_data.data('unprocessedPath')
filepicker.setKey(filepicker_api_key)
$('#image-upload').click (e) ->
picker_options =
services: ['COMPUTER']
mimetypes: ['image/*']
store_options =
location: 's3'
path: unprocessed_path
access: 'public'
filepicker.pickAndStore picker_options, store_options ->
console.log 'foobar'
# alot of code comes here.. which works whenever I refresh the page
$(document).ready(ready)
$(document).on('page:load', ready)
It stops once I try uploading something. My logs show this error:
Error: Permission denied to access property
'filepicker_comm_iframe'
and doesn't show my 'foobar' log
But when I refresh the page, I receive no error, and the file
uploads accordingly. I am trying to avoid the flaw of having to
refresh the page in order to upload successfully.
Since with turbolinks the body is reloaded, I suggest to move in layout file this code:
<%= filepicker_js_include_tag %>
from <head> to <body>.
It should work fine then (in Rails 4, without installing 'jquery-turbolinks' gem).
In the future we will work on the general solution, independent on where this tag was placed.
I was able to solve this issue, by adding gem 'jquery-turbolinks' to my Gemfile (thus running bundle), and including //= jquery.turbolinks to my application.js.
So far this has been the only valuable work around that I've come across. For this specific scenario.
After loaded, filepicker js add 2 iframes to body. When you use turbolinks to change page, they are gone. So you need to add them again by your self:
if $("#filepicker_comm_iframe").length == 0
$("body").append '<iframe name="filepicker_comm_iframe" id="filepicker_comm_iframe" src="https://dialog.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>'
if $("#fpapi_comm_iframe").length == 0
$("body").append '<iframe name="fpapi_comm_iframe" id="fpapi_comm_iframe" src="https://www.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>'

Installing the phonegap facebook plugin

I'm trying to install the phonegap plugin for Facebook by Jos downloadable here: https://github.com/jos3000/phonegap-plugins/tree/master/Android/Facebook
I've got the folder structure set up like this:
src/com/facebook/android/*.java
src/com/hipsnip/plugins/facebook/FacebookAuth.java
src/com/my_app/app/App.java
libs/phonegap-1.0.0.jar
/res/xml/plugins.xml
assets/www/index.html facebook.js phonegap-1.0.0.js
I've added the plugin to the plugin.xml file like so:
<plugin name="facebook" value="com.hipsnip.plugins.facebook.FacebookAuth" />
I've added the facebook.js to my index.html, and have the following function (which gets triggered by pressing a button):
function facebook_login()
{
var appId = "1234"; // this is your facebook app id change me
window.plugins.facebook.authorize(appId,function(res){
alert(res.name);
});
});
});
}
The app opens up a new browser window (I suspect that's what it is) but all it displays is my application without running javascript.
LogCat shows the following error:
file:///android_asset/www/index.html: Line 95 : TypeError: Result of expression 'window.plugins.facebook' [undefined] is not an object.
Thanks for any help you can give (I suspect it has to do with the way that I've set up the folders, or the way I've added the plugin.xml, but I really don't have a clue)!
PhoneGap now has an official Facebook plugin. Use that.

Categories