problem with php-ajax (html,js and php files) and regular php single file only

linuxfreakphp · October 6, 2013

hello i got a problem with ajax-php that is including html file, javascript external file, php external file.

now i got a problem give a value to button,button2,button3 when the php write the html code, but if the javascript or it wrote in the html file already the javascript is working fine, also jquery isn't working as well if the php create the html (div, textarea, input and br) code.

what is the problem with the ajax-php version and why functions button_onload() and disabled_div_textarea_text2() not working well?

first version-ajax-php version: (function button_onload() and function disabled_div_textarea_text2() isn't working in this version)

here is the code of the html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="index.js"></script>
		<link rel="stylesheet" href="index.css" />
		<!--<script src="jquery-2.0.3.min.js"></script>-->
		<title>textbox changing with ajax - php - version 1</title>

		<!-- javascript code -->
		<script language="JavaScript">

		</script>
	</head>
	<body id='body'>
		<div id='div_textarea'></div>
	</body>
</html>

here is the code of the JavaScript file:

try
{
	/* ajax-php */
	function ajax_php()
	{
		var str = new String;
		str = '1';
		//alert('str2');
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//alert('str3');
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				document.getElementById('div_textarea').innerHTML = xmlhttp.responseText;
				//document.getElementById('div_textarea').value = xmlhttp.responseText;
				//alert(xmlhttp.responseText);
			}
		}
		//alert('str4');
		xmlhttp.open("POST","index.php?str=" + str, true);
		xmlhttp.send();
	}
	/* fffff */
	onload = function()
	{
		ajax_php();
		/* load fuinctions */
		/* --------------- */
		button_onload();
		clear_textarea1_2();
		disabled_div_textarea_text2();
	}
	/* fffff */
	function button_onload()
	{
		/* first version */
		/* ------------- */
		
		document.getElementById('button').innerHTML = 'button 1';
		document.getElementById('button2').value = 'button 2';
		document.getElementById('button3').value = 'clear/clean';
	}
	/* fffff */
	function button()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}
	/* fffff */
	function button2()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}

	/* textarea functions */
	/* ------------------ */
	/* fffff */
	function clear_textarea1_2()
	{
		clear_div_textarea_text();
		clear_div_textarea_text2();
	}
	/* fffff */
	function clear_div_textarea_text()
	{
		document.getElementById('div_textarea_text').value = '';
	}
	/* fffff */
	function clear_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').value = '';
	}
	/* fffff */
	function disabled_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').disabled = true;
		document.getElementById('div_textarea_text3').readOnly = true;
	}
}
catch(err)
{
	txt='There was an error on this page.\n\n';
	txt+='Error description: ' + err.message + '\n\n';
	txt+='Click OK to continue.\n\n';
	alert(txt);
}

here is the php code file:

<?php
	$str1 = '<br />';
	$str2 = '<textarea id="div_textarea_text"></textarea>';
	$str3 = '<div id="button" onclick="button();"></div>';
	$str4 = '<input type="button" onclick="button2();" id="button2" value="" />';
	$str5 = '<textarea id="div_textarea_text2"></textarea>';
	$str6 = '<input type="button" onclick="clear_textarea1_2();" id="button3" />';
	$str7 = '<textarea id="div_textarea_text3"></textarea>';
	
	echo($str1 . $str2 . $str1 . $str3 . $str1 . $str4 . $str1 . $str5 . $str1 . $str6 . $str1 . $str7);
?>

but now take a look at this second version- php file with JavaScript: (php file and JavaScript file and working fine.)

the php file code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="index.js"></script>
		<link rel="stylesheet" href="index.css" />
		<script src="jquery-2.0.3.min.js"></script>
		<title>textbox changing with php - version 2</title>

		<!-- javascript code -->
		<script language="JavaScript">

		</script>
	</head>
	<body id='body'>
		<div id='div_textarea'>
			<?php
				$str1 = '<br />';
				$str2 = '<textarea id="div_textarea_text"></textarea>';
				$str3 = '<div id="button" onclick="button();"></div>';
				$str4 = '<input type="button" onclick="button2();" id="button2" value="" />';
				$str5 = '<textarea id="div_textarea_text2"></textarea>';
				$str6 = '<input type="button" onclick="clear_textarea1_2();" id="button3" />';
				$str7 = '<textarea id="div_textarea_text3"></textarea>';
				echo($str1 . $str2 . $str1 . $str3 . $str1 . $str4 . $str1 . $str5 . $str1 . $str6 . $str1 . $str7);
			?> 
		</div>
	</body>
</html>

JavaScript file code:

try
{
	/* fffff */
	onload = function()
	{
		/* load fuinctions */
		/* --------------- */
		button_onload();
		clear_textarea1_2();
		disabled_div_textarea_text2();
	}
	/* fffff */
	function button_onload()
	{
		/* first version */
		/* ------------- */
		
		document.getElementById('button').innerHTML = 'button 1';
		document.getElementById('button2').value = 'button 2';
		document.getElementById('button3').value = 'clear/clean';
	}
	/* fffff */
	function button()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}
	/* fffff */
	function button2()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}

	/* textarea functions */
	/* ------------------ */
	/* fffff */
	function clear_textarea1_2()
	{
		clear_div_textarea_text();
		clear_div_textarea_text2();
	}
	/* fffff */
	function clear_div_textarea_text()
	{
		document.getElementById('div_textarea_text').value = '';
	}
	/* fffff */
	function clear_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').value = '';
	}
	/* fffff */
	function disabled_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').disabled = true;
		document.getElementById('div_textarea_text3').readOnly = true;
	}
}
catch(err)
{
	txt='There was an error on this page.\n\n';
	txt+='Error description: ' + err.message + '\n\n';
	txt+='Click OK to continue.\n\n';
	alert(txt);
}

Edited October 6, 2013 by linuxfreakphp

mac_gyver · October 6, 2013

all you have stated is your code isn't working in this version. what exactly is it doing that leads you to believe it isn't working and at what point in it when you were debugging it is it doing what you expect and at what point it is not? you have got to narrow down the problem to just one relevant block of code, not the whole thing, since we don't have the ability to run your whole code with your data...

however, writing code like the following has no point other than to take up your time typing and debugging extra syntax -

    $str1 = '<br />';
    $str2 = '<textarea id="div_textarea_text"></textarea>';
    $str3 = '<div id="button" onclick="button();"></div>';
    $str4 = '<input type="button" onclick="button2();" id="button2" value="" />';
    $str5 = '<textarea id="div_textarea_text2"></textarea>';
    $str6 = '<input type="button" onclick="clear_textarea1_2();" id="button3" />';
    $str7 = '<textarea id="div_textarea_text3"></textarea>';

    echo($str1 . $str2 . $str1 . $str3 . $str1 . $str4 . $str1 . $str5 . $str1 . $str6 . $str1 . $str7);

there's no php produced values in that block and you are immediately echoing it after you create it. just put a closing php tag before the block of html markup and then an opening php tag after it.

and if you did have any php produced values to put into that, you would just make it one php statement and either directly echo it or assign the whole thing to one php variable.

jazzman1 · October 6, 2013

Yours all scripts look bad. Spend time and learn more about the good practice in javascript and php!

Anyways...... you should call button_onload() function inside xhr.onload().

Try,

var xhr = null;

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert('No instance of a class that provides this functionality');
}

xhr.onload = function() {
  
document.getElementById('div_textarea').innerHTML = this.responseText;

button_onload();

}

function button_onload()
	{
		/* first version */
		/* ------------- */
		
		document.getElementById('button').innerHTML = 'button 1';
		document.getElementById('button2').value = 'button 2';
		document.getElementById('button3').value = 'clear/clean';
	}

/* fffff */
	function button()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}
	/* fffff */
	function button2()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}

	/* textarea functions */
	/* ------------------ */
	/* fffff */
	function clear_textarea1_2()
	{
		clear_div_textarea_text();
		clear_div_textarea_text2();
	}
	/* fffff */
	function clear_div_textarea_text()
	{
		document.getElementById('div_textarea_text').value = '';
	}
	/* fffff */
	function clear_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').value = '';
	}
	/* fffff */
	function disabled_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').disabled = true;
		document.getElementById('div_textarea_text3').readOnly = true;
	}
        
