Created
August 12, 2017 07:23
-
-
Save zspitzer/3d191b19562cd2fc8e32d5530b28155b to your computer and use it in GitHub Desktop.
Bootstrap 4 with requirejs demo bootstrap 4 example with requirejs // source https://jsbin.com/xululo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="bootstrap 4 example with requirejs"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Bootstrap 4 with requirejs demo</title> | |
| </head> | |
| <body> | |
| Unfortunately, I keep getting this error | |
| <p>Bootstrap dropdown require Popper.js (https://popper.js.org)</p> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script> | |
| <div id="loadStatus" align="center"></div> | |
| <div id="loadError"></div> | |
| <script id="jsbin-javascript"> | |
| require.config({ | |
| paths: { | |
| 'jQuery': "https://code.jquery.com/jquery-3.2.1", | |
| 'Bootstrap': "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min", | |
| 'Popper': "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.1/popper" | |
| }, | |
| shim: { | |
| Bootstrap: { | |
| deps: ["jQuery","Popper"], | |
| exports: "Bootstrap" | |
| } | |
| } | |
| }); | |
| var loadError = false; | |
| window.onerror = function (errorMsg, url, lineNumber) { | |
| console.log(errorMsg); | |
| requirejs.onError({ | |
| message: errorMsg, | |
| stack: url + ' Line: ' + lineNumber | |
| }); | |
| } | |
| requirejs.onError = function (err) { | |
| loadError = true; | |
| var error="<h4>Sorry an error occured whilst loading <i class='fa fa-refresh' onclick='document.location.reload(true)'></i></h4>"; | |
| if (console) | |
| console.log(err); | |
| error += "<br><pre>" + err.message + "<hr>" + err.stack + "</pre>"; | |
| var s=document.getElementById('loadError'); | |
| if (s) | |
| document.getElementById('loadError').innerHTML = error; | |
| }; | |
| requirejs.onResourceLoad = function (context, map, depArray) { | |
| var s=document.getElementById('loadStatus'); | |
| if (s) | |
| s.innerHTML=map.name; | |
| } | |
| console.log("go!") | |
| if (!loadError){ | |
| require(['jQuery','Popper', 'Bootstrap'], function($, popper, bootstrap){ | |
| console.log("loaded", $, popper, bootstrap); | |
| }); | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">require.config({ | |
| paths: { | |
| 'jQuery': "https://code.jquery.com/jquery-3.2.1", | |
| 'Bootstrap': "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min", | |
| 'Popper': "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.1/popper" | |
| }, | |
| shim: { | |
| Bootstrap: { | |
| deps: ["jQuery","Popper"], | |
| exports: "Bootstrap" | |
| } | |
| } | |
| }); | |
| var loadError = false; | |
| window.onerror = function (errorMsg, url, lineNumber) { | |
| console.log(errorMsg); | |
| requirejs.onError({ | |
| message: errorMsg, | |
| stack: url + ' Line: ' + lineNumber | |
| }); | |
| } | |
| requirejs.onError = function (err) { | |
| loadError = true; | |
| var error="<h4>Sorry an error occured whilst loading <i class='fa fa-refresh' onclick='document.location.reload(true)'></i></h4>"; | |
| if (console) | |
| console.log(err); | |
| error += "<br><pre>" + err.message + "<hr>" + err.stack + "</pre>"; | |
| var s=document.getElementById('loadError'); | |
| if (s) | |
| document.getElementById('loadError').innerHTML = error; | |
| }; | |
| requirejs.onResourceLoad = function (context, map, depArray) { | |
| var s=document.getElementById('loadStatus'); | |
| if (s) | |
| s.innerHTML=map.name; | |
| } | |
| console.log("go!") | |
| if (!loadError){ | |
| require(['jQuery','Popper', 'Bootstrap'], function($, popper, bootstrap){ | |
| console.log("loaded", $, popper, bootstrap); | |
| }); | |
| } | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| require.config({ | |
| paths: { | |
| 'jQuery': "https://code.jquery.com/jquery-3.2.1", | |
| 'Bootstrap': "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min", | |
| 'Popper': "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.1/popper" | |
| }, | |
| shim: { | |
| Bootstrap: { | |
| deps: ["jQuery","Popper"], | |
| exports: "Bootstrap" | |
| } | |
| } | |
| }); | |
| var loadError = false; | |
| window.onerror = function (errorMsg, url, lineNumber) { | |
| console.log(errorMsg); | |
| requirejs.onError({ | |
| message: errorMsg, | |
| stack: url + ' Line: ' + lineNumber | |
| }); | |
| } | |
| requirejs.onError = function (err) { | |
| loadError = true; | |
| var error="<h4>Sorry an error occured whilst loading <i class='fa fa-refresh' onclick='document.location.reload(true)'></i></h4>"; | |
| if (console) | |
| console.log(err); | |
| error += "<br><pre>" + err.message + "<hr>" + err.stack + "</pre>"; | |
| var s=document.getElementById('loadError'); | |
| if (s) | |
| document.getElementById('loadError').innerHTML = error; | |
| }; | |
| requirejs.onResourceLoad = function (context, map, depArray) { | |
| var s=document.getElementById('loadStatus'); | |
| if (s) | |
| s.innerHTML=map.name; | |
| } | |
| console.log("go!") | |
| if (!loadError){ | |
| require(['jQuery','Popper', 'Bootstrap'], function($, popper, bootstrap){ | |
| console.log("loaded", $, popper, bootstrap); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment