Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India
@ConanThe3rd: Have you tried adding crossDomain: true to the ajax request?

Adbot
ADBOT LOVES YOU

Cock Democracy
Jan 1, 2003

Now that is the finest piece of chilean sea bass I have ever smelled
We recently moved a script tag (with async) from the body to the head on a site. The goal was to capture more traffic in an analytics program. This had a strange side effect though. In Firefox, the page would render, but then never stop loading, hanging on "transferring data" in the status bar. It seemed to not execute some other external JS loaded in the body, which broke the page, since some lazy-loaded images would never appear. I've since moved this tracking tag back to its original location, but what's going on here? Can a <script> tag with async end up blocking other JS anyway? Maybe the script was dynamically adding a non-async script tag? Why would this only happen in Firefox?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Cock Democracy posted:

We recently moved a script tag (with async) from the body to the head on a site. The goal was to capture more traffic in an analytics program. This had a strange side effect though. In Firefox, the page would render, but then never stop loading, hanging on "transferring data" in the status bar. It seemed to not execute some other external JS loaded in the body, which broke the page, since some lazy-loaded images would never appear. I've since moved this tracking tag back to its original location, but what's going on here? Can a <script> tag with async end up blocking other JS anyway? Maybe the script was dynamically adding a non-async script tag? Why would this only happen in Firefox?

Maybe it was referencing the BODY tag or an element in said body, and since it was now executing before the BODY existed, it hung / crapped out? Depending on how the async stuff was written, it could have silently swallowed an error in that case.

ConanThe3rd
Mar 27, 2009

bigmandan posted:

You could consume the API through PHP then make your ajax calls to your own routes and bypass the whole cross origin thing entirely.

Ok. So I’m consuming the api via php’s methods and then routing that result into the js file to process then?

At the risk of sounding like a dumbass, how do I do the intermediate step there (punting the result of the PHP method into something for the JS file to read)?

ConanThe3rd fucked around with this message at 18:47 on Jun 15, 2018

spiritual bypass
Feb 19, 2008

Grimey Drawer
You're not putting anything extra into the JS. Instead, you're creating your own local endpoints on your server that in turn carry out the requests on the remote API. Point your frontend code at those new endpoints under your control and the cross-origin headache goes away.

ConanThe3rd
Mar 27, 2009

rt4 posted:

You're not putting anything extra into the JS. Instead, you're creating your own local endpoints on your server that in turn carry out the requests on the remote API. Point your frontend code at those new endpoints under your control and the cross-origin headache goes away.

Right, so php file reads the code, punts it somewhere on the server [that being the folder I have the project in] which is the endpoint you're speaking of and the JS file has the URL Changed to that so it reads it?

bigmandan
Sep 11, 2001

lol internet
College Slice
So you would have an endpoint ( lets say '/api/whatever') on your server like so

PHP code:
$client = new \GuzzleHttp\Client();

// change auth to whatever is needed from the API you are trying to consume, token, etc...
$result = $client->get('https://www.api.com/v1/whatever', ['auth' => ['user', 'pass']]);
        
header('Content-Type: application/json');
http_response_code($result->getStatusCode());        
        
// echo (or return if you are using some sort of controller in mvc) the contents from the api verbatim
echo $result->getBody()->getContents();
Then you would just change the URL in your ajax config to point to '/api/whatever'. Example above would need some error checking, and whatnot.

The Guzzle Http client is cool and awesome, definitely check it out. http://docs.guzzlephp.org/en/stable/

bigmandan fucked around with this message at 19:48 on Jun 15, 2018

ConanThe3rd
Mar 27, 2009

bigmandan posted:

So you would have an endpoint ( lets say '/api/whatever') on your server like so

PHP code:
$client = new \GuzzleHttp\Client();

// change auth to whatever is needed from the API you are trying to consume, token, etc...
$result = $client->get('https://www.api.com/v1/whatever', ['auth' => ['user', 'pass']]);
        