xhr.open("post", "index.php",true);

xhr.send();

PS: Learn more about Ajax from here. This is the one of mine favourite resource on the web.

linuxfreakphp · October 6, 2013

you are right and a picture can show what is the problem better,here is a pictures of version 1 and version 2 so you could see what is the problem:

version 1: (the version with the problem, no values in the div button and the inputs button.)

html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="index.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<link rel="stylesheet" href="index.css" />
		<script src="jquery-2.0.3.min.js"></script>
		<title>textbox changing with ajax - php - version 1</title>

		<!-- javascript code -->
		<script language="JavaScript">
		</script>
	</head>
	<body id='body'>
		<div id='div_textarea'></div>
	</body>
</html>

version2: (the version that is fine and working ok)

html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="index.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<link rel="stylesheet" href="index.css" />
		<script src="jquery-2.0.3.min.js"></script>
		<title>textbox changing with ajax - php - version 2</title>

		<!-- javascript code -->
		<script language="JavaScript">
		</script>
	</head>
	<body id='body'>
		<div id='div_textarea'>
			<br />
			<textarea id='div_textarea_text'></textarea><br />
			<div id='button' onclick='button();'></div><br />
			<input type='button' onclick='button2();' id='button2' /><br />
			<textarea id='div_textarea_text2'></textarea><br />
			<input type='button' onclick='clear_textarea1_2();' id='button3' /><br />
			<textarea id='div_textarea_text3'></textarea>
		</div>
	</body>
</html>

those two functions are making the problem and they are in use in both versions but in the first version as you all can see the div button don't have value and also the two input buttons have no values. in the second version they are working fine.

	function button_onload()
	{
		/* first version */
		/* ------------- */
		
		document.getElementById('button').innerHTML = 'button 1';
		document.getElementById('button2').value = 'button 2';
		document.getElementById('button3').value = 'clear/clean';
	}

	function disabled_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').disabled = true;
		document.getElementById('div_textarea_text3').readOnly = true;
	}

also if the html code

<br />
<textarea id='div_textarea_text'></textarea><br />
<div id='button' onclick='button();'></div><br />
<input type='button' onclick='button2();' id='button2' /><br />
<textarea id='div_textarea_text2'></textarea><br />
<input type='button' onclick='clear_textarea1_2();' id='button3' /><br />
<textarea id='div_textarea_text3'></textarea>

created from the javascript those function are also working great without any problem.

the problem start only when the php create this code.

------------------------

all you have stated is your code isn't working in this version. what exactly is it doing that leads you to believe it isn't working and at what point in it when you were debugging it is it doing what you expect and at what point it is not? you have got to narrow down the problem to just one relevant block of code, not the whole thing, since we don't have the ability to run your whole code with your data...

however, writing code like the following has no point other than to take up your time typing and debugging extra syntax -

there's no php produced values in that block and you are immediately echoing it after you create it. just put a closing php tag before the block of html markup and then an opening php tag after it.

and if you did have any php produced values to put into that, you would just make it one php statement and either directly echo it or assign the whole thing to one php variable.

i know echo don't need "(" and ")" but that help me to read the output when the code is long and i'm working on the product and that way i'm using that like that, but i know it not right.

Edited October 6, 2013 by linuxfreakphp

jazzman1 · October 6, 2013

That happens, b/s you call this "button_onload()" function before to get the requested data from the server!

Use my js code instead yours.

linuxfreakphp · October 7, 2013

That happens, b/s you call this "button_onload()" function before to get the requested data from the server!

Use my js code instead yours.

can you tell me why please?

this is the way i used:

	onload = function()
	{
		ajax_php(); //requested data from the server
		button_onload(); // set the values
		clear_textarea1_2();
		disabled_div_textarea_text2(); //disable the textarea 
	}

