My website "www.CarpeDiction.com" works fine when accessed from any browser other than Safari. When accessed through Safari, whether desktop or mobile, the homepage works alright, but upon making a query in the site's search box, the 'search' view page crashes the browser after a few seconds, and none of the Material UI 'accordion' components on the page display any results.
There are no errors in the console logs so I'm not sure what the issue is.
The source code can be found here: https://www.github.com/relativelyIntuitive/CarpeDiction
This does indeed crash Safari, but it is also a problem in Google Chrome and all browsers. If you open the site in Chrome and go to the developer tools and the network tab, watch what happens when you search. The app goes into an infinite loop endlessly calling your api. You should fix that because it could get expensive and/or crash your server.
The problem looks like it comes from the way you are using your useEffect functions, for example here:
https://github.com/relativelyIntuitive/CarpeDiction/blob/b213c8ed3d41fdf90172ec1e9f48ebda8fca6616/client/src/components/search/Comments.js
When you get the results back from the api you update the state with
setComments(resComments);
However, you also have comments as a dependency of the effect, which recalls the api every time you update comments, so it calls the function again and again and goes into an endless loop.
[query, comments]);
So you either need to remove that comments dependency, or add some logic to prevent the loop. Or use a library to help, such as react-async-hooks
https://github.com/slorber/react-async-hook
Related
My parser uses phantomjs: it sends many post-requests to a website and gets page contents. From time to time this website displays a captcha that I have to solve.
So the question is. Is there any way to solve captchas manually (e.g. in another webbrowser, Firefox or another one) when the website displays captchas? For example, when my program receives the captcha request, it stops for a while (e.g. waits for a keypress), I open the webpage in another webbrowser, solve the captcha manually and then resume the program.
Will it work? If not, what is the way to make it work?
I didn't try it yet, because I'm affraid of a possible ban by the website I work with.
So here's the situation. I am using a third party digital document signing service called PandaDoc in my mobile application which is built on PhoneGap/Cordova and I am not able to change any of the input, text-type fields when attempting to do this via the mobile app on an iPhone (haven't tested Android yet).
Here are some things i noted about this:
1) When viewed online in Chrome (on my laptop) or on my phone in the Chrome browser everything works fine.
2) The only form elements that aren't working on mobile are the input (type=text) ones. The checkboxes work, the dropdowns work etc...
3) I don't know much about Angular.js but i can tell this third party app was built on it. When i inspect and compare the mobile vs web version i noticed that on the mobile version the input fields have these two directives:
ng-pristine and ng-touched
From what i can tell researching these, they seem to be mutually exclusive so not sure how that would affect things. Also the web version had:
ng-dirty and ng-valid-parse
both of which the mobile version did not have.
I know it would be best if i could post some code here but i don't know where to start. In my app there is just a simple embed script that puts the PandaDoc into an iFrame.
If you want to see the mobile test version of this app you can view it at http://dev.velexo.com/m2 I have a test user with a username of "mobile2" and the password is "pass". Unfortunately there is no easy way to send out the iphone app version of this and that is where the problem is.
Oh also, when you log into the application, click on the W9 Information button and then the Enter Your W9 button, this is what brings up the pandadoc
Also should have mentioned I'm using JQuery Mobile in the app.
Any advice/guidance would be welcome even if it's just a guess.
just looking over my old questions here. The answer to the actual question I asked is that you can not change anything in an iFrame from the parent frame unless both the domain and the port match due to the cross-domain policy restraints.
There are no ways around this that I am aware of.
The solution to my particular problem was to get rid of PandaDoc entirely because it just wasn't designed to be used on a mobile device. In the end i wrote my own javascript for creating a signature and passing to the backend where i used a php pdf generating library to construct the final document.
I have a Node.Js app that uses Socket.IO for a chat-like feature.
It works fine on desktop, but what happens sometimes on an iPhone is that when a user loads the page, they'll load it again and the system thinks that there's two people viewing this page already.
I've experienced this kind of caching error before with other stuff in my app (like it would take a few reloads for the page to fetch the new data – something that never happens to desktop and something that has to do with caching also I think).
Did anybody encounter a similar problem and know a solution?
Maybe there's some kind of directive I can give in the meta tags of my app to tell IOS browsers treat it differently?
Thanks!
I have a very simple test case that explains the problem.
Here's the page that I'm displaying in Rails in an ERB file.
<div><%=rand%></div>
<p>Go</p>
To show the error, I load the page. I note the random number displayed as rand1. I click on the Google link. I click the browser's "Back" button. I note the random number displayed as rand2.
Here's the problem:
In Firefox and Chrome, rand1 != rand2 (always).
In Safari and IE, rand1 == rand2 (always).
Why the discrepancy in browsers? Why is Safari and IE caching the output from Rails while the other two browsers are not? How do I get Safari and IE to refresh the page?
(This is a simple test case to show the problem - this has implications in my Backbone application).
IE and Safari appear to be caching the response from the server, obviously; as long as your browsers are configured correctly, you can change this by changing the Cache-Control header in the response.
Another Stack Overflow post shows the appropriate way to do that, though in Rails 3 there's a shortcut method to accomplish this: you can invoke expires_now in the controller action to avoid manually setting all these headers.
WebKit in particular has an aggressive page caching strategy for handling exactly the case you're describing (clicking a link and then immediately clicking the back button). The idea is to make the back action happen almost instantaneously by caching not just the resources but also the DOM and other state of the page. You can read about it in these two articles:
WebKit Page Cache I — The Basics
WebKit Page Cache II — The unload Event
You may be able to use a combination of the load/unload and pageshow/pagehide events to accomplish what you need.
I'm not sure if IE implements something similar to WebKit, but maybe this will fix it too.
I am having a problem with the loading times/size of an sifr 3 enabled site, and found out the the font swf is requested several times in my application. This can be seen in the network tab of firebug, as well as in the apache logs.
On http://novemberborn.net/flash/prefetching-movies there are some instructions for prefetching. However that does not work, the prefetch Method is not available (still in the docu!). I understand that prefetching is done automatically, however that does not seem to work.
Even in the demo page of the sifr download package, with an empty browser cache I get several hits for rockwell.swf and cochin.swf! Both with Firefox 3 and IE7...
Any chance for an easy and quick fix?
Greetings,
Simon
Fundamentally, this is an issue between the browser and the Flash player. As sIFR inserts the Flash movies into the page, the browser initializes the Flash plugin with the path to the Flash movie. If the movie is not yet in a local cache, it's requested from the server. Since the movies are inserted within a few milliseconds, this would mean that a request is made for each inserted movie.
sIFR tries to prevent this by prefetching the Flash movies. It does this ones per browser session, based on a session cookie. This merely fires off a request for the movie file, and hopefully that file is in the cache by the time replacement starts. Therefore its important to load the sIFR JavaScript code as early as possible, and to activate sIFR properly by passing the Flash movies to the sIFR.activate() method.
In my experience the only way to reliably test this process is clearing browser cache, closing all browser instances (to get rid of the session cookie), then opening the browser and going straight to the page you want to test. I don't find the activity monitors within browsers reliable, so either check through an HTTP proxy or the server logs.
The one remaining improvement I could make is to try and detect the progress of the prefetch, and hold off on replacing elements until the prefetch is complete.
Do you have the option to move to Cufon? You'll find it much easier to use and isn't quirky.