Rails links preventing loading of external JS widget - javascript

I am trying to debug an issue where our booking system doesn't load (it is an external widget loaded via javascript), sometimes.
I am able to replicate the issue buy opening the /bookings link, then clicking the bookings link again.
Once I click it again, the widget vanishes, then never reloads. A page refresh fixes this.
Is there a way to fix this issue? Im guessing it has something to do with how Rails loads routes.
Thanks!

Related

Next.js page rendering glitch when refreshing pages

I'm having a weird problem that I originally just dismissed as a development glitch, but now I'm more concerned because It happens every time I refresh the page.
The issue is when I navigate to another page (localhost:3000/otherpage), sometimes it wont render that page at all. The page will turn completely white and have no HTML elements on the page (according to the dev tools inspector). However If I'm on that page and refresh this will always happen. Theses pages are dynamically rendered pages that have logic written that tells them to load a skeleton page while fetching the data, or render an error page if there's a problem with the request. I'm stumped as to why this is happening and have not been able to find anyone else that has experienced this problem yet.
My question is:
Why does this happen? and how can I work around this?
I have a screen recording to better explain whats going on.
(link to unlisted video):
https://youtu.be/mJPp3P4ElsI

How to stop page from redirecting to the previous visited page?

The issue i have is that when i click on any page in my menu, it loads and then goes back to the previous page i visited. I contacted my hosting provider and they said there must be some code somewhere inside the website or database. But i know for sure i didnt put any code in there. Does anyone know where i could find this code or where the problem could be?
I already tried changing the permalinks and all, but this didnt work.
I expect the page to just normally load into my browser window without redirecting to the previous page.
URL is: http://www.vandeheg.nl/
From what I can see this is a problem with the JavaScript on the site, as with JS disabled I can access all the pages without issue.
I'd recommend trying with all plugins deactivated, and then if that doesn't solve the issue have a look through your theme code for anything like window.location that might imply a forced JS redirect.

Prevent a page from fully loading in codeigniter

I have separate views for my navbar (I'm using materialize), home, etc.
This is what my navbar looks like
It has tabs. When I click a another tab, a method in my controller does this
$this->load->view('navbar');
$this->load->view('payables');
However, it reloads my whole navbar which prevents my jquery to fulfill it's duty to change the active tab, the page loads but the tab that is selected is still 'HOME'.
How can I prevent my navbar from reloading and load another page at the same time using $this->load->view(). I researched that there is something called ng-route and ng-view in Angular JS that will accomplish this. Is there a counterpart in codeigniter?
If you click in a tab and you "load a method", it means you're launching a whole HTTP request, and you will reload the full page.
To avoid that, you'll need to do it asynchronously. You'll need to create an AJAX request, to load only the part you want. In your view, you'll have to code the JS request that launches a call to the server to render only the part you want to show. When the server answers, your JS will have to allocate that into the page.

Bootstrap-Switch on Modal loaded from remote page

I'm trying to use Bootstrap-Switch to toggle my checkboxes. It works fine on a normal page, or a modal thats pre-loaded into the page.
However, if I load the modal from a remote page (a href=something.html) the toggle does not work/display. Apparently it loads once but doesn't reload after the modal is opened.
I tried
$("#myModal").on("shown.bs.modal",function(){
$(".checkbox").bootstrapSwitch();
});
But to no avail.
I've tried added the JS code directly to the code being pulled from the Modal as well but it didn't work. It worked on the remote page when loaded directly, but not through the Modal.
I'm a novice JS guy so this may be a trivial fix. Basically need to know how to call bootstrapSwitch() after the modal is loaded.
Thanks!
Just realized I had the shown.bs.modal called 2x for different things. When I combined, it fixed it. Bah, 30 minutes down the drain!

Facebook Like And Twitter Tweet Load Slow

I have put a facebook like, facebook send, and twitter tweet button 10 times on my web page (1 for each article in my thread), but yet the page loads very slowly. Right now the site is just running on my local XAMPP stack but when I comment out those widgets, the page loads instantaneously. Otherwise it takes like 10 seconds to load.
It would be helpful to see the code to make sure you are applying it correctly, but I've experienced similar symptoms before. The way I would render it is by having the associated external Javascript files just before your </body> tag and not in your head. If the connection to the external host is slow, it can cause parallisation issues so you want to load it last.
This is happening all over the web lately. I'll see a slow-loading page and sure enough at the bottom there's a note that facebook or twitter is still loading.
The solution I found was an extension that shows the FB, Twitter buttons but doesn't actually load them unless you click the button. That way your page loads quickly and if FB or Twitter is slow that's their problem.
I use Sharrre for social sharing buttons. I activate it on mouseover so nothing is loaded until the user actually needs it. Hard to get it faster than this. It also supports a few other networks.
I don't load social sharing buttons directly anymore and only do it when there is no other option. Those things are horrible for loading times specially if used multiple times on the same page.

Categories