header('Content-Type: application/json');
http_response_code($result->getStatusCode());        
        
// echo (or return if you are using some sort of controller in mvc) the contents from the api verbatim
echo $result->getBody()->getContents();
Then you would just change the URL in your ajax config to point to '/api/whatever'. Example above would need some error checking, and whatnot.

The Guzzle Http client is cool and awesome, definitely check it out. http://docs.guzzlephp.org/en/stable/

I understand I'm being stupid and thick but where would I declare "/api/whatever"?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

ConanThe3rd posted:

I understand I'm being stupid and thick but where would I declare "/api/whatever"?

So in a non-cross origin world, you have this:

1. Your Web server serves up HTML and JS from yoursite.com
2. On the client, the JS you wrote sends a request to poop.com/api/buttes/
3. The poop.com server sends data to the client.
4. Everyone is happy!!

In a cross-origin world, you must do this:

1. Your Web server serves up HTML and JS from yoursite.com
2. On the client, the JS you wrote sends a request to yoursite.com/proxy.php*
3. The script you wrote on your Web server to handle proxy requests makes a request to poop.com/api/buttes/ sending along any data it got from your client
4. The poop.com server sends data to your server
5. Your server passes the data back to the client.
6. Everyone is happy!!

* You can use Node, python, any other thing you like here in place of PHP

So your javascript only sends requests to the same domain it was served from.

ConanThe3rd
Mar 27, 2009
So, if my php script is called "toilet.php" (to continue the theme) that's what I'm gunning for in my js file's $ajax's URL section?

Like I said, I've been using APIs that haven't been toilets about this for ages so this one kicked my teeth in out of nowhere.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

ConanThe3rd posted:

So, if my php script is called "toilet.php" (to continue the theme) that's what I'm gunning for in my js file's $ajax's URL section?

Like I said, I've been using APIs that haven't been toilets about this for ages so this one kicked my teeth in out of nowhere.

then your JS file does $.ajax({ url: '/toilet.php', ... })

EDIT:And it's toilet.php on the server that talks to poop.com, avoiding cross-domain business.

Lumpy fucked around with this message at 20:53 on Jun 15, 2018

ConanThe3rd
Mar 27, 2009

Lumpy posted:

then your JS file does $.ajax({ url: '/toilet.php', ... })

Aye, thank you so much.

Tea Bone
Feb 18, 2011

I'm going for gasps.
I have a bunch of divs within a container which are all at varying vertical positions using:
code:
top:Xpx;
position:absolute;
If two (or more) Divs end up occupying the same vertical space then I need the second one to move over next to the first, at the moment they're just overlapping eachother. Essentially behave like float:left, but float isn't working because it's over ridden by the position:absolute right?

Is there any way to accomplish this with css?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Tea Bone posted:

I have a bunch of divs within a container which are all at varying vertical positions using:
code:
top:Xpx;
position:absolute;
If two (or more) Divs end up occupying the same vertical space then I need the second one to move over next to the first, at the moment they're just overlapping eachother. Essentially behave like float:left, but float isn't working because it's over ridden by the position:absolute right?

Is there any way to accomplish this with css?

Maybe? Depends greatly on the rules for your positioning. If they all just need to stack under one another when there are many, then yes, it's pretty easy. If they are positioned all over the screen, and you want to know if two overlap and then nudge one down / up so they don't, then the answer is very different, but may still be possible using calc()

Tea Bone
Feb 18, 2011

I'm going for gasps.

Lumpy posted:

Maybe? Depends greatly on the rules for your positioning. If they all just need to stack under one another when there are many, then yes, it's pretty easy. If they are positioned all over the screen, and you want to know if two overlap and then nudge one down / up so they don't, then the answer is very different, but may still be possible using calc()

I'm not sure if I've explained myself very well?

