Using AJAX in SMF 2.0?

[$p00ky]

Dear Community,

I want to use a basic AJAX script on my SMF2 forum and am looking for a HOWTO.
I found some infomation on this forum here, here or there, but it seems to be using the SMF1 implementation.

Is there any difference with SMF2?
And if not, where can I find a full documentation about how to use and implement the functions getXMLDocument() and sendXMLDocument() in my forum?

I would like for example to perform a basic check on an input from a user on a textbox to check if the username is already used or not, and write "OK" if it's not already taken, or "not available" if it's already taken.

[Arantor]

If you're looking to check username, check the code invoked by SMF 2's Register.template.php which actually performs this very check.

In the meantime... unfortunately so much of the code is not documented. In this case you're interested in sendXMLDocument() rather than getXMLDocument(), because you're sending data rather than simply requesting it.

sendXMLDocument has three parameters, which are a string representing the URL to call (full URL), the querystring to call as post data in key=value pairs, and lastly the function to call once the response is received.

The callback function accepts one parameter, which is an object containing the XML response, which seems to be in the form of a document object, so .getElementsByTagName and .getElementById are supported.


You may also be interested in the ajax_indicator function which triggers the "Loading..." notifier at the top, accepts one parameter - whether to show/hide it, true or false - true shows it, false hides it.

[$p00ky]

OK, thanks for your information.

I managed to make my own implementation based on the code used on the original forum to check the username avaibility.

The only problem I have is that I always get the answer "false" in my "receiving" function (in the javascript code).
I don't really know how to debug it but it's up to me!

Thanks for your help.

[Arantor]

What XML are you sending back?

[$p00ky]

This:

Code Select Expand

function template_checkTeamName()
{
global $context, $settings, $options, $txt;

echo '<', '?xml version="1.0" encoding="', $context['character_set'], '"?', '>
<smf>
<message success="', empty($context['error']) ? '1' : '0' ,'" feedback="1">', cleanXml('coool') ,'</message>

</smf>';
}

and my javascript:

Code Select Expand

function checkTeamName()
{
setInnerHTML(document.getElementById('feedback_name'), 'checking...');
if (window.XMLHttpRequest)
{
if (typeof window.ajax_indicator == "function")
ajax_indicator(true);
//alert('barre du haut');
//var team_name = escape(textToEntities(document.forms.addteam.team_name.value.replace(/&#/g, "&#"))).replace(/\+/g, "%2B");
//var team_name = 'prout';
var team_name = document.forms.addteam.team_name.value;
//alert('msg en cours denvoi...');
sendXMLDocument(smf_scripturl + "?action=fqc_checkteamname;xml", "team_name="+team_name, onTeamNameReceived);
//alert('msg envoye');
return false;
}
}

function onTeamNameReceived(XMLDoc)
{
//alert('msg recu');
alert("msg recu="+XMLDoc);
var x= XMLDoc.getElementsByTagName('smf')[0];
alert("smf="+x);
setInnerHTML(document.getElementById('feedback_name'), 'prout');

var y = x.getElementsByTagName('message')[0];
alert("message="+y);
setInnerHTML(document.getElementById('feedback_name'), y.firstChild.nodeValue);
document.getElementById('feedback_name').style.color = y.getAttribute('success') == 1 ? 'green' : 'red';
document.getElementById('feedback_name').style.display = '';

if (typeof window.ajax_indicator == "function")
ajax_indicator(false);

return false;
}

[Arantor]

And what's in the alerts you get? (the full XML source please)

[$p00ky]

That's the problem, I only get: "msg recu=false" (received message=false) in the alert.
And I only receive this alert, not the other ones.

[Arantor]

It would be worth using Firefox+Firebug to see what the actual server response is, since it's not XML by the looks of things.

[$p00ky]

OK, thanks for the int!

Firebug told me the problem was in the PHP code handling the request:

Code Select Expand

403 Forbidden - Session timeout

But the session was actually active, so I removed checkSession() from my PHP code, and it's working now.
I guess I have to use another function to check the session.

[Arantor]

Well you need to pass the session in the call, sendXMLDocument doesn't just naturally pass the session identifier.

[MultiformeIngegno]

Any update $pooky?

[SoLoGHoST]

I'm curious, is there an example of these functions (getXMLDocument, and setXMLDocument) within SMF where I can see this in use?  Examples always help me relate to them a bit easier.

Nevermind, already found it in Post.template.php.  hehe

Thanks

[Arantor]

The insertion of a quote into quick reply is a good example.

It gets the information in question via one of the functions calling upon action=quotefast, through the QuickReply object in editor.js

If you're interested in a much shortened version of the code in question where it's much easier to see, SimpleDesk's code does the same thing in its own JS code, in the package's scripts/helpdesk.js file.

[SoLoGHoST]

Yes, thanks Arantor.  I believe that's all I needed was an example and quotefast did it for me.

Cheers

[SoLoGHoST]

This comment had me cracking up...

// A primitive substitute for the call method to support IE 5.0.

Are there people out there (somewhere) that still use IE 5.0?  lmfao.

[Arantor]

Remember, SMF 2 is built on top of SMF 1, there's still odd bits of IE 4 and IE 5 legacy code that no-one's removed yet.

[SoLoGHoST]

Understood

[Arantor]

In that particular case there's no *need* to remove it, but when I added the quotefast element into SD I certainly didn't include IE 5 templates

[$p00ky]

Any update $pooky?

Oops, sorry I did not check this topic for a while!
Well, I didn't need to transmit the session information so deleting the checkSession() as I did was good enough.
I did not try transmitting the session information in the XML requests, but I guess it's working.

I marked the topic solved