Why does this throw an error in IE only?

Some of the new bootstrap packages and modern CSS does not work in all browsers.

Thats a PHP error. That has nothing to do with IE. @jlrdw Another thoughtful insightful response!

@jimmck if you note my edit, you'll see I found the error was caused by Vue not binding values with v-model in IE. This causes a null request to be passed to Laravel which throws the error. So yes, it's a PHP error, but caused by IE apparently not supporting a basic function of Vue.

@timesocks A browser cannot create a server side error. Are you confusing some error message or missing the timing of the event? Do have the actual error messages? What does the IE console say?

@TimeSocks Show the vue code, are you using ES6 syntax ? If yes, do you compile it down?

@jimmck @d3xt3r

The browser isn't causing the error directly. But as the data in my inputs is not being bound to the Vue object being passed to the controller, the controller is looking for data that doesn't arrive in the request, so it throws an error.

In all other browsers, the data is bound to the Vue object as it should be, is passed to the controller, and the controller does what it needs to do.

I am not using ES6 code: I was originally, but that caused a different error in both IE and Safari, so I have changed the methods. I am on mobile at the moment but will post code in a short while.

@jimmck I keep telling folks that rather than use the latest just finished 15 minutes ago most popular faddish package something a little older for the most cross-browser support is the way to go but I get as much results talking to a brick wall.

I worked for the state of Texas and I know for a fact they wait at least a year plus for most things like operating systems. Sometimes that latest thing that was finished 87 seconds ago is not necessarily the best. Especially for a broad range of browsers. That's all folks

I guess some of you buy a new TV every two weeks if a new one happens to hit the store, I think not.

@jlrdw You sir are an endless source of needed comic relief ! For me, it all started in a 5000 Watt radio station in Fresno California...

@d3xt3r here's the Vue code:

new Vue({
        el:'#photo',

        data:{
            photo:{
                id:' ',
                size:' ',
                qty:' '
            },

                basketAddSuccess:false,
                sizeSelected:false

            },

            methods:{

                addToBasket:function addToBasket(){
                    var that=this;
                    item=this.photo;
                    this.$http.post('/api/buy/addToBasket',item);
                    this.basketAddSuccess=true;
                    setTimeout(function(){that.basketAddSuccess=false;},4000);
                }
            }
        });

Here's the markup

<input type="hidden" v-model="photo.id" value="{{ $photo[0]->id }}">
<select class="c-select" v-model="photo.size" v-on:click="sizeSelected = true">
<input class="form-control" name="qty" type="number" v-model="photo.qty" value="1">

@jlrdw Vue is 2 years old and a favourite of Jeff, seemed like a good bet to me. Maybe I'll just have to do it the old fashioned way with a form.

Gosh, need IE11 to debug, where would i find one ? Anyway, does your console log any error. Also,

var that=this;
// item=this.photo; // declare this variable properly
var item = this.photo; 
// plus try logging to console for any error while i get hold of IE 11, if thats possible.

@d3xt3r no console errors, just a 500 error when the back end throws a wobbly. I have the same problem - my only access to IE is on my work PC, now I'm at home on my Mac I can't test anything >.<

@TimeSocks The server side error is the root cause of your problem. You most likely have a problem with your Eloquent model. In any event you have to fix your server side problem. The data the browser is getting is not in an expected state. The IE issue is just regular cross browser stuff. Examining what the browser code is doing may help spot your server side issue. But you got to fix the server code. Good Luck!

@jimmck the server side code works flawlessly on EVERY OTHER BROWSER. It takes in data from a request and queries the database based on that request data - basically, an ID. Simple stuff.

Vue, in Internet Explorer, is not binding the data the server side code needs to make the database query. It's not that data is not in an expected state: there is no data. In Internet Explorer, Vue sends an empty request to the back end, and that causes it to flip out.

@TimeSocks SO A PHP ERROR IS NOTHING TO BE CONCERNED WITH. I would try Vue 2.0 in enhanced IE 11 mode.

@TimeSocks what @jimmck is trying to say is that your server side code should be able to handle this cases and respond gracefully and not break when proper input is not received. You can't rely on the assumption that always a correct input will be received.

However, what might cause it to break on ie, you should also investigate that.

@jimmck Sure, a PHP error isn't good, but it's caused by a very specific problem. When Vue does its job, it's a non-issue. It's like not adding name attributes to your form markup and then looking in the PHP for the problem when it can't find the POSTed data - the problem is on the client side, it's not the PHP's problem if the front end isn't set up right.

Granted, it should handle the error more gracefully, and I will work on that, but I need to eliminate the root cause first. Handling the error gracefully doesn't help the fundamental issue.

@jimmck you fail to remember one thing, most people on this forum are hobbiest, blog site play with the framework types who go with the latest fad. Whereas a large enterprise company doesn't go changing to the latest thing every other day.

They normally ensure a very wide range of browsers support. Also they normally don't upgrade software either when the latest, hottest, cutest comes out.

Normally for a good range of browsers support stick with software that is at least one version back. Not everyone has the latest iphone, or a brand new desktop.

Believe it or not, hopefully you will be ok after hearing this, some people still have a computer 3 or 4 years old. And I am not making that up.

It's like

rugger bavy bubbie bunker

Instead of

rubber baby buggy bumper

To translate, a developer before diving neck deep into laravel should have some basics down first. Also he or she should study a library to see if it will work on the intended computers / target browsers that it needs to. As an example a site that sells something. We'll if that latest faddish library doesn't work on a large number of browsers, less sales.

Anyone writing a real site that needs the majority of computers and browsers to work with should never use the latest thing without compatibility checks before going into production.

There, shave and a haircut 2 bits.

@jlrdw I studied genetics in my senior year and was fan of Darwin's Theory of Evolution. Give it a read sometime. Its quite interesting.

Plus some stats http://www.w3schools.com/browsers/browsers_stats.asp.

@d3xt3r The root cause of @TimeSocks bug is a PHP error. The bug is silent except when IE tries to handle the bad request. If you fix the simple PHP error you will see the problem. I have forgotten how many times I have looked back at a piece of code I wrote and said, 'How the hell did that ever work'.

@d3xt3r did you read the whole thing: The following is from that site.

Statistics Can Be Misleading

You cannot - as a web developer - rely ONLY on statistics. Statistics can be misleading.

Note: W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use the browser that comes preinstalled with their computer, and do not seek out other browser alternatives.

Tip: Global averages may not be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, while other sites attract hobbyists using old computers.

Anyway, our data, collected from W3Schools' log-files over many years, clearly shows the long term trends.

The average user tends to use the browser that comes preinstalled with their computer

The average user is probably the one going to a site to buy something.

@TimeSocks Have you opened up browser tools and had a look at tge response? It will probably tell you the exact problem.

@zachleigh I know the exact problem. When vue works it grabs data from the view, binds it to a variable, and passes it to the controller. When vue doesn't work (eg in IE) the data isn't bound and an empty request is passed to the controller, at which point it throws a 500 error because it tries to query the database with null data.

I will probably just switch to using a good old fashioned form to post the data to the backend with a page change.

@TimeSocks out of curiosity I checked the vue forum, there are others having trouble with IE. May want to visit the forum for yourself.

@jlrdw

Statistics Can Be Misleading

Obviously then can be, yet they play a major role in processes as critical as drug approval, so you can't ignore them.

All i am saying, its personal/entrepreneurial choice/decision to stick with proven technology or try out new (which you have deemed faddish btw) (unproven) yet potential technologies. Plus, there's no (major) challenge in the former :( same old routine stuff for which you might not even need programmers/developers but just the coders.

@TimeSocks

When vue doesn't work (eg in IE) the data isn't bound and an empty request is passed to the controller

And you are not curious why ?

I will probably just switch to using a good old fashioned form to post the data to the backend with a page change.

Wow. @jlrdw You win :)

My guess is that you aren't declaring item anywhere. This:

item=this.photo;

Should be this:

var item=this.photo;

@zachleigh yeah I'm going to try that when I get back to a system with IE on Monday. Fallback will be the old fashioned way.

@d3xt3r just a discussion. There are many forms in State Governments websites where javascript isn't allowed. You probably guessed I don't like change and new stuff. I would be happy if we were still at the old MSDOS prompt before there was a windows. Back then dbase 3 ruled.

Well, turns out declaring that item variable properly did the trick.

Now to handle the PHP error gracefully so you don't all come and haunt me. Thanks for the input guys.