So I have a parent div which lets say is 100px long and 20px wide.
Inside that parent div I have a number of children divs which are 5px wide and variable lengths. Each child div is positioned at some vertical point inside the parent with
code:
top:Xpx;
position:absolute;
say div-1 is 30px long and starts at top:10px
div-2 is also 30px long and starts at top:10px

At the moment div-2 just overlaps div-1 but I need it to move over next to it.

Does that make any sense? It's quite difficult to explain without drawing it out.

kedo
Nov 27, 2007

Tea Bone posted:

I'm not sure if I've explained myself very well?

So I have a parent div which lets say is 100px long and 20px wide.
Inside that parent div I have a number of children divs which are 5px wide and variable lengths. Each child div is positioned at some vertical point inside the parent with
code:
top:Xpx;
position:absolute;
say div-1 is 30px long and starts at top:10px
div-2 is also 30px long and starts at top:10px

At the moment div-2 just overlaps div-1 but I need it to move over next to it.

Does that make any sense? It's quite difficult to explain without drawing it out.

You can manually set a left: Xpx; (or right) value on div 2 to position it somewhere other than on top of div 1, but there's no way to have that done automatically for you with CSS like floats. It sounds like absolute positioning is not actually what you need to use in this scenario.

If you must use absolute positioning, you could use JS to measure the width of each element and then use that number to dynamically set a left or right value on each one.

Also folks who work on the web generally refer to the 'width and height' when describing element dimensions (that is, horizontal and vertical dimensions) because those are the words used in CSS. "Length" doesn't mean anything in this context, except maybe string length which is not what you're referring to. :P

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Tea Bone posted:

I'm not sure if I've explained myself very well?

So I have a parent div which lets say is 100px long and 20px wide.
Inside that parent div I have a number of children divs which are 5px wide and variable lengths. Each child div is positioned at some vertical point inside the parent with
code:
top:Xpx;
position:absolute;
say div-1 is 30px long and starts at top:10px
div-2 is also 30px long and starts at top:10px

At the moment div-2 just overlaps div-1 but I need it to move over next to it.

Does that make any sense? It's quite difficult to explain without drawing it out.

It does not make any sense, at least to me, so a drawing would be great! =)

But my guess is that you want to absolutely position a container with display: flex, then put your DIVs inside of there and they will move over from each other (and wrap if you want with flex-wrap)

Tea Bone
Feb 18, 2011

I'm going for gasps.

kedo posted:

You can manually set a left: Xpx; (or right) value on div 2 to position it somewhere other than on top of div 1, but there's no way to have that done automatically for you with CSS like floats. It sounds like absolute positioning is not actually what you need to use in this scenario.

If you must use absolute positioning, you could use JS to measure the width of each element and then use that number to dynamically set a left or right value on each one.

Also folks who work on the web generally refer to the 'width and height' when describing element dimensions (that is, horizontal and vertical dimensions) because those are the words used in CSS. "Length" doesn't mean anything in this context, except maybe string length which is not what you're referring to. :P

Thanks, yeah that's exactly what I'm doing at the moment. I have it working with JS for the time being but thought a pure CSS method would be cleaner.


Lumpy posted:

It does not make any sense, at least to me, so a drawing would be great! =)

But my guess is that you want to absolutely position a container with display: flex, then put your DIVs inside of there and they will move over from each other (and wrap if you want with flex-wrap)


Thanks, that sounds about right for what I need, I'll look into it. I might also post that drawing up if I remain stuck.

kedo
Nov 27, 2007

Tea Bone posted:

Thanks, yeah that's exactly what I'm doing at the moment. I have it working with JS for the time being but thought a pure CSS method would be cleaner.

Thanks, that sounds about right for what I need, I'll look into it. I might also post that drawing up if I remain stuck.

Agreed with Lumpy in that case. It sounds like you want to have things displayed in some sort of grid (though they might have variable widths). Flex is probably your best bet.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Tea Bone posted:

Thanks, yeah that's exactly what I'm doing at the moment. I have it working with JS for the time being but thought a pure CSS method would be cleaner.



Thanks, that sounds about right for what I need, I'll look into it. I might also post that drawing up if I remain stuck.

I think this is sort of what you want maybe? http://jsfiddle.net/vcq5pudt/

duz
Jul 11, 2005

Come on Ilhan, lets go bag us a shitpost


Is there a good, universal way to indicate to the user their data is being saved with an ajax call without changing the layout to include an inline throbber or am I just going to have to bite the bullet and do that?
The use case is business (government) software, they're not leaving the page just because they're saving the data they've put in so far.

Tei
Feb 19, 2011

duz posted:

Is there a good, universal way to indicate to the user their data is being saved with an ajax call without changing the layout to include an inline throbber or am I just going to have to bite the bullet and do that?
The use case is business (government) software, they're not leaving the page just because they're saving the data they've put in so far.

No?, if you want to tell the user that something was saved withouth a reload, you are gonna need a tiny green checkmark or "changes are saved" green alert line.

If you really want to avoid that, maybe you can pretend the page is a text editor, and when something in the page change add a star to the title "* Data capture", and when is saved, removed the star "Data capture". But I have not seen any page on the internet using this idea so users may not understand it.

You can also be evil, and have a "save changes" button that is always disabled and next to it the text "Changes are saved automatically". So when the users seek the save button they are forced to read the line "changes are saved automatically".

I think the green checkmark is the most user friendly option.

Tei fucked around with this message at 15:06 on Jun 21, 2018

The Dave
Sep 9, 2003

Could you have a small subtle toast notification that says "Changes Saved"?

lunar detritus
May 6, 2009


duz posted:

Is there a good, universal way to indicate to the user their data is being saved with an ajax call without changing the layout to include an inline throbber or am I just going to have to bite the bullet and do that?
The use case is business (government) software, they're not leaving the page just because they're saving the data they've put in so far.

If you don't want to change the layout to add more elements you could always do something like this.