i did call ajax_php() first and then i call button_onload() so why the server don't pass the data from the server to the client side exactly as he should do? because i can see the output of the server to the client side on the screen and you can see that in the picture.

Edited October 7, 2013 by linuxfreakphp

jazzman1 · October 7, 2013

No, AJAX doesn't work in that way. AJAX uses by default asynchronous method. That means sending the request and receiving the data from the server, it's not going to be immediately. That's why, it's always a good idea to use callBack functions and the part of the rest of the js code to be parsed from javascript after the result of this request is finished (success).

Edited October 7, 2013 by jazzman1

linuxfreakphp · October 7, 2013

No, AJAX doesn't work in that way. AJAX uses by default asynchronous method. That means sending the request and receiving the data from the server, it's not going to be immediately. That's why, it's always a good idea to use callBack functions and the part of the rest of the js code to be parsed from javascript after the result of this request is finished (success).

i never though about that and w3c forgot to write that in the ajax-php guide they publish.

i even tried that with my code and that true jazzman1 and i used setTimeout to test that.

	function ajaxphp(){
		if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		}
		else{// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function(){
			if (xmlhttp.readyState == 4 && xmlhttp.status==200){
				document.getElementById('div_textarea').innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open('post', 'index.php', true);
		xmlhttp.send();
	}
	onload = function(){
		ajaxphp();
		setTimeout(function(){ f_text() }, 100);
	}
	function f_text(){
		disabled_div_textarea_text2();
		button_onload();
		clear_textarea1_2();
	}

about the code you wrote for me it did not worked in the xhtml file page and noting pass from the server to the client side as you can see in the picture.

picture: (only the backround-color of div_textarea seen in output- css define only and not ajax)

xhtml code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="index.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<link rel="stylesheet" href="index.css" />
		<script src="jquery-2.0.3.min.js"></script>
		<title>textbox changing with ajax - php - version 1</title>
		<script language="JavaScript">
			$(document).ready(function(){
				str1();
			}); 
		</script>
	</head>
	<body id='body'>
		<div id='div_textarea'></div>
	</body>
</html>

but on the html file it working great and that should work on the xhtml file.

picture:

html code:

<html>
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="index.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<link rel="stylesheet" href="index.css" />
		<script src="jquery-2.0.3.min.js"></script>
		<title>textbox changing with ajax - php - version 1</title>
		<script language="JavaScript">
			$(document).ready(function(){
				str1();
			}); 
		</script>
	</head>
	<body id='body'>
		<div id='div_textarea'></div>
	</body>
</html>

Edited October 7, 2013 by linuxfreakphp

jazzman1 · October 7, 2013

There are all scripts that I used for the test.

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="scripts.js"></script>
		<title>textbox changing with ajax - php - version 1</title>

	</head>
	<body id='body'>
		<div id='div_textarea'></div>
	</body>
</html>

scripts.js

var xhr = null;

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert('No instance of a class that provides this functionality');
}

xhr.onload = function() {
  
document.getElementById('div_textarea').innerHTML = this.responseText;

button_onload();

}

function button_onload()
	{
		/* first version */
		/* ------------- */
		
		document.getElementById('button').innerHTML = 'button 1';
		document.getElementById('button2').value = 'button 2';
		document.getElementById('button3').value = 'clear/clean';
	}

/* fffff */
	function button()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}
	/* fffff */
	function button2()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}

	/* textarea functions */
	/* ------------------ */
	/* fffff */
	function clear_textarea1_2()
	{
		clear_div_textarea_text();
		clear_div_textarea_text2();
	}
	/* fffff */
	function clear_div_textarea_text()
	{
		document.getElementById('div_textarea_text').value = '';
	}
	/* fffff */
	function clear_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').value = '';
	}
	/* fffff */
	function disabled_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').disabled = true;
		document.getElementById('div_textarea_text3').readOnly = true;
	}
        
xhr.open("post", "index.php",true);

xhr.send();

index.php

<?php
    
     $str1 = '<br />';
    $str2 = '<textarea id="div_textarea_text"></textarea>';
    $str3 = '<div id="button" onclick="button();"></div>';
    $str4 = '<input type="button" onclick="button2();" id="button2" value="" />';
    $str5 = '<textarea id="div_textarea_text2"></textarea>';
    $str6 = '<input type="button" onclick="clear_textarea1_2();" id="button3" />';
    $str7 = '<textarea id="div_textarea_text3"></textarea>';
    
    echo($str1 . $str2 . $str1 . $str3 . $str1 . $str4 . $str1 . $str5 . $str1 . $str6 . $str1 . $str7);

Edited October 7, 2013 by jazzman1

jazzman1 · October 7, 2013

i never though about that and w3c forgot to write that in the ajax-php guide they publish.

Can you post the link to this tutorial, please?

linuxfreakphp · October 9, 2013

your code is working jazzman1 but his not global and that why i created a new code with this guide (w3c) and the sample code (w3c as well) but even when i use callback function as the guide say's the result is this:

(same as my old the old code why?)

code of the js:

	var xmlhttp = null;
	function ajaxphp(str, c_func)
	{
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = c_func;
		xmlhttp.open('post', str, true);
		xmlhttp.send(null);
	}
	function myFunction(str) //Using a Callback Function
	{
		ajaxphp(str ,function()
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status==200)
			{
				document.getElementById('div_textarea').innerHTML = this.responseText;
				//possible to use xmlhttp.responseText as well
			}
		});
	}
	onload = function()
	{
		myFunction('index.php');
		//setTimeout(function(){ loadform() }, 100);
		loadform();
	}
	function loadform()
	{
		button_onload();
		disabled_div_textarea_text2();
	}

the rest of the code of the js is not relevent so is html the php that you saw them already, but if i'm changing the function onload and using setTimeout and not loadform:

	onload = function()
	{
		myFunction('index.php');
		setTimeout(function(){ loadform() }, 100);
		//loadform();
	}

the output is: (working great)

why this happening even when the guide show this way and why the response time from the server is still too long?

if i am using js to create this html code from the client side only:

	<br />
	<textarea id='div_textarea_text'></textarea><br />
	<div id='button' onclick='button();'></div><br />
	<input type='button' onclick='button2();' id='button2' /><br />
	<textarea id='div_textarea_text2'></textarea><br />
	<input type='button' onclick='clear_textarea1_2();' id='button3' /><br />
	<textarea id='div_textarea_text3'></textarea>

or other html code it is working great every time, but it is a security risk. that why i need the ajax to do that from the server side to the client side.

in the real system i have to use ajax again and again so the ajax function have to be global to all the php pages because the same div present a different data when the user click on the buttons. this is a small module and a sample only.

Edited October 9, 2013 by linuxfreakphp

DavidAM · October 10, 2013

w3schools != w3c

There is no relationship between the website named w3schools.com and the w3c.

"The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards." http://www.w3.org/Consortium/

"At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies." w3schools.com

In the past there have been many reports of inaccuracies on the w3schools site. I don't use it, and I don't know what strides (if any) they have taken to correct the issues. But, you should remember, they are NOT associated with the Consortium that develops the standards and specifications; and therefore, their site is based on their interpretation of the standards.

linuxfreakphp · October 10, 2013

i didn't know that sorry about my mistake about w3c and w3schools, because i was sure the are the same body.

i did saw a few problems in w3schools for a sample tag hr with xhtml.

back to my problem now, davidam which site is better as guide because in the real system I'm building the ajax is been used more then once and that why i need a code like the new code i wrote without using

setTimeout(function(){ loadform() }, 100);

and only:

loadform();

Edited October 10, 2013 by linuxfreakphp

jazzman1 · October 10, 2013

your code is working jazzman1 but his not global

What did you mean by saying - "it's not global". Could you be more specific where exactly are you stuck? What errors did you get and what tool are you using to debug js scripts?

linuxfreakphp · October 10, 2013

What did you mean by saying - "it's not global". Could you be more specific where exactly are you stuck? What errors did you get and what tool are you using to debug js scripts?

look at my sample how the next code use the same function of ajax more the once.

