"return false" not functioning properly from ajax example

[Mistrel]

*Bangs head on keyboard*

This is in regards to the example Basic Ajax Routine (get & post).

This is the code on my website:

(fixed)

I copied the code exactly as shown and it's not working. I even tried copying and pasting the entire example page from the first link and it still isn't working.

I've concluded that it has nothing to do with the html. I tried copying the same .js source used on the page as well so I've concluded that it's not the js.

Could it be the php? I must be overlooking something very simple. But what is it?

[ddadmin]

Hi:
I see several errors on your page as far as how you're invoking the ajax routine. Here is the relevant portion of your page:

<script type="text/javascript">

function createpoststring(){
var namevalue=document.getElementById("relatives").innerHTML //get value to post from a DIV
var agevalue=document.getElementById("myform").agefield.value //get value to post from a form field
var poststr = "name=" + encodeURI(namevalue) + "&age=" + encodeURI(agevalue)
return poststr
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
var poststr=createpoststring() //Get contents to post and create query string first
ajaxpack.postAjaxRequest("postit.php", poststr, processGetPost, "txt")

</script>

<a href="#" onclick="var poststr=createpoststring(); ajaxpack.postAjaxRequest('ajaxfiles/postit.php', poststr, processGetPost, 'txt'); return false">
Run example</a> | Source for <a target="eg" href="ajaxfiles/postit.php.txt">
postit.php</a>

It's hard to articulate all the errors above, but the correct version should look something like:

<script type="text/javascript">

function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
alert(myajax.responseText)
else
alert(myajax.responseXML)
}
}
}

function createpoststring(){
var namevalue=document.getElementById("relatives").innerHTML //get value to post from a DIV
var agevalue=document.getElementById("myform").agefield.value //get value to post from a form field
var poststr = "name=" + encodeURI(namevalue) + "&age=" + encodeURI(agevalue)
return poststr
}

var poststr=createpoststring() //Get contents to post and create query string first

</script>

<a href="#" onClick="ajaxpack.postAjaxRequest("postit.php", poststr, processGetPost, "txt"); return false">
Run example</a> | Source for <a target="eg" href="ajaxfiles/postit.php.txt">
postit.php</a>

As you can see, your code is missing a function, plus is invoking the onClick= portion incorrectly inside the link.

[Mistrel]

Thank you for your reply. I updated my code with your edits but it's still not working.

http://3dfolio.com/ediblepoly/tmp.htm

[mwinter]

Thank you for your reply. I updated my code with your edits but it's still not working.

Had you validated your markup, you would have at least removed the obvious problem.

There are several unrelated issues with that example.

• You're using XHTML. Don't. There's no point in serving it to clients if they'll only end up parsing it as badly-written HTML. Moreover, XHTML plus a Transitional document type is step backward, so don't kid yourself about using the latest and greatest.
• Your first heading is level four. Heading levels should never be skipped, and definitely never used just to attain some particular presentational effect. Use the correct levels, styling them with CSS as necessary.
• You've included a form element, yet you have no intention of using it as a form. Why? In my opinion, if your example is even close to what you're really trying to do, you shouldn't be using AJAX at all.
• You use the encodeURI function to percent encode values. However, that function is meant to transform entire URIs. The encodeURIComponent function would be more appropriate, but you should be aware that some older browsers do not implement either function.

Good luck,
Mike

[Mistrel]

Score!! Thank you for that link for wc3 validation. I had no idea there was a resource like that.

The problem was in my href, as you said. I had used double quotes instead of single quotes to reference the php file.

You've included a form element, yet you have no intention of using it as a form. Why? In my opinion, if your example is even close to what you're really trying to do, you shouldn't be using AJAX at all.

This is the same code provided from the DD example. I was only concerned with uncovering why the link wasn't working correctly.

I still don't understand why it didn't work even when I copied exactly what was from the example's source. I tried using xhtml because that was the same doctype used on the DD page.

Everything is working now:

http://3dfolio.com/ediblepoly/ajaxroutine.htm