(from https://github.com/hakimel/Ladda)

The Dave
Sep 9, 2003

My assumption with the request is that this is more of an auto save then an action taken after clicking a button.

duz
Jul 11, 2005

Come on Ilhan, lets go bag us a shitpost


Tei posted:

No?, if you want to tell the user that something was saved withouth a reload, you are gonna need a tiny green checkmark or "changes are saved" green alert line.

It's more about indicating the save is in progress since sometimes the server side has to do remote validation or run some long queries.

The Dave posted:

My assumption with the request is that this is more of an auto save then an action taken after clicking a button.

It's either/or depending on the age of the page. The old pages are a mess of terrible code but are on a schedule to eventually be replaced with modern code like the new pages. Just going over the options for some small QoL improvements until they can be replaced. And if those changes can be implemented on the new pages to make the users used to them, all the better. Changing the size of the save button will mess up the layout on some of the older pages, but a well placed toast might work, I'll have to play around with it.

bigmandan
Sep 11, 2001

lol internet
College Slice

gmq posted:

If you don't want to change the layout to add more elements you could always do something like this.

(from https://github.com/hakimel/Ladda)

To expand on this, you could have a save icon with the text, then while saving replace the icon with the loading icon of the same size. This would keep the button width the same in each state. You can then design around the button being a fixed size.

Tei
Feb 19, 2011

duz posted:

It's more about indicating the save is in progress since sometimes the server side has to do remote validation or run some long queries.

I am not a usability expert, but sounds like you have a problem, and your app will always feel crappy to the users no matter what you do.

If you have some save actions take 0.5 seconds and others take 4 seconds, thats like a "worst of both worlds" scenario.
If a update takes more than 9 seconds, that would have the users alerted and checking if theres a problem with the wifi, or the internet has died.


gmq posted:

If you don't want to change the layout to add more elements you could always do something like this.

(from https://github.com/hakimel/Ladda)

This is really cool.

duz
Jul 11, 2005

Come on Ilhan, lets go bag us a shitpost


Tei posted:

I am not a usability expert, but sounds like you have a problem, and your app will always feel crappy to the users no matter what you do.

We sure do, that's why those pages are getting replaced when we can get enough time on the schedule.

McGlockenshire
Dec 16, 2005

GOLLOCKS!
Today the US Supreme Court ruled that states can require out of state companies to collect sales tax from their citizens. Right now this ruling applies only to the law passed in South Dakota, but it won't be long before other states with sales taxes jump aboard that cash cow.

Everyone working in ecommerce is going to have to deal with this sooner or later. When I last did research on sales tax calculator APIs ten years ago, Avalara was the clear winner. Are there other options now?

The Fool
Oct 16, 2003


duz posted:

Is there a good, universal way to indicate to the user their data is being saved with an ajax call without changing the layout to include an inline throbber or am I just going to have to bite the bullet and do that?
The use case is business (government) software, they're not leaving the page just because they're saving the data they've put in so far.

Color the text boxes to indicate status?
Yellow/orange fill to indicate the value hasn't been saved, then flash green and return to normal when the value is saved.

One web application that is used at work has an indicator/button on a status bar that is always at the bottom of the screen, another uses the * indicator in the title bar as described above.

You could also use onbeforunload


McGlockenshire posted:

Today the US Supreme Court ruled that states can require out of state companies to collect sales tax from their citizens. Right now this ruling applies only to the law passed in South Dakota, but it won't be long before other states with sales taxes jump aboard that cash cow.

Everyone working in ecommerce is going to have to deal with this sooner or later. When I last did research on sales tax calculator APIs ten years ago, Avalara was the clear winner. Are there other options now?

yet another reason to not roll your own ecommerce in tyol 2018

MrMoo
Sep 14, 2000

The Fool posted:

yet another reason to not roll your own ecommerce in tyol 2018

You could palm it off to a web service, I know Thomson Reuters have one. I'm sure Amazon must have built their own one too by now.

Tei
Feb 19, 2011

quote:

[chromium-dev] PSA: Ignoring autocomplete='off' by default for password fields

It's been in Canary for a few days now, but I wanted to give a heads up that now, by default, Chrome ignores autocomplete='off' for password fields. This allows the password manager to give more power to users to manage their credentials on websites. It is the security team's view that this is very important for user security by allowing users to have unique and more complex passwords for websites. This does not affect non-password fields. If you'd like to re-enable autocomplete='off' for password fields, there is a "--disable-ignore-autocomplete-off" flag available.

See https://crbug.com/177288 for more information on this decision.
--Joel

Well, gently caress you Joel.

Now I have a field with type="number" and it shows the message "The option of autocomplete for credit cards is disabled because the form uses unsafe connection".

The field html is

<input type="number" class="form-control" name="num_ovulos" id="js-num_ovulos" value="2" min="0" max="999" autocomplete="off">

The form as absolutelly no relation to credit cards whatsoever. Whatever fuzzy logic the browser uses to determine this is a credit card form, is wrong, and stupid. I can't disable autocomplete=off because you. Joel.

Sywert of Thieves
Nov 7, 2005

The pirate code is really more of a guideline, than actual rules.

Tei posted:

This does not affect non-password fields.

Sounds like this guy tests his code in production. :black101:

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Tei posted:

Well, gently caress you Joel.

Now I have a field with type="number" and it shows the message "The option of autocomplete for credit cards is disabled because the form uses unsafe connection".

The field html is

<input type="number" class="form-control" name="num_ovulos" id="js-num_ovulos" value="2" min="0" max="999" autocomplete="off">

The form as absolutelly no relation to credit cards whatsoever. Whatever fuzzy logic the browser uses to determine this is a credit card form, is wrong, and stupid. I can't disable autocomplete=off because you. Joel.

I don't understand how ignoring autocomplete=off for password fields is relevant to sniffing your number field as part of a credit card entry form unless there's a bug in their implementation that makes it ignore fields it shouldn't?

I bet it thinks that's a CVV field, but you can check your other field names against https://chromium.googlesource.com/chromium/chromium/+/master/chrome/browser/autofill/autofill_regex_constants.cc.utf8 just in case

Tei
Feb 19, 2011

Munkeymon posted:

I don't understand how ignoring autocomplete=off for password fields is relevant to sniffing your number field as part of a credit card entry form unless there's a bug in their implementation that makes it ignore fields it shouldn't?

I bet it thinks that's a CVV field, but you can check your other field names against https://chromium.googlesource.com/chromium/chromium/+/master/chrome/browser/autofill/autofill_regex_constants.cc.utf8 just in case

Nah,.. num_ovulos is not in this list. Could be other field that trigger Chrome/Chromium thinking "humm... maybe this is a checkout process with a credit card".

The developers of the browser are free to take this type of decisions. Their public are the people that download the browser. And not us, the people that write websites.

I just think this particular decision remove from us the webmaster a key element to make websites right. And browsers overstep their fuzzy logics and actually create a mess where we don't need one.

Tei fucked around with this message at 17:25 on Jun 27, 2018

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Tei posted:

Nah,.. num_ovulos is not in this list. Could be other field that trigger Chrome/Chromium thinking "humm... maybe this is a checkout process with a credit card".

The developers of the browser are free to take this type of decisions. Their public are the people that download the browser. And not us, the people that write websites.

I just think this particular decision remove from us the webmaster a key element to make websites right. And browsers overstep their fuzzy logics and actually create a mess where we don't need one.

On top of that, theres the political decision to push HTTPS, thats what the message say "this form is not on HTTPS". So theres a dubious technical decision, and on top of it a political decision. And the result is my users are going to be hyper-confused when they see this message in a form that only request some bio data.

Maybe the browser engine developers should lower their opinions about what a browser can do or must do. Specially if they are going to take decisions based on fuzzy logic, that any person with technical background knows are imposible to do withouth false positives.

Yeah, I assume whatever is triggering Chrome's CC form behavior is more complicated than regex matching that one field's name, but it might be worth checking whether any other fields around it match those regexes because that could be part of it. Probably it decides based on something else and then just uses those regex checks to classify the form fields, but if you're dead set on collecting PII over HTTP rather than, say, setting up LetsEncrypt, then you might want to see if you can work backwards from that source file to figure out what it looks for so you can design around that.

Sywert of Thieves
Nov 7, 2005

The pirate code is really more of a guideline, than actual rules.

Munkeymon posted:

I bet it thinks that's a CVV field, but you can check your other field names against https://chromium.googlesource.com/chromium/chromium/+/master/chrome/browser/autofill/autofill_regex_constants.cc.utf8 just in case

I'm honestly a bit shaken that Chrome used some random hardcoded list of strings in various languages to check against to determine something that important. :stare:

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

How else would it be done?

Adbot
ADBOT LOVES YOU

Loezi
Dec 18, 2012

Never buy the cheap stuff

Munkeymon posted:

I bet it thinks that's a CVV field, but you can check your other field names against https://chromium.googlesource.com/chromium/chromium/+/master/chrome/browser/autofill/autofill_regex_constants.cc.utf8 just in case

I... what? I know this is anything but easy problem to solve but using hard coded regexes seems like a real bad way to do this. The regexes look so incredibly random in what languages and phrases they check against, I have a hard time figuring out where these came from. Did they just have a bunch of test pages from a bunch of different languages and go "welp, must be a representative sample!"?

E: ^^

Thermopyle posted:

How else would it be done?

I would have expected something a bit more structured and abstracted, like for example per-language configurations that can be kept separate. Do they expect a single page to have the different fields in different languages? This seems just like some guy went through 15 different test pages, made a list of everything they saw there and then put no more thought into it.

Loezi fucked around with this message at 08:04 on Jun 28, 2018

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply