What am I doing wrong when importing a JS script?

Using Javascript from SpiderBasic
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

What am I doing wrong when importing a JS script?

Post by skinkairewalker »

Hello everyone !
there are some Javascript scripts that I try to import into my project, but most of them always get the error> Uncaught ReferenceError, what am I doing wrong when importing these scripts? below an example of the functional html code :

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>
  <body>
    <h1 class="text-center">Metro 4</h1>
    <h3 class="text-center">The Components Library</h3>
    <div data-role="cube"></div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
  </body>
</html>
But when I try to import the script.js into the SB the error occurs: metro.js: 5450 Uncaught ReferenceError: Metro is not defined
at metro.js: 5450


screenshot : https://prnt.sc/100xl1l

below the SB code that I'm using :

Code: Select all

ExamineDesktops()
Global deskwidth.i = DesktopWidth(0)
Global deskheight.i = DesktopHeight(0)

Declare ButtonClick(index)

Procedure AppendHead(content.s)
  Debug "head"
  !$("head").append(v_content);
EndProcedure

Procedure AppendBody(content.s)
  !$("body").append(v_content);
EndProcedure

Procedure AppendContent(component.i,content.s, Position = #PB_Ignore)
  GID = GadgetID(component)
  If Position <> #PB_Ignore
    ! $(".card:eq(" + v_position + ")").prepend(v_content);
  Else
    ! $(v_gid.div).append(v_content);
  EndIf
EndProcedure

Procedure OnResize()
  
  ExamineDesktops()
  deskwidth = DesktopWidth(0)
  deskheight = DesktopHeight(0)
  
  Debug "Resized W : " + Str(deskwidth)
  Debug "Resized H : " + Str(deskheight)
  
  ResizeWindow(0,#PB_Ignore,#PB_Ignore,deskwidth,deskheight)
  ResizeGadget(0,#PB_Ignore,#PB_Ignore,deskwidth,deskheight)
  
EndProcedure


Procedure Main(URL$, Success)
  
  Debug "Script URL: " + URL$
  Debug "Loading status: " + Success
  
  OpenWindow(0, 0, 0, 600, 600, "",#PB_Window_Background)
  
  ScrollAreaGadget(0, 0, 0, deskwidth, deskheight,600,600) : CloseGadgetList()
  
  AppendContent(0," <h1 class='text-center'>Metro 4</h1>"+
   " <h3 class='text-center'>The Components Library</h3>"+
   " <div Data-role='cube'></div> ") 
  

  
 EndProcedure
    
  Procedure ButtonClick(indice)
    Debug "ButtonClick(" + indice + ")"
  EndProcedure

Procedure init(URL$, Success)
    Debug "Script URL: " + URL$
    Debug "Loading status: " + Success
    
   ; ! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://cdn.metroui.org.ua/v4/css/metro-all.min.css").appendTo("head");

;     ! require(["https://cdn.metroui.org.ua/v4/js/metro.min.js"], function() {
;     Main()
;     ! });    
    
    LoadScript("https://cdn.metroui.org.ua/v4/js/metro.min.js",@Main(),#PB_Script_JavaScript)
    
EndProcedure

BindEvent(#PB_Event_SizeDesktop,@OnResize())

AppendHead("<meta http-equiv='cache-control' content='max-age=0' />' />"+
           "<meta http-equiv='pragma' content='no-cache' />"+
           "<meta http-equiv='cache-control' content='no-store' />"+
           "<meta http-equiv='expires' content='Tue, 01 Jan 1980 1:00:00 GMT' />' />"+
           "<meta http-equiv='expires' content='-1' />")

AppendHead("<meta http-equiv='Content-Security-Policy' content='upgrade-insecure-requests'>")

AppendHead("<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>")

;! $("<link rel='stylesheet' href='https://cdn.metroui.org.ua/v4/css/metro-all.min.css' />").appendTo("head");

LoadScript("https://cdn.metroui.org.ua/v4/css/metro-all.min.css", @init(), #PB_Script_CSS)
Can anyone give me a light ? :)
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: What am I doing wrong when importing a JS script?

Post by Peter »

It seems to be a bigger problem to include the metro-library. In an earlier version I managed to do this with the HttpPreProcessor. In the current version, this no longer seems to work.
killer128k
Posts: 7
Joined: Sat Apr 03, 2021 10:54 am

Re: What am I doing wrong when importing a JS script?

Post by killer128k »

Eng: Hello,
In javascript it is possible to add JS script and run it asynchronously when loading a page.php
here is an example.
By loading a main page and adding snippets of code based on visitors' actions.

Fr: Bonjour,
En javascripte il est possible d'ajouter du scripte JS et de l'exécuter de manière asynchrone au chargement d'un page.php
voici un exemple.
En chargeant une page principale et fure à mesure ajouter des bouts de code en fonction des actions des visiteurs.

Code: Select all

<head>
</head>
<body onload="setup()">		
	<div id="profil"></div>
	<script>
		function load_profil(){
			var xmlhttp = new XMLHttpRequest();
			var url = 'profil.php';
			xmlhttp.onreadystatechange = function () {
				if (xmlhttp.readyState == XMLHttpRequest.DONE) {
					if (xmlhttp.status == 200){
						document.getElementById('profil').innerHTML=xmlhttp.responseText;
						execjs('Dyn_profil.js',document.getElementById('profil'));
						....
					}else if (xmlhttp.status == 400) {
						document.getElementById('profil').innerHTML = 'Appel XMLhttp ->Il y a l\'erreur :400.';
					}else{
						document.getElementById('profil').innerHTML = 'Appel XMLhttp ->Il y a une autre erreur que :200.';
			}	}	};
			xmlhttp.open("GET", url, true);
			xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded charset=utf-8");
			xmlhttp.send();	
		}
		window.onload=function(){	load_profil();		}
	</script>
</body>
killer128k
Posts: 7
Joined: Sat Apr 03, 2021 10:54 am

Re: What am I doing wrong when importing a JS script?

Post by killer128k »

Eng:
If you request a file remotely you may encounter "Blocking a Cross-Origin Request".
Launch the application you created on your server where the file in question is located and it should work.
If you launch it locally or from another site you may have trouble getting your request to swallow your internet browser.
The creators of spiderbasic are doing great, by making the software, when you create an app on the phone, they remove the blocking of requests (Cross-Origin Request).

Fr:
Si tu demande un fichier à distance tu risque de te confronté à "Blocage d’une requête multiorigines (Cross-Origin Request)".
Lance l'application que tu as crée sur ton serveur ou est situé le fichier en question et sa devrai fonctionner.
Si tu le lance en local ou depuis un autre site tu risque d'avoir du mal à faire avaler ta requete à ton navigateur internet.
Les créateurs de spiderbasic on fait fort, en fabriquant le logiciel, quand tu crée une app sur téléphone, ils on enlever le blocage des requetes (Cross-Origin Request).
the.weavster
Posts: 219
Joined: Sat Mar 01, 2014 3:02 pm

Re: What am I doing wrong when importing a JS script?

Post by the.weavster »

I have found how to import Metro UI.

It's another library that detects define in the global namespace and it's that that interferes with LoadScript() so what I have done is temporarily hidden define until the imports are completed:

Code: Select all

Global nLoaded
Global nImports = 2

Procedure Main()
  EnableJS
  var btn = document.createElement('button');
  btn.id = 'btn1';
  m4q('body').css('padding', '20px');
  m4q('body').append(btn);
  m4q('#btn1').text('Click Me!');
  m4q('#btn1').addClass('button primary');
  m4q('#btn1').click(function() { 
    var options = { showTop: true, timeout: 3000 };
    Metro.toast.create("Hello, Metro!", null, null, null, options);
  });
  DisableJS
EndProcedure

Procedure Define_Disable()
  EnableJS
  window['hide-define'] = null;
  if(typeof define === 'function' && define.amd) {
    window['hide-define'] = define;
    define = null;
  }  
  DisableJS
EndProcedure

Procedure Define_Enable()
  EnableJS
  if(window['hide-define'] != null) {
    define = window['hide-define'];
    window['hide-define'] = null;
  }
  DisableJS
EndProcedure

Procedure ScriptLoaded(URL$, Success)
  If Success
    nLoaded + 1
    If nLoaded = nImports ; the number of files to import
      Define_Enable() ; our imports have completed so restore define
      Main()
    EndIf
  Else
    Debug "Failed to load external: " + URL$
  EndIf
EndProcedure

Define_Disable() ; temporarily move define so it doesn't interfere with our imports
LoadScript("https://cdn.metroui.org.ua/v4/css/metro-all.min.css", @ScriptLoaded(), #PB_Script_CSS)
LoadScript("https://cdn.metroui.org.ua/v4/js/metro.min.js", @ScriptLoaded())
User avatar
Paul
Posts: 194
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada
Contact:

Re: What am I doing wrong when importing a JS script?

Post by Paul »

the.weavster wrote: Thu May 27, 2021 4:47 pm I have found how to import Metro UI.

It's another library that detects define in the global namespace and it's that that interferes with LoadScript() so what I have done is temporarily hidden define until the imports are completed:
When I run this code I get an empty browser screen ;(


Browser Dev Tools shows
Uncaught SyntaxError: Unexpected token '{' spiderbasic.js:279
the.weavster
Posts: 219
Joined: Sat Mar 01, 2014 3:02 pm

Re: What am I doing wrong when importing a JS script?

Post by the.weavster »

Paul wrote: Thu May 27, 2021 8:02 pm Browser Dev Tools shows
Uncaught SyntaxError: Unexpected token '{' spiderbasic.js:279
That's because the SB IDE has altered the case of the JavaScript code.
You have to go to:
Preferences->Editor->Editing->Enable Case Correction
to stop it doing that (untick the checkbox)
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: What am I doing wrong when importing a JS script?

Post by Peter »

the.weavster wrote: Thu May 27, 2021 4:47 pmI have found how to import Metro UI. [...]
Kudos! Thank you for this elegant code snippet. This opens up a new world for us SpiderBasic programmers. Image

Greetings ... Peter
User avatar
Paul
Posts: 194
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada
Contact:

Re: What am I doing wrong when importing a JS script?

Post by Paul »

the.weavster wrote: Thu May 27, 2021 8:12 pm That's because the SB IDE has altered the case of the JavaScript code.
Ah... thanks !
Fred
Site Admin
Posts: 1506
Joined: Mon Feb 24, 2014 10:51 am

Re: What am I doing wrong when importing a JS script?

Post by Fred »

Nice !
Post Reply