Generic Dialog

[vurtan]

I wanted to add a dialog to show some additional information for the player if wanted.

From the documentation https://en.doc.boardgamearena.com/Game_ ... ic_Dialogs I got the source code and embeded that code in a function (I only changed the "html" part to use a template from my project).

This is the one I use :

Code: Select all

		onTilePileClick: function(event) {
		
			// Create the new dialog over the play zone. You should store the handler in a member variable to access it later
			this.myDlg = new ebg.popindialog();
			this.myDlg.create( 'myDialogUniqueId' );
			this.myDlg.setTitle( _("my dialog title to translate") );
			this.myDlg.setMaxWidth( 500 ); // Optional
			
			// Create the HTML of my dialog. 
			// The best practice here is to use Javascript templates
			var html = this.format_block( 'jstpl_scoringOverviewPanelItem', { 
				itemNr: 1,
				color: 'red',
				plId: 4,
				score: 12
			} );
			
			// Show the dialog
			this.myDlg.setContent( html ); // Must be set before calling show() so that the size of the content is defined before positioning the dialog
			this.myDlg.show();
			
			// Now that the dialog has been displayed, you can connect your method to some dialog elements
			// Example, if you have an "OK" button in the HTML of your dialog:
			dojo.connect($('my_ok_button'), 'onclick', this, (event) => {
					event.preventDefault();
					this.myDlg.destroy();
				});
		},

The click triggers the function, but the dialog does not appear and no error apper. I can debug through the code but cannot find any reason. Did I mis something?

[Tisaac]

I wanted to add a dialog to show some additional information for the player if wanted.

From the documentation https://en.doc.boardgamearena.com/Game_ ... ic_Dialogs I got the source code and embeded that code in a function (I only changed the "html" part to use a template from my project).

This is the one I use :

Code: Select all

		onTilePileClick: function(event) {
		
			// Create the new dialog over the play zone. You should store the handler in a member variable to access it later
			this.myDlg = new ebg.popindialog();
			this.myDlg.create( 'myDialogUniqueId' );
			this.myDlg.setTitle( _("my dialog title to translate") );
			this.myDlg.setMaxWidth( 500 ); // Optional
			
			// Create the HTML of my dialog. 
			// The best practice here is to use Javascript templates
			var html = this.format_block( 'jstpl_scoringOverviewPanelItem', { 
				itemNr: 1,
				color: 'red',
				plId: 4,
				score: 12
			} );
			
			// Show the dialog
			this.myDlg.setContent( html ); // Must be set before calling show() so that the size of the content is defined before positioning the dialog
			this.myDlg.show();
			
			// Now that the dialog has been displayed, you can connect your method to some dialog elements
			// Example, if you have an "OK" button in the HTML of your dialog:
			dojo.connect($('my_ok_button'), 'onclick', this, (event) => {
					event.preventDefault();
					this.myDlg.destroy();
				});
		},

The click triggers the function, but the dialog does not appear and no error apper. I can debug through the code but cannot find any reason. Did I mis something?

How are you firing this function ? Do you see any error in the console ?

[Victoria_La]

If you html is invalid it won't be set properly.
Make content of the dialog something simple first

[vurtan]

I did not get any error in the console. The function is connected to the click event of a div. This div is placed in an additional player board.

The first html I tried was just "<h1>Hello</h1>". But I will recheck and post the result.

[vurtan]

I'm back here with the solution. The dojo.connect in the code with runs after "this.myDlg.show();" got executed immediately and destroyed the dialog.

After adding console.log debuging infos I saw that this part got executed.

Code: Select all

dojo.connect($('my_ok_button'), 'onclick', this, (event) => {
	console.log('onTilePileClick | CLOSE');
	event.preventDefault();
	this.myDlg.destroy();
});

Replacing the dojo.connect line with one those fixed it

Code: Select all

dojo.connect($('my_ok_button'), 'onclick', this, (event) => function() {

Code: Select all

this.connect($('my_ok_button'), 'onclick', (event) => {