phpBB3 AJAX

Area dedicata alle Guide
Regole del forum
Immagine
Rispondi
Support Robot
Membro phpBB3World
Membro phpBB3World
Messaggi: 12
Iscritto il: 11 gen 2014, 2:01

phpBB3 AJAX

Messaggio da Support Robot » 4 apr 2014, 9:11

Ajax sistema di registrazione phpBB
SchoolChat.png
School.png
In questo post ho intenzione di mostrare come ho integrato ajax in Condizioni d’uso, Trattamento dei dati personali e in Registrazione.

Si prega di notare che ci sono diversi bug e verranno indicati alla fine di questo post.

Condizioni d’uso • Trattamento dei dati personali

Queste due pagine sono facili da fare.

Aperi: \styles\prosilver\template\ucp_agreement.html

Trova:

Codice: Seleziona tutto

<!-- INCLUDE overall_header.html -->

<!-- IF S_SHOW_COPPA or S_REGISTRATION -->

<!-- IF S_LANG_OPTIONS -->
<script type="text/javascript">
// <![CDATA[
	/**
	* Change language
	*/
	function change_language(lang_iso)
	{
		document.forms['register'].change_lang.value = lang_iso;
		document.forms['register'].submit();
	}

// ]]>
</script>

	<form method="post" action="{S_UCP_ACTION}" id="register">
		<p class="rightside">
			<label for="lang">{L_LANGUAGE}:</label><select name="lang" id="lang" onchange="change_language(this.value); return false;" title="{L_LANGUAGE}">{S_LANG_OPTIONS}</select>
			{S_HIDDEN_FIELDS}
		</p>
	</form>

	<div class="clear"></div>

<!-- ENDIF -->
Sostituire con:

Codice: Seleziona tutto

<!-- IF NOAJAX -->
<!-- INCLUDE overall_header.html -->
<!-- ENDIF -->
<!-- IF S_SHOW_COPPA or S_REGISTRATION -->
<!-- IF NOAJAX -->
<!-- IF S_LANG_OPTIONS -->
<script type="text/javascript">
// <![CDATA[
	/**
	* Change language
	*/
	function change_language(lang_iso)
	{
		document.forms['register'].change_lang.value = lang_iso;
		document.forms['register'].submit();
	}

// ]]>
</script>

	<form method="post" action="{S_UCP_ACTION}" id="register">
		<p class="rightside">
			<label for="lang">{L_LANGUAGE}:</label><select name="lang" id="lang" onchange="change_language(this.value); return false;" title="{L_LANGUAGE}">{S_LANG_OPTIONS}</select>
			{S_HIDDEN_FIELDS}
		</p>
	</form>

	<div class="clear"></div>
<!-- ENDIF -->
<!-- ENDIF -->
Trova:

Codice: Seleziona tutto

	<form method="post" action="{S_UCP_ACTION}" id="agreement">

	<div class="panel">
Sostituire con:

Codice: Seleziona tutto

	<form method="post" action="{S_UCP_ACTION}" id="agreement">

	<div class="panel" style="width:800px">
Trova:

Codice: Seleziona tutto

			<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" /> 
			<input type="submit" name="not_agreed" value="{L_NOT_AGREE}" class="button2" />
Sostituire con:

Codice: Seleziona tutto

<!-- IF NOAJAX -->
			<input type="submit" name="agreed" id="agreed" value="{L_AGREE}"  class="button1" /> 
			<input type="submit" name="not_agreed" value="{L_NOT_AGREE}" class="button2" />
<!-- ELSE -->
	<input type="button" value="{L_AGREE}" class="button1" onclick="$.post('{S_UCP_ACTION}',$('#agreement').serialize()+'&ajax=y&agreed=I+agree+to+these+terms',function(data){$('#msg-ajax').html(data);set_ajaxbox();})" />  
    <input type="button" value="{L_NOT_AGREE}" class="button2" onclick="ajaxbox_off()" />
<!-- ENDIF -->
Trova:

Codice: Seleziona tutto

			<p><a href="{U_BACK}" class="button2">{L_BACK}</a></p>
Sostituire con:

Codice: Seleziona tutto

			<!-- IF NOAJAX -->
			<p><a href="{U_BACK}" class="button2">{L_BACK}</a></p>
			<!-- ELSE -->
			<p><a onclick="ajaxbox_off()" class="button2">Ok</a></p>
			<!-- ENDIF -->
Trova:

Codice: Seleziona tutto

<!-- INCLUDE overall_footer.html -->
Sostituire con:

Codice: Seleziona tutto

<!-- IF NOAJAX -->

<!-- INCLUDE overall_footer.html -->
			<!-- ENDIF -->
Salva e chiudi il file.

Apri \styles\prosilver\template\overall_footer.html

Trova:

Codice: Seleziona tutto

	<div class="copyright">{CREDIT_LINE}
Sostituire con:

Codice: Seleziona tutto

	<div class="copyright">{CREDIT_LINE}
	<br /> <strong><a href="{U_TERMS_USE}" data-ajax="">{L_TERMS_USE}</a> | <a href="{U_PRIVACY}" data-ajax="">{L_PRIVACY}</a></strong>
Salva il file.

Registrazione.

Apri \styles\prosilver\template\ucp_register.html

Trova:

Codice: Seleziona tutto

<!-- INCLUDE overall_header.html -->

<script type="text/javascript">
// <![CDATA[
	/**
	* Change language
	*/
	function change_language(lang_iso)
	{
		document.forms['register'].change_lang.value = lang_iso;
		document.forms['register'].submit.click();
	}

	<!-- IF CAPTCHA_TEMPLATE and S_CONFIRM_REFRESH -->
	onload_functions.push('apply_onkeypress_event()');
	<!-- ENDIF -->

// ]]>
</script>

<form method="post" action="{S_UCP_ACTION}" id="register">

<div class="panel">
Sostituire con:

Codice: Seleziona tutto

<!-- IF NOAJAX -->

<!-- INCLUDE overall_header.html -->

<script type="text/javascript">
// <![CDATA[
	/**
	* Change language
	*/
	function change_language(lang_iso)
	{
		document.forms['register'].change_lang.value = lang_iso;
		document.forms['register'].submit.click();
	}

	<!-- IF CAPTCHA_TEMPLATE and S_CONFIRM_REFRESH -->
	onload_functions.push('apply_onkeypress_event()');
	<!-- ENDIF -->

// ]]>
</script>
<form method="post" action="{S_UCP_ACTION}" id="register">
<div class="panel">
<!-- ELSE -->
<form method="post" action="{S_UCP_ACTION}" id="register">
<div class="panel"  style="max-width:600px !important">
<!-- ENDIF -->
Trova:

Codice: Seleziona tutto

<div class="panel">
	<div class="inner"><span class="corners-top"><span></span></span>

	<h4>{L_COPPA_COMPLIANCE}</h4>

	<p>{L_COPPA_EXPLAIN}</p>
	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

<div class="panel">
Sostituire con:

Codice: Seleziona tutto

<!-- IF NOAJAX -->
<div class="panel">
<!-- ELSE -->
<div class="panel"  style="max-width:600px !important">
<!-- ENDIF -->
	<div class="inner"><span class="corners-top"><span></span></span>

	<h4>{L_COPPA_COMPLIANCE}</h4>

	<p>{L_COPPA_EXPLAIN}</p>
	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

<!-- IF NOAJAX -->
<div class="panel">
<!-- ELSE -->
<div class="panel"  style="max-width:600px !important">
<!-- ENDIF -->
Trova:

Codice: Seleziona tutto

		<input type="reset" value="{L_RESET}" name="reset" class="button2" /> 
		<input type="submit" tabindex="9" name="submit" id="submit" value="{L_SUBMIT}" class="button1 default-submit-action" />
Sostituire con:

Codice: Seleziona tutto

<!-- IF NOAJAX -->
		<input type="reset" value="{L_RESET}" name="reset" class="button2" /> 
		<input type="submit" tabindex="9" name="submit" id="submit" value="{L_SUBMIT}" class="button1 default-submit-action" />
<!-- ELSE -->
		<input id="registersub" type="button" value="{L_SUBMIT}" class="button1 default-submit-action" onclick="ajaxreg()" />  
      <input type="button" value="{L_CANCEL}" class="button2" onclick="ajaxbox_off()" />
<!-- ENDIF -->
Trova:

Codice: Seleziona tutto

<!-- INCLUDE overall_footer.html -->
Sostituire con:

Codice: Seleziona tutto

<!-- IF NOAJAX -->

<!-- INCLUDE overall_footer.html -->
<!-- ELSE -->
<script type="text/javascript">
// <![CDATA[
   function ajaxreg() {
      $.post('{S_UCP_ACTION}',$('#register').serialize()+'&agreed=true&submit=Submit&ajax=y',function(data){$('#msg-ajax').html(data);set_ajaxbox();});
   }
// ]]>
</script>
<!-- ENDIF -->
Salva

Apri \styles\prosilver\template\overall_header.html

Trova:

Codice: Seleziona tutto

<a href="{U_REGISTER}">
Sostituire con:

Codice: Seleziona tutto

<a data-ajax="" href="{U_REGISTER}">
salvare

Ora che copre la parte di base di questo, ma ci sono più di 3 file da fare, ma è solo una ricerca e sostituzione in tutti e 3 e sono tutti uguali .

Per rendere tutto più facile, ho caricato i 3 file che devono essere cambiati.

Scarica link: http://www.mediafire.com/download/ghy6s ... mplate.zip

Basta caricarli e sostituirli nella cartella \styles\prosilver\template.

I bugs

Ho detto prima che ci sono bug in esso. Ecco i dettagli
- Non ho ancora testato questo con COPPA quindi non so come andrà
- Se si sta utilizzando il captcha di default e si fa clic su "codice di conferma di aggiornamento", si romperà fuori dalla scatola ajax e ricaricare come una pagina intera. Non vi è alcuna correzione per questo ancora.
- Se hai più di un Language Pack installato lo switcher sulla pagina di registrazione può/non può funzionare affatto. Se lo fa, si può uscire dalla scatola ajax e ricaricare l'intera pagina. Non vi è alcuna correzione per questo in questo momento.
- In alcuni browser lo stile può essere un po 'fuori a causa di problemi css.

Ora ho appena postato un nuovo video, con più ajax entrante. Link: http://www.youtube.com/watch?v=aktu-Z3KY_Y

Godere! :)

Rispondi

Torna a “[3.0.x] Guide”

Chi c’è in linea

Visitano il forum: Nessuno e 4 ospiti