Every once in awhile I get the error "Uncaught (in promise) null" when using MGT and I'm unable to access any of the toolkit components. I refresh the page and the error goes away.
Any reason that this could be happening? I'm guessing that the SDK isn't recognizing the login state?
Below is the code where I initialize my provider. Maybe that is the issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/ytq8cvk.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.17.0/js/msal-browser.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/#microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>
<script src="/site/global_scripts" type="text/javascript"></script>
<link href="/site/global_styles" type="text/css" rel="stylesheet">
</head>
<body>
<script src="https://unpkg.com/#microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<mgt-msal2-provider client-id="***"
scopes="user.read,people.read"
></mgt-msal2-provider>
Related
I am using Bootstrap 3 for my website and I can't figure why it's not responsive on iOS (shows like the desktop view). I have already do a quick search about this problem and yes I use the template code provided by Bootstrap but it still doesn't seem to work. Here is the beginning of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laurent Doucet — Graphic designer</title>
<meta name="description" content="—">
<link rel="icon" href="img/favicon.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
Here is my website: http://www.laurentdoucet.be
Thanks a lot for the help.
Your use of frames is preventing your viewport tag from working.
You need to include a viewport meta tag in the outer page also:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>www.laurentdoucet.be</title>
</head>
<frameset>
<frame src="http://www.bepxlagency.be/laurentdoucet/" name="redir">
<noframes>
<p>Original location:
http://www.bepxlagency.be/laurentdoucet/
</p>
</noframes>
</frameset>
</html>
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I'm trying to include UI bootstrap into my script reference, but i'm keeping getting the error saying that my module is not instantiated due to 'ui.bootstrap' not available! Could anybody tell me what I'm doing wrong here?
below is the head part of my index.html
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls.min.js">
</script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
here's the first line of main.js:
var red_joker = angular.module('red_joker', ['ui.bootstrap']);
Somewhere along the line the module name got changed from ui.bootstrap to just ui.
Make sure that your karma.conf.js file has all the JS files your application is using.
AngularJS Jasmine Test Fails: Failed to instantiate module
I've found a strange issue when using JQM + IE10 and touchscreeen on a Windows 8 tablet. When using an external mouse och the trackpad everything works as expected but when I'm using the touch screen normal links in JQM are not working.
Having two very basic JQM pages, b.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is b.html
link to a.html
</body>
</html>
and a.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is a.html
link to b.html
</body>
</html>
Navigation gets stuck on the second one using the touch screen, mouse and trackpad working fine. I guess this is connected to JQM ajax navigation model and the new touch events in IE10, but can't figure out exactly how to solve this.
Chrome is working fine with both mouse/trackpad and touch screen.
EDIT: Might have found a possible workaround, adding this to the css
a {
-ms-touch-action: none;
}
I am developing an iPad application with PhoneGap and jQueryMobile and Kinvey's Javascript method for data storage. It's working fine in simulator and I am not able to get it working in the iPad. I am attaching the index.html code below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="jquery.mobile-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.theme-1.1.0.css"/>
<link rel="stylesheet" href="datetime/jquery.mobile.datebox.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="datetime/jquery.mobile.datebox.min.js"/>
<script async src="kinvey-js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
if(typeof Kinvey != 'undefined')
{
alert('Kinvey is there');
}
else
{
alert('Kinvey is not there');
}
});
</script>
</head>
<body>
Test
</body>
</html>
I am getting the alert message "Kinvey is there", when I run on simulator and I am getting the alert message "Kinvey is not there" on my iPad.
Have you tried loading the library non-async?, change
<script async src="kinvey-js.js"></script>
to:
<script type="text/javascript" src="kinvey-js.js"></script>
Since you're not pulling the library from our AWS bucket you don't need to load the library async. See if this helps make the loading more predictable.