Dynamic ajax content: send POST

[dejitaru]

IM using the dinamyc ajax content script and I have a problem: I load on the rightcolumn a page in php.. everything is ok! but in this new page i load, i have a form
The action of this form call is like this:
action="javascript:ajaxpage('contenido/asignar.php?var=1', 'rightcolumn');

it loads the form correctly, but i can only access the GET vars(var=1) but not the other POST vars.

I llok into the code and I change this line
page_request.open('GET', url, true)
into:
page_request.open('POST', url, true)

but still does not work

Is there a way i can get this post vars? i mean without going to another page, only calling the javascript:ajaxpage ??

[Twey]

You'll need to structure the query using Javascript if you want this to work.
Replace

page_request.open('GET', url, true)
page_request.send(null)

with:

page_request.open('POST', url, true);
page_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var pineapple = document.getElementById("formID").elements; // formID needs to be the ID of your form

for(var fl = 0;fl < pineapple.length; fl++) page_request.send(pineapple[i].name + "=" + pineapple[i].value);

This requires that your form have an ID and that your elements all have names.

[dejitaru]

thanks very much! it works now!

[Twey]

Whoops, forgot the open() call. I guess you figured this out if you got it working. Edited it in in case anyone's reading this.

[ericmn]

Unfortunitaly, somehow it doesn't really work for me.
I really need to get this work with both GET and POST variables, because my site basicly switches pages using this script. If anyone can't be able to use forms in my site, there'll be no point of that site's existence.
I have attached codes that i've tried so far.
Any help will be highly apprecieted! Thanks.


Here're main AJAX codes:

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid,method){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(containerid).innerHTML='<img src="images/loader.gif"> <span class="th">Loading...</span>'
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if(method=='POST'){
page_request.open('POST', url, true) 
page_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var pineapple = document.getElementById("formID").elements;
for(var i = 0; i< pineapple.length; i++) page_request.send(pineapple[i].name + "=" + pineapple[i].value);
}else{
page_request.open('GET', url, true)
page_request.send(null)
}
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>

If you've noticed, i added loading stuff in there. So when i run whole thing, it's just "Loading..." stuff appears all the time with error message at status bar.
Anyway,Here's how i call function to use it:

<?php
echo $_GET['var'];
echo $_POST['mn'];
echo $_POST['bb'];
?>
<form id="formID" action="javascript:ajaxpage('whatsup/news.php?var=1','contentarea','POST');" method="post">
<input type="text" name="mn" id="mn">
<input type="submit" name="bb" id="bb">
</form>

Again, please help out! I did a lot of search and saw some posts in this forum but none of them were helpful. I only need this script to work with both GET and POST vars, otherwise i'll have to change my whole site and that's not possible.
Thanks in advance.

[Twey]

You can't use both GET and POST in the same request, I'm afraid. It has to be either one or the other.

[ericmn]

Thanks for ur response.
Well, i didn't mean i want to get GET and POST vars both in same time.
it's enough for me if i could get them seperately as i wanted, like if i want POST vars, i'd call: ajaxpage('url','contentarea','POST');
and if i want GET vars,i'd call like this: ajaxpage('url','contentarea','GET');

I hope you know what i mean.
Thanks.

[Twey]

var frm = document.forms['formName']; // formName needs to be the name of your form
var pineapple = frm.elements;

if(frm.method.toLowerCase() === "post") {
  page_request.open('POST', url, true);
  page_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  for(var fl = 0;fl < pineapple.length; fl++) page_request.send(pineapple[i].name + "=" + pineapple[i].value);
} else {
  var query_string = "?";
  for(var ji = 0; ji < pineapple.length; ji++)
    query_string += escape(pineapple[ji].name) + "=" + escape(pineapple[ji].value) + (ji + 1 < pineapple.length ? "&" : "");
  page_request.open('GET', url + query_string, true);
  page_request.send(null);
}

[ericmn]

ohh boy...
I can't believe it doesn't work for me again...just same old "Loading..." stuff.
don't say it does works for you...
Here's what i have:

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(containerid).innerHTML='<img src="images/loader.gif"> <span class="th">Ачаалж байна...</span>'
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
var frm = document.forms['ma']; // formName needs to be the name of your form
var pineapple = frm.elements;

if(frm.method.toLowerCase() === "post") {
  page_request.open('POST', url, true);
  page_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  for(var fl = 0;fl < pineapple.length; fl++) page_request.send(pineapple[i].name + "=" + pineapple[i].value);
} else {
  var query_string = "?";
  for(var ji = 0; ji < pineapple.length; ji++)
    query_string += escape(pineapple[ji].name) + "=" + escape(pineapple[ji].value) + (ji + 1 < pineapple.length ? "&" : "");
  page_request.open('GET', url + query_string, true);
  page_request.send(null);
}
}

Here's how i call it:

<?php
echo $_GET['var'];
echo $_POST['mn'];
echo $_POST['bb'];
?>
<form id="ma" name="ma" action="javascript:ajaxpage('whatsup/news.php','contentarea');" method="POST">
<input type="text" name="mn" id="mn">
<input type="submit" name="bb" id="bb">
</form>

Ahhh, i spent last 2 days trying to figure out it. Please HELP!
Thanks very much Twey.

[Twey]

Do you have a demo page?