Javascript / Php

[ckrudelux]

I was wondering how to send information to my php script.I have this javascript that opens a box and gets a php document that will fill this box with fancy text really nice if I may say but I need some way to send inforamtion to this php document so it knows what to write dependening on which link I click on.Like if I press replay it should tell the php document to get replay information or if I press edit it should open the edit part.Any suggestions?

[justsomeguy]

Pass it through the querystring when you load the PHP page.

[ckrudelux]

Pass it through the querystring when you load the PHP page.

Using HTTPrequest?

[justsomeguy]

Yeah, however you're sending the request.

[ckrudelux]

Yeah, however you're sending the request.

Feels like I should know what a querystring is but I don't.. I think of "GET" but I'm wrong about that I guess

[justsomeguy]

The querystring is everything after the ? in the URL.

[ckrudelux]

The querystring is everything after the ? in the URL.

Okay but I have more then one link and sending it by the guerystring is not going to work couse the page isn't reloading.I have a some link looks like this:

   <a href="" OnClick="java script:openBox('jpopupbox'); MakeRequest(); return false;">Länk</a>

And this will change the style form none to block, while loading a php code from an other file in to the div using httprequest.I need something to tell the php code witch link button I pressed so it knows what to load.Say this link has an id 12 and want to load function replay.Now I'm just guessing couse I have no clue how to do this:

   <a href="" OnClick="java script:openBox('jpopupbox'); MakeRequest(); id('12'); type('replay'); return false;">Länk</a>

<?php$variable_id = "<script type="text/javascript"> document.write(id); </script>"$variable_type = "<script type="text/javascript"> document.write(type); </script>"?>

Something like that if you understand what I was trying to code.

[justsomeguy]

You're sending a request to a PHP page, right? I assume that MakeRequest sends the request. So add whatever you want to the querystring when the request goes out, so that the PHP page can access it. It's no different than submitting a form, you can either use the querystring or you can use post, whatever you want to do.

[ckrudelux]

You're sending a request to a PHP page, right? I assume that MakeRequest sends the request. So add whatever you want to the querystring when the request goes out, so that the PHP page can access it. It's no different than submitting a form, you can either use the querystring or you can use post, whatever you want to do.

But how can I use them then the page don't reload? don't I need to reload the hole page to send informtion through POST or GET?

[ckrudelux]

But how can I use them then the page don't reload? don't I need to reload the hole page to send informtion through POST or GET?

Okay I just figured that I was going to test this even that I don't understand and it worked. :)But I don't know how to set the values form the link button.

[justsomeguy]

But how can I use them then the page don't reload? don't I need to reload the hole page to send informtion through POST or GET?

No man, isn't that the point of ajax? Ajax requests use get or post just like any other request. There is nothing different about an ajax request versus any other request that your browser sends, you just use Javascript to send the request. You can still use get, and you can still use post.Any values you want to send need to be sent to the function that sends the request. You can't use one function to send the request and another function to send the values that were supposed to be in the request that just got sent, you use one function to send the request and accept whatever values need to be sent so that it can add them to the request when it sends it. If you only have a few values to send you can just use regular parameters for the function, if you want to build the function so that it can accept any number of values to send it's a little more complex.

[ckrudelux]

No man, isn't that the point of ajax? Ajax requests use get or post just like any other request. There is nothing different about an ajax request versus any other request that your browser sends, you just use Javascript to send the request. You can still use get, and you can still use post.Any values you want to send need to be sent to the function that sends the request. You can't use one function to send the request and another function to send the values that were supposed to be in the request that just got sent, you use one function to send the request and accept whatever values need to be sent so that it can add them to the request when it sends it. If you only have a few values to send you can just use regular parameters for the function, if you want to build the function so that it can accept any number of values to send it's a little more complex.

Well seens I don't usally code javascript/ajax I'm not sure how to code the complex version of it have some clues but I'm not sure how to do it.

[justsomeguy]

Post the makeRequest function you're using now.

[ckrudelux]

Post the makeRequest function you're using now.

function MakeRequest()		{			var xmlHttp = getXMLHttp();		 			xmlHttp.onreadystatechange = function()			{				if(xmlHttp.readyState == 4)				{					HandleResponse(xmlHttp.responseText);				}			}						xmlHttp.open("GET", "formbox.php?JStype=&JSid=", true);			xmlHttp.send(null);		}

and

<a href="" OnClick="java script:openBox('jpopupbox'); MakeRequest(); return false;">Länk</a>

[justsomeguy]

So the goal is to do something general-purpose, where you can use anywhere. That means the URL, method, etc should be options. The best way to set this up is to send the function an object that contains all of the options. It's easiest to use the shorthand JSON format for that. So one way to make an object is like this:

var obj = new Object();obj.method = 'get';obj.url = 'formbox.php';obj.callback = HandleReponse;obj.params = new Object();obj.params.JSid = '';obj.params.JStype='';

The shorthand way to do the same thing looks like this:

var obj = {  method: 'get',  url: 'formbox.php',  callback: HandleResponse,  params: {	JSid: '',	JStype: ''  }};

So that's the format to use to send the function what you want it to do. The URL needs to be required, the method can be optional and default to get, the callback function can be optional, and everything in params is a variable to send with the request. So this function should use an object like that:

