Facebook Like Box not showing until refresh in Rails 4 - javascript

I followed the instructions that were given in the Facebook Developers page in order to include a like box in my Rails 4 application. It always worked for me great in previous apps, but for some reason, in the current app I need to refresh the page after redirecting to it in order to make the like box show up.
Anyone manage to encounter this problem and found a solution?

Do you use turbolinks gem in this project? It is known to cause problems like that. Have a look at offcial solution http://reed.github.io/turbolinks-compatibility/facebook.html or see what worked for other people here Facebook SDK and rails 4 Turbolinks
If you're not using turbolinks, please add some info about what js libraries are you using, most likely one of them is to blame.

Related

Turbolink (JS) reload issue within Rails app

I'm working on a Rails 5.2 app with Turbolink installed by default. I understand that Turbolink does not reload all assets when navigating through a site so some JS components of the site stop working until I manually reload the page. In my example the navigation dropdown and save button on the edit post page doesn't work. I've tried removing Turbolink from the project altogether and this seems to fix the issue but know that I need Turbolink for performance reasons in production. To my understanding, this is the reason turbolink comes as default with Rails after version 4. The solution I' found online is to add this code below to my JS code:
document.addEventListener("turbolinks:load", function() {
my_func();
})
The problem I have with this solution is that I don't know exactly how to wrap my code with that line. I'm working with a Bootstrap theme that has 4 JS files. The smallest of these files has 200 lines and has various functions. How to do you fix this Turbolink issue when using Bootstrap themes? Do you wrap the solution around the entire javascript file?
Do you need Turbolinks for performance?
Generally, good web caching (304 for assets), defer and async for scripts, etc. will cause a browser to behave almost like with Turbolinks enabled.
But in general, if your theme and/or bootstrap (I haven't used it) doesn't have a single init function, but every single element is initializing itself, then you're probably in for a rough ride.
I would look through the prettified version of the theme (or documentation) to see if there is a general init function you can call.
Hope this helps.

How to make an infinite scroll in Rails?

I've tried with will_paginate_infinite, jquery-infinite-pages and anyone of them could solve my problem.
Tell me other gems for rails or another forms to do it.
Rails 4.2
There should be several ways, I personally have done it using jquery-infinite-pages along with Kaminari gem. (In the GitHub page of jquery-infinite-page` they actually have an example of this).

Disable turbo links for a specific javascript

I have a rails application which makes use of turbolinks. I am happy with everything that turbolinks do except that I have a specific javascript file in assets folder which I want turbolinks to ignore.
I have tried adding data-turbolinks="false" and it works but I am looking for a way to avoid putting this on every link that requires this.
Removing turbolinks works as well but the rendering of all the pages slowed down quite a bit.
I have tried the solution on here as well Re-rendering specific js file with turbolinks enabled
but its not working well and the javascript is really long.
Any advice would be appreciated thanks!

First step with AngularJs plug-in. Browser can't load the controller's function

Recently I've discovered AngularJS as mentioned in the title. After some lectures I'm trying to use this plug-in in order to obtain some dragNdrop feature for my web-page. I've downloaded the code from the git's master but nothing seems to work as planned. All the pages are filled with the AngularJS's syntax.
code result
I've tested the example on 3 different browsers but the result is always the same. The question is: what is the missing step for a correct browser-interpretation of the code? What do I need to include in the stock files given by the owner?
i'm not sure, but i think that the problem is that you're trying (according to attached screenshot) to load nested.html that is sort of "view page" (according to gihub repo), because of that there are no links to angular libs there. That's why try to include angular.js to your page or load index.html instead of nested/nested.html.
I hope my answer will help you to solve your problem.

AngularJS doesn't run on browser reload

I have a new project with the following components in use:
Node.js (v0.10.37)
Express micro framework
Jade templating engine
Angular.js (latest)
Material design library (material.angularjs.org)
Jquery
I have an issue when I do browser reload (hitting the browser refresh button). I am not using any of the Angular.js routing capabilities. I am using the Express router and I have a route for every page.
When I try to refresh, a page build with this components, sometimes (1 of 20 reloads) the AngularJS just doesn't run without any console errors.
The issue is more common when I navigate between routes like:
I am on localhost:3000/index and I go in localhost:3000/about
In this case is more likely to occur this issue.
EDIT: I am not using any of the AngularJS routing capabilities.
EDIT: I also tested the DOMContentLoaded wrapping solution.
EDIT: I attached a plunker but the issue doesn't reproduce. I think it has something to do with the server too. The plunker is really close to reality.
ng-app="StarterApp"
See the plunker :)
EDIT: http://plnkr.co/edit/Vi1AQxNxJTDBf4B1ZEhr?p=preview
EDIT: If you encount the error on plunker please tell me.
EDIT: I also tried to activate: $locationProvider.html5Mode(true);
EDIT: I also found that this occurs when the server and computer (running on localhost) is really stressed. (82% RAM - 1 CPU core at 99%)
I also tracked the requests and I found that the files are loaded correctly on main requests but the requests done in Angular (Ajax requests) doesn't fire.
I also installed some Chrome AngularJS debugging plugin and it doesn't run either when this occurs.
This happens on all my pages sometimes, so I don't think that some code will be useful.
To fix this I reload again and sometimes I reload 2 times to fire up the Angular.JS.
This are the following cases:
When it is working
The interface
The console
When it is not working
The interface
The console
It really annoys me. I will continue investigating this issue but I will really appreciate any help.
Evrika!
I found the problem. Thank you all for support.
It was a problem about angular.js debugging chrome/firefox extensions.
The Ng-Inspector loads on every load a script ng-inspector.js and in this script it is a controller that deals with $state service and declare how to load the user modules in order to push debugging data into the plugin.
Somehow this loading configuration messes with my loading configuration.
The code was well-written but I didn't thought about this.
So if you encount this problem make sure that your debugging plugins (ng-inspector and angular batarang) don't interact with your business logic inside your project.
I made some stress testing to make sure that this issue doesn't occur anymore.
Server load
Now everythink is ok.

Categories

Resources