Help topic for those learning AJAX on phpBB

Discussion forum for Extension Writers regarding Extension Development.
Post Reply
User avatar
caiocald
Registered User
Posts: 60
Joined: Mon Feb 26, 2018 9:32 pm
Location: Brasil
Name: B!
Contact:

Help topic for those learning AJAX on phpBB

Post by caiocald » Mon Aug 05, 2019 3:57 pm

Hello, guys.

I am taking the holidays to study the phpbb platform.

My extension is already finalized and fully operational. But, I happen to be enjoying phpbb so much that I spend my spare time refining her code.

My next step is to learn how to use AJAX on my extension forms. However, when consulting the study materials I realized that there is almost nothing material talking about.

Do you know of any extensions that use the ajax feature in submit and delete forms?

You who are already more experienced. There are more things about this besides the Using Ajax tutorial?

thanks

User avatar
</Solidjeuh>
Registered User
Posts: 1703
Joined: Tue Mar 29, 2016 3:45 am
Location: Aalst (Belgium)
Name: Andy Dm
Contact:

Re: Help topic for those learning AJAX on phpBB

Post by </Solidjeuh> » Mon Aug 05, 2019 4:05 pm


User avatar
Meis2M
Translator
Posts: 875
Joined: Wed Mar 03, 2010 11:32 am
Location: IR.Damghan
Name: میثم نوبری
Contact:

Re: Help topic for those learning AJAX on phpBB

Post by Meis2M » Mon Aug 05, 2019 8:42 pm

what is your extension?
phpBB persian international support
Ultimate SEO Friendly URL - Extension
Follow us in Instagram
Free upgrade and install extensions on your forum - drop me PM

User avatar
caiocald
Registered User
Posts: 60
Joined: Mon Feb 26, 2018 9:32 pm
Location: Brasil
Name: B!
Contact:

Re: Help topic for those learning AJAX on phpBB

Post by caiocald » Mon Aug 05, 2019 10:06 pm

Meis2M wrote:
Mon Aug 05, 2019 8:42 pm
what is your extension?
https://projetoredacaonota1000.com.br/a ... t6946.html

click on "pontuar redação" button for see the form

User avatar
mrgoldy
Jr. Extension Validator
Posts: 1097
Joined: Tue Oct 06, 2009 7:34 pm
Location: The Netherlands
Name: Gijs
Contact:

Re: Help topic for those learning AJAX on phpBB

Post by mrgoldy » Mon Aug 05, 2019 10:18 pm

I'm happy to provide some more information about ajaxifying your forms / extension.

Here are some useful links to start off with:
https://wiki.phpbb.com/Using_AJAX
https://wiki.phpbb.com/JavaScript_Funct ... bb.ajaxify
https://github.com/phpbb/phpbb/blob/aa7 ... te/ajax.js
https://github.com/phpbb/phpbb/blob/f20 ... pt/core.js
https://github.com/phpbb/phpbb/blob/ac8 ... orum_fn.js
https://github.com/phpbb/phpbb/blob/f20 ... /editor.js

A quick example:
HTML:

Code: Select all

{% INCLUDEJS '@vendor_extension/my_js_file.js'%}

<form id="something" name="something" method="post" action="{{ U_ACTION }}" data-ajax="my_callback" data-refresh="true">
	{# ... #}
	<input class="button1" id="submit" name="submit" type="submit" value="{{ lang('SUBMIT') }}">
</form>
PHP:

Code: Select all

if ($this->request->is_set_post('submit')) 
{
	if ($this->request->is_ajax())
	{
		$json_response = new \phpbb\json_response;
		return $json_response->send([
			'my_variable'	=> 'This is my variable',
			'MESSAGE_TITLE'	=> $this->language->lang('INFORMATION'),
			'MESSAGE_TEXT'	=> 'My message text',
			'REFRESH_DATA'	=> [
				'url'		=> $this->helper->get_current_url(),
				'time'		=> 3,
			],
		]);
	}
	else
	{
		// regular response..
		// for example:
		return $this->helper->render('my_html_file.html', 'My HTML file title');
	}
}
JS

Code: Select all

jQuery(function($) {
	phpbb.addAjaxCallback('my_callback', function(r) {
		alert('hello');
		console.log(r.my_variable);
	});
});
In HTML you define if the form should be ajax, with data-ajax="". If you do not need a AJAX callback (do something after the PHP has returned), you can just make it ="true", otherwise it should be your callback's name. If you want the page to automatically refresh after the PHP is done, you have to add a data-refresh="true" aswell.

In PHP you can return a json_response (you can also use Symfony's JsonResponse(). There are a few "special" variables. MESSAGE_TITLE and MESSAGE_TEXT are automatically used to display a message to the user as a confirmation (or error).
If you want the page to automatically refresh, you will have to include the REFRESH_DATA array in your JSON response. It will need the url and time keys. URL is the the URL it should be refresh / redirected to. Where the time is the delay, in seconds. If either REFRESH_DATA or data-refresh="true" is missing, it will not refresh.

Then in your JS file, you can add an AJAX callback with the phpbb.addAjaxCallback(). First parameter is your callback name and the second is the action callback function. The callback function takes one parameter (usually r, res or response). Which is the response send by the JSON response in your PHP. This response is an array identical to the array you send from PHP.

phpBB already has quite a few useful callbacks in place which you can find in the links I provided on top (core.js and ajax.js).

If you need more information / details on something specific, let me know and I'll see if I can point you in the right direction.

User avatar
caiocald
Registered User
Posts: 60
Joined: Mon Feb 26, 2018 9:32 pm
Location: Brasil
Name: B!
Contact:

Re: Help topic for those learning AJAX on phpBB

Post by caiocald » Mon Aug 05, 2019 10:24 pm

Thank you guys!

I'll have all the tabs ready here. I haven't slept yet and I'm in that terrible state when you're not too tired to sleep and too tired to go on ...

tomorrow I see calmly!

Post Reply

Return to “Extension Writers Discussion”