function MakeRequest(opts){  var xmlHttp = getXMLHttp();    if ((typeof opts.url) == 'undefined' || opts.url == '')  {	alert('URL required');	return;  }  if ((typeof opts.method) == 'undefined')	opts.method = 'get';  if ((typeof opts.callback) == 'function')  {	xmlHttp.onreadystatechange = function()	{	  if(xmlHttp.readyState == 4)	  {		// send response text to the callback function		opts.callback(xmlHttp.responseText);	  }	}  }    var postdata = '';  if ((typeof opts.params) == 'object')  {	for (var x in opts.params)	{	  postdata += (postdata != '' ? '&' : '') + x + '=' + encodeURIComponent(opts.params[x]);	}  }  if (opts.method == 'post')  {	xmlHttp.open('POST', opts.url, true);	xmlHttp.send(postdata);  }  else  {	xmlHttp.open('GET', opts.url + (postdata != '' ? '?' + postdata : ''), true);	xmlHttp.send(null);  }}

In order to call that, you could do something like this:

makeRequest({  method: 'get',  url: 'formbox.php',  callback: HandleResponse,  params: {	JSid: '',	JStype: ''  }});

or a post request with a username and password:

makeRequest({  method: 'post',  url: 'login.php',  callback: HandleLogin,  params: {	username: 'joe',	password: '1234'  }});

You can use it inline if you leave out the whitespace:<a href="" OnClick="openBox('jpopupbox'); MakeRequest({method: 'get', url: 'formbox.php', callback: HandleResponse, params: {JSid: '', JStype: ''}}); return false;">Länk</a>

[ckrudelux]

So the goal is to do something general-purpose, where you can use anywhere. That means the URL, method, etc should be options. The best way to set this up is to send the function an object that contains all of the options. It's easiest to use the shorthand JSON format for that. So one way to make an object is like this:

var obj = new Object();obj.method = 'get';obj.url = 'formbox.php';obj.callback = HandleReponse;obj.params = new Object();obj.params.JSid = '';obj.params.JStype='';

The shorthand way to do the same thing looks like this:

var obj = {  method: 'get',  url: 'formbox.php',  callback: HandleResponse,  params: {	JSid: '',	JStype: ''  }};

So that's the format to use to send the function what you want it to do. The URL needs to be required, the method can be optional and default to get, the callback function can be optional, and everything in params is a variable to send with the request. So this function should use an object like that:

function MakeRequest(opts){  var xmlHttp = getXMLHttp();    if ((typeof opts.url) == 'undefined' || opts.url == '')  {	alert('URL required');	return;  }  if ((typeof opts.method) == 'undefined')	opts.method = 'get';  if ((typeof opts.callback) == 'function')  {	xmlHttp.onreadystatechange = function()	{	  if(xmlHttp.readyState == 4)	  {		// send response text to the callback function		opts.callback(xmlHttp.responseText);	  }	}  }    var postdata = '';  if ((typeof opts.params) == 'object')  {	for (var x in opts.params)	{	  postdata += (postdata != '' ? '&' : '') + x + '=' + encodeURIComponent(opts.params[x]);	}  }  if (opts.method == 'post')  {	xmlHttp.open('POST', opts.url, true);	xmlHttp.send(postdata);  }  else  {	xmlHttp.open('GET', opts.url + (postdata != '' ? '?' + postdata : ''), true);	xmlHttp.send(null);  }}

In order to call that, you could do something like this:

makeRequest({  method: 'get',  url: 'formbox.php',  callback: HandleResponse,  params: {	JSid: '',	JStype: ''  }});

or a post request with a username and password:

makeRequest({  method: 'post',  url: 'login.php',  callback: HandleLogin,  params: {	username: 'joe',	password: '1234'  }});

You can use it inline if you leave out the whitespace:<a href="" OnClick="openBox('jpopupbox'); MakeRequest({method: 'get', url: 'formbox.php', callback: HandleResponse, params: {JSid: '', JStype: ''}}); return false;">Länk</a>

Thanks alot with that. I don't understand everything but it works. Not sure that HandleResopnse does. Well thanks anyway

[ckrudelux]

Can I do a button to clear the data from the php document?So if I close this box and opens it in an other state it will not show the last loaded data while it loads the new one?

[justsomeguy]

You can use the innerHTML property of any element to set the contents, you can set that to an empty string if you want to clear an element.

[ckrudelux]

You can use the innerHTML property of any element to set the contents, you can set that to an empty string if you want to clear an element.

Well it kind of worked. It loads the data and then I press close it emptys the context and then I press an other link it change the display from none to block and then noting happens it should load new data to it.

function closeBox(element){	document.getElementById(element).style.display = 'none';	document.getElementById(element).innerHTML = '';}

[justsomeguy]

Why isn't it loading new data into it? Have you checked for Javascript errors?

[ckrudelux]

Why isn't it loading new data into it? Have you checked for Javascript errors?

No I don't know how to check them new to javascript and haven't planed to learn it yet but I had to anyway.

[justsomeguy]

It's a good idea to use Firefox and get Firebug installed, the error console in Firebug is a big help.

[ckrudelux]

It's a good idea to use Firefox and get Firebug installed, the error console in Firebug is a big help.

Something with this line but I can't see anything where it says what is wrong like php does.

function HandleResponse(response){	document.getElementById('jtexthere').innerHTML = response;}

[justsomeguy]

There's nothing syntactically wrong with that, what does the error message say?

[ckrudelux]

There's nothing syntactically wrong with that, what does the error message say?

Only thing I can see as a error message says what "jtexthere" is null in red text.