HTML form only works in Chrome after browser refresh - html

I'm working on an existing Rails application using Turbolinks.
I have a plans page with upgrade/downgrade functionality. When this page is visited from another page and a button is clicked to upgrade nothing happens, although when I refresh my browser it seems to work fine and posts the form.
The strange thing is that other buttons work fine with Turbolinks installed and it only seems to happen in Chrome. Firefox, Opera and Safari it works fine.
Has anyone encountered this problem before? I've searched through Google all morning but can't seem to find a resolution.

It seems like it's a problem with Google Chrome. I've fixed it by putting the attribute data-no-turbolink in the HTML on the link that goes to the page in question.
Now, when I go to the page via clicking on the link it doesn't use Turbolinks and makes a full refresh of the page.
To just target Chrome (as it seems to work in other browsers) you could use this piece of js:
if ($.browser.webkit) {
$("your-css-selector").attr('data-no-turbolink', true);
}
Could be seen as a bit of a hack, but it works.

Related

Problem with MDBootstrap (jQuery) dropdowns in Chrome, Firefox

I am creating a small project and for the front end I chose to use Material Design BootStrap (with jQuery), since I like those designs more than the standard BootStrap. Until now everything had worked correctly, but I noticed a strange behavior with one element: the drop-down lists. When you click on a list, it is displayed, but then there is no way to close it again, that is, to do the show / hide function when there is a selection, or when you click somewhere. It just stays open. The only way to close it is to refresh the page. This happens to me even on the MDBootstrap page. (https://mdbootstrap.com/docs/jquery/navigation/navbar/).
Well, some additional data: So far I had done my tests using the latest version of Chrome. I found it strange that such elementary functionality did not work even on the website of its creators. Then I tried Firefox, the same problem. Today in the morning while working, I decided to open the MDBootstrap page on my work computer, and to my surprise the drop-down lists worked correctly! I also did the test on a MacBook with Chrome, entering the same page and it also worked. I even tried from a virtual machine, and in the Chrome of this VM the drop-down lists worked!
In summary, MDBootstrap drop-down lists do not work, so far, in Chrome or Firefox on my personal computer at home. It occurred to me that it could be the extensions of those browsers that were causing some conflict with that element, but I uninstalled and reinstalled both browsers, and the problem persists. I have tried incognito mode with these browsers and it does not work. I tried Internet Explorer and Vivaldi, and in these if the drop-down lists work. Everything is so confusing!
Well, it's my first query on StackOverflow. If you can think of any other possible solution, or why this problem arises, the suggestions will be well received.

Debugging Touch Events on mobile.

The situation.
I have a site that has a menu strip with some links. On a desktop these links work as expected, on mobile firefox, great! However on webkit, safari and chrome, they don't seem to register when you touch them.
I used Adobe Edge to check it out, but it worked fine in that browser, which browser is that anyways, is that webkit based or other?
I also tried using js to debug, but no luck. I would try to to get an alert() if say the parent element, or the link element itself was touched, I can only seem to get them to register if I mash around a bit.
The site is built on Sitefinity, I have looked around and can't seem to find anything relating to this.
How might I be able to go about trying to figure out what the issue is here? It seems to me to be webkit related, correct me if I a wrong, as it happens on chrome and safari.
On Android devices, you can write messages via console.log('blah!') and read them using logcat. You shuold also see other javascript errors in there.
See:
http://developer.android.com/guide/webapps/debugging.html

gif images rendering then disappear chrome

Gif images render for a split second, when page is fully loaded then disappear leaving the broken image icon. This happens only in Chrome other browsers it's fine including Safari.
The weird thing is all has been fine and working perfectly for months up until last night.
Chrome's web developer tool reads 'Failed to load resource'.
Any suggestions would be appreciated.
A link to a page is below.
Thanks,
http://www.isenterprises.co.uk/product_info.php?cPath=33_46&products_id=748
(it's the 'Colours Available' colour swatches that don't render properly)
In fact IE doesn't know who "Transfer-Encoding" is. You will have to write:
header('Content-Transfer-Encoding: deflate');
in paps_makethumb.php.
Add:
header('Transfer-Encoding: deflate');
in paps_makethumb.php
Same issue for me, solved by removing Chrome extensions!
Chrome menu Chrome menu > Settings.
Click Extensions.
Check what's in there... I had to uninstall "QR Code generator" previously installed.
Maybe some extensions need to be updated, but i uninstalled them and now Chrome renders well.

Firefox 3.6 Anchor Link - Improper Functionality

I have a jQuery Mobile Site that is using anchor tagging for navigation. The site has a URL like http://domain_name_here.com/smartphone/home.jsp. When I navigate to a page within the site, for example a product, a link would take you to #product?id=XXX and everything works fine.
However, in Firefox 3.6, I have a link that takes users to #home Back but when a user clicks on it, they are taken to "#/smartphone/home.jsp" instead of the expected "#home." The URL in Firefox 3.6 looks like "http://domain_name_here.com/smartphone/#smartphone/home.jsp" after clicking on the link defined above. This problem seems unique to Firefox 3.6 and it works perfectly fine on all other browsers.
I was wondering if anyone else has experienced this problem, and if so, is there anyway to fix it. The point of using the hash tag is to not reload the page, so a solution that would require the page being loaded again is not valid.

Getting CSS Tooltips with iFrames to work in Chrome

I've been trying to get CSS tooltips with iFrames working cross-browser, but Chrome has issues.
Here's a test page I put together: http://paulleduc.com/test.html
As you can see, it works as expected in FF and IE, with the tooltip popping up to the right of the word every time. In Chrome however, the tooltip pops up at the left of the screen most of the time, and only popping in the correct position when you hover over the words from 'left-to-right' it seems.
Any ideas to get this working in Chrome would be appreciated,
Thanks!
I don't know about the tooltip version you are using specifically. BUT, I use this one
http://www.dynamicdrive.com/dynamicindex5/popinfo.htm
and I have no problem with it working on chrome or FF, it has worked on every browser I have tested it on, it also comes with really good instructions.
And I am not sure if it is supposed to be this way, but when I hover over your links it just opens a small square and I can see the google homepage.
But seriously, the one that i posted above DHTML Tool Tips, works really well cross browser, let me know how it works out if you decide to use it.
Please make sure you are using the latest version of Chrome. I'm using Chrome 17.0.942.0 (Official Build 110446) dev-m and cannot reproduce the issue - the tooltips pop up immediately to the right of the links. However, their contents are empty due to the "Refused to display document because display forbidden by X-Frame-Options." error (which I believe is unrelated.)