xhtml file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="index.js"></script>
		<link rel="stylesheet" href="index.css" />
		<title>textbox changing with ajax - php - version 6</title>
	</head>
	<body id='body'>
		<div id="div_textarea"><h2>Let AJAX change this text</h2></div>
		<button type="button" onclick='myFunction("index2.php");'>Change Content</button>
	</body>
</html>

js file:

var xmlhttp = null;
function loadXMLDoc(url,cfunc)
{
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	      xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
	      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("post",url,true);
	xmlhttp.send();
}
onload = function()
{
	myFunction('index.php');
}
function myFunction(str)
{
	document.getElementById('div_textarea').innerHTML = "";
	loadXMLDoc(str, function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById('div_textarea').innerHTML = xmlhttp.responseText;
		}
	});
	//button_onload();
	setTimeout(function(){ button_onload() }, 100);
}
function button_onload()
{
	document.getElementById('button').innerHTML = 'button 1';
	document.getElementById('button2').value = 'button 2';
	document.getElementById('button3').value = 'clear/clean';
}

index.php file:

<?php
$str1 = '<br />';
$str2 = '<textarea id="div_textarea_text"></textarea>';
$str3 = '<div id="button" onclick=""></div>';
$str4 = '<input type="button" onclick="" id="button2" value="" />';
$str5 = '<textarea id="div_textarea_text2"></textarea>';
$str6 = '<input type="button" onclick="" id="button3" />';
$str7 = '<textarea id="div_textarea_text3"></textarea>';
echo $str1 . $str2 . $str1 . $str3 . $str1 . $str4 . $str1 . $str5 . $str1 . $str6 . $str1 . $str7 . $str1;
?>

index2.php file:

<?php
$str1 = '<br />';
$str2 = '<textarea id="div_textarea_text"></textarea>';
$str3 = '<div id="button" onclick=""></div>';
$str4 = '<input type="button" onclick="" id="button2" value="" />';
$str5 = '<textarea id="div_textarea_text2"></textarea>';
$str6 = '<input type="button" onclick="" id="button3" />';
$str7 = '<textarea id="div_textarea_text3"></textarea>';
echo $str2 . $str1 . $str3 . $str1 . $str4 . $str1 . $str5 . $str1 . $str6 . $str1 . $str7 . $str1 . $str2 . $str1;
?>

the base code sample is from w3schools, but the response time with my php file or files is tooking too much time so i used in my code in setTimeout(function(){ button_onload() }, 100); instead of button_onload();.

i even copy their code and tried that with my php file, but the result was with the same problem as my old code.

your code present the echo from the php fine, but when i tried to change yours so i could used the ajax more then once, but it didn't work. like the sample i wrote for you now. you can click on the button more then once and the load function is using it as well.

Edited October 10, 2013 by linuxfreakphp

DavidAM · October 10, 2013

See my comments in this copy of your code

function myFunction(str)
{
	document.getElementById('div_textarea').innerHTML = "";
	loadXMLDoc(str, function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById('div_textarea').innerHTML = xmlhttp.responseText;
			/* MAD Why do you not just call button_onload() here? This is the only place 
			       where you know for sure that the elements have been put into the DOM */
		}
	});
	//button_onload();
	/* MAD This code may execute BEFORE the AJAX completes. It WILL execute even if the
	       AJAX FAILS. I would put this inside the IF statement above -- withOUT the setTimeout() */
	setTimeout(function(){ button_onload() }, 100);
}

Also, are you sure that there are NO OTHER ELEMENTS with the ID attribute set to "button", "button2" and "button3"? The ID attribute MUST be unique throughout the entire document.

I really see NO benefit in the button_onload() function. Why not just set these values in the PHP script.

There is no real reason to use PHP for index and index2. You could just output the plain HTML.

Of course, if you want to reuse code, I guess that is one way to do it. Depending on the application, I would probably just pass a parameter in the URL indicating what labels I want and let PHP set them accordingly.

Is this really all of the code? I really don't understand why you are doing it this way.

linuxfreakphp · October 11, 2013

a, if I'm using:

