ajax with monogatari

mao

Hi,
I'm triyng to use ajax with monogatari to dynamically download the scripts.
For the ajax connection i use jquery, inserting the jquery script in the section "Third Party JavaScript Libraries" .
Unfortunately i can't activate jquery: it gives me $ is not defined.
Where did i go wrong?

Thanks for help,
Maurizio

ShinProg

Hi @mao,
Can you provide the content of the <head> tag, and if there exists a jquery.js file inside the js/vendor folder ?
(because jQuery is now officially not shipped with Monogatari as of v2.0.2)

If not, you'll have to use the traditional way to bundle jQuery into your project (these steps are inside jQuery's official website)

mao

Hi shinProg,
Here the test code

`{% load static %}
<!DOCTYPE html>

<head prefix="og: http://ogp.me/ns#">

	<title>Monogatari Visual Novel</title> <!--Up to 60-70 Characters. Optimal Format: Primary Keyword - Secondary Keyword | Brand Name-->

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">

	<!-- *** META TAG http-equiv CAMBIATO. settata la security per poter includere gli script nel codice -->
	<!-- *** vedi appunti di sviluppo ( note sviluppo ) per chiarimenti -->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'unsafe-eval' 'unsafe-inline'">

	<meta name="description" content=""> <!--Page description. No longer than 155 characters.-->
	<meta name="keywords" content="">
	<meta name="author" content=""> <!--Name of the author.-->

	<!--Facebook Meta Tags-->
	<meta property="og:image" content="http://" /> <!--URL of Image to show-->
	<meta property="og:description" content="" /> <!--Page Description-->
	<meta property="og:site_name" content="" /> <!--The Name Here-->
	<meta property="og:url" content="http://" /> <!--The Web main URL-->
	<meta property="og:title" content="" /> <!--The Title Here-->

	<!--Google Meta Tags-->
	<meta itemprop="name" content=""> <!--The Name or Title Here-->
	<meta itemprop="description" content=""> <!--Page Description-->
	<meta itemprop="image" content="http://"> <!--URL of Image to show-->

	<!--Twitter Meta Tags - You"ll have to validate your website here: https://dev.twitter.com/docs/cards/validation/validator-->
	<meta name="twitter:card" content="summary_large_image"> <!--Content Card Type-->
	<meta name="twitter:domain" content=""> <!--Your web"s domain-->
	<meta name="twitter:site" content="@"> <!--@publisher-->
	<meta name="twitter:title" content=""> <!--Page Title-->
	<meta name="twitter:description" content=""> <!--Page description less than 200 characters-->
	<meta name="twitter:creator" content="@"> <!--@author-->
	<meta name="twitter:image:src" content="http://"> <!--URL of Image to show-->

	<!--Android Meta Tags-->
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="icon" sizes="192x192" href="{% static 'monogatari/assets/icons/icon_192x192.png' %}"> <!--192 x 192 Icon-->
	<link rel="icon" sizes="128x128" href="{% static 'monogatari/assets/icons/icon_128x128.png' %}"> <!--128 x 128 Icon-->


	<!--Apple Meta Tags-->
	<meta name="apple-mobile-web-app-title" content=""> <!--App Title or Name-->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!--Styling for the iOS Status Bar-->
	<link rel="apple-touch-icon" href="assets/icons/icon_60x60.png"> <!--60 x 60 Icon-->
	<link rel="apple-touch-icon" sizes="76x76" href="assets/icons/icon_76x76.png"> <!--76 x 76 Icon-->
	<link rel="apple-touch-icon" sizes="120x120" href="{% static 'monogatari/assets/icons/icon_120x120.png' %}"> <!--120 x 120 Icon-->
	<link rel="apple-touch-icon" sizes="152x152" href="{% static 'monogatari/assets/icons/icon_152x152.png' %}"> <!--152 x 152 Icon-->
	<link rel="apple-touch-icon" sizes="152x152" href="{% static 'monogatari/assets/icons/icon_167x167.png' %}"> <!--167 x 167 Icon-->
	<link rel="apple-touch-icon" sizes="152x152" href="{% static 'monogatari/assets/icons/icon_180x180.png' %}"> <!--180 x 180 Icon-->

	<!--Microsoft Tags-->
	<meta name="msapplication-TileColor" content=""> <!--Color of the tile on Windows. In hexadecimal format-->
	<meta name="application-name" content="" /> <!-- App Title -->
	<meta name="msapplication-tooltip" content="" /> <!--Small text on hover-->
	<meta name="msapplication-starturl" content="http://" /> <!-- URL to start in -->
	<meta name="msapplication-square70x70logo" content="{% static 'monogatari/assets/icons/icon_70x70.png' %}" /> <!--Image for Tile 70x70-->
	<meta name="msapplication-square150x150logo" content="{% static 'monogatari/assets/icons/icon_150x150.png' %}" /> <!--Image for Tile 150x150-->
	<meta name="msapplication-wide310x150logo" content="{% static 'monogatari/assets/icons/icon_310x150.png' %}" /> <!--Image for Tile 310x150-->
	<meta name="msapplication-square310x310logo" content="{% static 'monogatari/assets/icons/icon_310x310.png' %}" /> <!--Image for Tile 310x310-->

	<!--<link rel="publisher" href=""> Publisher"s Google+ URL-->

	<meta name="theme-color" content=""><!--Theme color for browsers in hexadecimal format.-->

	<!-- <link rel="shortcut icon" href="favicon.ico" /> Favicon. Good tool for creating one: http://xiconeditor.com/ Create all sizes.-->
	<!--<link rel="canonical" href=""> Canonical URL of your webpage-->
	<!-- <link rel="manifest" href="manifest.json"> -->

	<!-- Third Party CSS Libraries -->

	<!-- Monogatari CSS Libraries -->
	<link rel="stylesheet" href="{% static 'monogatari/engine/core/monogatari.css' %}">
	<link rel="stylesheet" href="{% static 'monogatari/style/main.css' %}">

	<!-- Third Party JavaScript Libraries -->

	<!-- JQUERY -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

	<!-- CHIAMATA A JQUERY E VALORIZZAZIONE DELLE VARIABILI DELLO SCRIPS-->
	<script language="JavaScript">

		AJAXMYSCRIPT = {'Start':['ciao pino']};

								var getdata = $.ajax({
								                // definisco il tipo della chiamata
								                type: "POST",
								                // specifico la URL della risorsa da contattare
								                url: AJAXURL_GETSCRIPT,
								                // passo dei dati al server
								                data:{},
								                // definisco il formato della risposta
								                dataType: "json",
								                // collegamento ajax ...
								                success: function(risposta){
								                      // collegamento avvenuto con successo
								                      console.log(risposta);
								                      // passo a verificare il poligono
								                      if(risposta["verified"]==true){
								                            // setto la scena di monogatari
																							myscript = risposta['myscript'];
								                          }
								                          else{
								                            // andato storto, pazienza
								                          }
								                    },
								                error : function(jqXHR, textStatus, errorThrown){
								                        // collegamento ajax non andato a buon fine
								                        // loggo nella console tutti gli eventuali errori
								                        console.log(jqXHR);
								                        console.log(textStatus);
								                        console.log(errorThrown);
								                        },
								              });

		// SETTINGS link chiamate ajax
		var AJAXURL_GETSCRIPT= "{% url 'ajaxglobalrequest' action='get_script' %}";


	</script>

	<script src="{% static 'monogatari/engine/debug/debug.js' %}"></script>
	<script src="{% static 'monogatari/engine/core/monogatari.js' %}"></script>
	<script src="{% static 'monogatari/js/options.js' %}"></script>

		<!-- QI il script.js
				#### INCOLLATO LO SCRIPT : SCRIPT.JS
				nello script vengono usate le variabili valorizzate nella chiamata
				ajax
		-->
		<script language="JavaScript">
		/* global monogatari */

		// Define the messages used in the game.
		monogatari.action ('message').messages ({
			'Help': {
				title: 'Help',
				subtitle: 'Some useful Links',
				body: `
					<p><a href='https://developers.monogatari.io/documentation/'>Documentation</a> - Everything you need to know.</p>
					<p><a href='https://monogatari.io/demo/'>Demo</a> - A simple Demo.</p>
				`
			}
		});

		// Define the notifications used in the game
		monogatari.action ('notification').notifications ({
			'Welcome': {
				title: 'Welcome',
				body: 'This is the Monogatari VN Engine',
				icon: ''
			}
		});

		// Define the Particles JS Configurations used in the game
		monogatari.action ('particles').particles ({

		});

		// Define the canvas objects used in the game
		monogatari.action ('canvas').objects ({

		});

		// Credits of the people involved in the creation of this awesome game
		monogatari.configuration ('credits', {

		});


		// Define the images that will be available on your game's image gallery
		monogatari.assets ('gallery', {

		});

		// Define the music used in the game.
		monogatari.assets ('music', {

		});

		// Define the voice files used in the game.
		monogatari.assets ('voices', {

		});

		// Define the sounds used in the game.
		monogatari.assets ('sounds', {

		});

		// Define the videos used in the game.
		monogatari.assets ('videos', {

		});

		// Define the images used in the game.
		monogatari.assets ('images', {

		});

		// Define the backgrounds for each scene.
		monogatari.assets ('scenes', {

		});


		// Define the Characters
		monogatari.characters ({
			'y': {
				name: 'Yui',
				color: '#5bcaff'
			}
		});

		monogatari.script (AJAXMYSCRIPT);

		</script>

	<script src="{% static 'monogatari/js/main.js' %}"></script>




</head>

<body>

	<!-- Fallback when JavaScript is not available -->
	<noscript>
		<div class="middle text--center">
			<h2>JavaScript Disabled or not Supported.</h2>
			<small>To play this game, please enable JavaScript executing or use a different browser.</small>
		</div>
	</noscript>

	<div id="monogatari">
		<visual-novel>
			<language-selection-screen></language-selection-screen>
			<loading-screen></loading-screen>
			<main-screen>
				<main-menu></main-menu>
			</main-screen>
			<game-screen>
				<dialog-log></dialog-log>
				<text-box></text-box>
				<quick-menu></quick-menu>
			</game-screen>
			<gallery-screen></gallery-screen>
			<credits-screen></credits-screen>
			<load-screen></load-screen>
			<save-screen></save-screen>
			<settings-screen></settings-screen>
			<help-screen></help-screen>
		</visual-novel>
	</div>
</body>

</html>
`

mao

I check, I haven't jquery.js and js/vendor folder.
I downloaded the Monogatari-v2.0.2 zip file..

mao

PS the test code is running on a django server.
without jquery error all working perfectly.

mao

RESOLVED !
the problems was related to the script protection of monogatari.
Instead downloading the jquery script from an CDN I use an jquery copied in the monogatari directory.

Now all works.
Anyway thanks for all,
Maurizio

ShinProg

Aah right the security policies, I would have never thought of that with this code !

I'm glad you solved the error.
Don't forget to mark this thread as solved !