button_onload(); with my code the result is always: ( instead of using setTimeout(function(){ button_onload() }, 100); )

and that way i used: setTimeout(function(){ button_onload() }, 100);

13 or 12 is the lower number i tried with a success to get the response from the server, but below this number the result is the picture above.

-------------------------------------------------------------------------------------------------

i tried now what you wrote in your notes DavidAM and that working with 100% success thanks.

var xmlhttp = null;
function loadXMLDoc(url,cfunc)
{
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	      xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
	      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("post",url,true);
	xmlhttp.send();
}
onload = function()
{
	myFunction('index.php');
}
function myFunction(str)
{
	document.getElementById('div_textarea').innerHTML = "";
	loadXMLDoc(str, function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById('div_textarea').innerHTML = xmlhttp.responseText;
			button_onload();
		}
	});
	//button_onload();
	//setTimeout(function(){ button_onload() }, 100);
}
function button_onload()
{
	document.getElementById('button').innerHTML = 'button 1';
	document.getElementById('button2').value = 'button 2';
	document.getElementById('button3').value = 'clear/clean';
}

but what was the problem/mistake in my last code (link in number 3) or my old codes (links in number 1 and 2) i tried? 1 , 2 , 3

I'm asking to understood what i did wrong of course so i could understood my mistake and why the response time in this codes (1 , 2 , 3) is taking too much time. (the result is like the picture above in this message in those three cases)

Edited October 11, 2013 by linuxfreakphp

jazzman1 · October 11, 2013

@linuxfreakphp, this is a different story. Now you want to load a content with different html templates by calling myFunction().

Back again to my js code:

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="Content-Language" content="he" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="scripts.js"></script>
		<title>textbox changing with ajax - php - version 1</title>

	</head>
	<body id='body'>
            
		<div id='div_textarea'></div>
               
		<input type="button" value="Click Me!" onclick="loadXML('index.php')" />
	</body>
</html>

scripts.js

var xhr = null;

function loadXML(url) {

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert('No instance of a class that provides this functionality');
}


xhr.onload = function () {

document.getElementById('div_textarea').innerHTML = this.responseText;

button_onload();

}
        
xhr.open("post", url, true);

xhr.send();

}

function button_onload()
	{
		/* first version */
		/* ------------- */
		
		document.getElementById('button').innerHTML = 'button 1';
		document.getElementById('button2').value = 'button 2';
		document.getElementById('button3').value = 'clear/clean';
	}

/* fffff */
	function button()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}
	/* fffff */
	function button2()
	{
		/* show what the textarea inside text */
		//alert(document.getElementById('div_textarea_text').value);
		document.getElementById('div_textarea_text2').value = document.getElementById('div_textarea_text').value;
	}

	/* textarea functions */
	/* ------------------ */
	/* fffff */
	function clear_textarea1_2()
	{
		clear_div_textarea_text();
		clear_div_textarea_text2();
	}
	/* fffff */
	function clear_div_textarea_text()
	{
		document.getElementById('div_textarea_text').value = '';
	}
	/* fffff */
	function clear_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').value = '';
	}
	/* fffff */
	function disabled_div_textarea_text2()
	{
		document.getElementById('div_textarea_text2').disabled = true;
		document.getElementById('div_textarea_text3').readOnly = true;
	}

index.php

<?php

$str1 = '<br />';
$str2 = '<textarea id="div_textarea_text"></textarea>';
$str3 = '<div id="button" onclick="button();"></div>';
$str4 = '<input type="button" onclick="button2();" id="button2" value="" />';
$str5 = '<textarea id="div_textarea_text2"></textarea>';
$str6 = '<input type="button" onclick="clear_textarea1_2();" id="button3" />';
$str7 = '<textarea id="div_textarea_text3"></textarea>';
echo($str1 . $str2 . $str1 . $str3 . $str1 . $str4 . $str1 . $str5 . $str1 . $str6 . $str1 . $str7);
?>

You can change the html template as an argument in loadXML('index.php');

Sign In

problem with php-ajax (html,js and php files) and regular php single file only

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information