[RESOLVED] Partly Refreshin Page

**bharanidharanit** · Apr 21st, 2010, 07:51 AM

Hi,
How to Refresh a php page partly?
I am loading various images in table, which are selected from the checkboxes.
Initially a list of images name are shown in a table, so when i select the name using checkbox the corresponding images alone are showing in anoher table.
I am getting the images name using array like this

Code:

<input type="checkbox" value="Image1" name="image_name[]" />
<input type="checkbox" value="Image2" name="image_name[]" />

So is this possible to be done with an ajax ?
The images path and name are stored in database.

**kows** · Apr 21st, 2010, 12:02 PM

sure. you just have to have a button (or onchange event) that submits those values, and a PHP script that will take those values and decide what to display. then, you just need an ajax script that sends the data from the form (onchange or onsubmit) to the PHP script and changes the innerHTML of a <div> or something.

**bharanidharanit** · Apr 21st, 2010, 12:49 PM

Hi thanks,
But am using this, and not returning the image_name[] array values to the php script

Code:

<input type="checkbox" value="Image1" name="image_name[]" />
<input type="checkbox" value="Image2" name="image_name[]" />
<input type="button" value="Update" onclick="update_data()" />

Also in the div where i want to show the resultant data, already containing some images, and i want to remove it before inserting the new images.
Thankyou

**bharanidharanit** · Apr 21st, 2010, 02:18 PM

Hi, This is my code, where my array values are not passing, i dont the error.

Code:

<html>
<head>
<title>test</title>
<script language="javascript">
function ajax_tools_selected(aa){
	var XMLHttpRequestObject = false; 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
	var url="ajax_php/ajax_update_tools.php";
	var uid=document.getElementsByName('toolname').value;
	XMLHttpRequestObject.open("POST",url);
	 XMLHttpRequestObject.setRequestHeader('Content-Type', 
            'application/x-www-form-urlencoded'); 
	XMLHttpRequestObject.onreadystatechange = function()
	{
		if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
		{
			var data = XMLHttpRequestObject.responseText;
			document.getElementById('test').innerHTML = data;
		}
	}
	XMLHttpRequestObject.send("uid="+uid);
return false;		
}
</script>
</head>
<body>
<form method="post" onsubmit="return ajax_tools_selected();">
<input type="checkbox" name="toolname[]" value="1" />
<input type="checkbox" name="toolname[]" value="2" />
<input type="submit" value="Update" />
</form>
<div id="test"></div>
</body>
</html>

Code:

<?PHP
$images = $_POST['uid'];
foreach($images as $img){
echo "image".$img;
}
?>

**kows** · Apr 22nd, 2010, 01:21 AM

I doubt using getElementsByName() and then just getting the value of that will do anything; I would presume that you'd have to loop through the elements with this name and then create your data string to send. I haven't tested any of this, though. see what your uid variable is returning as first.

**bharanidharanit** · Apr 22nd, 2010, 07:38 AM

I dont know that method, and i changed this coding is that possible to send arrays using AJAX?

Code:

<html>
<head>
<title>Array AJAX Checkbox</title>
<script language="javascript">
var myarr = new Array();
	function go_ajax(frm){
		with(frm)
		{
				var len = frm.length;
				   for (var i = 0; i <len; i++)
				   {
							if (frm[i].checked){
								alert('radio '+i+' with value of '+frm[i].value);
								myarr[i] = frm[i].value;
							}				
						}
						alert(myarr.length);
						for(i=0;i<myarr.length;i++)
						{
							alert(myarr[i]);
						}
			return false;
		}
	}
</script>
</head>
<body>	
	<form name="form1" method="post" onsubmit="return go_ajax(this)">
		<input type="checkbox" name="check_box" value="1" /><br />
		<input type="checkbox" name="check_box" value="2" /><br />
		<input type="checkbox" name="check_box" value="3" /><br />
		<input type="submit" value="Go" />
	</form>
</body>
</html>

**kows** · Apr 22nd, 2010, 08:09 AM

well, the script you have now doesn't even have any ajax. you're just looping through an array. the major point here is that you need to construct a data string (like a query string) of the data you want to send to your PHP script, which is either going to be used in a GET or POST request. this is the only way you're going to be able to send an array of data to the PHP script.

your HTML needs to also know that the elements you're creating are an array; their name should be check_box[].

**bharanidharanit** · Apr 22nd, 2010, 08:52 AM

Hi thankyou,
I am almost finished my coding to get images name to javascript back from the php script. Now how to add an image to the div with that path.
This is my coding

Code:

<html>
<head>
<title>Array AJAX Checkbox</title>
<script language="javascript">
onerror = handleErr;
var loopIndex;
	function get_array_values(frm){
		with(frm)
		{
				var len = frm.length;
				var myarr = new Array();
				var array_index=0;
				var array_value="";
				   for (var i = 0; i <len; i++)
				   {
							if (frm[i].checked){
								alert('radio '+i+' with value of '+frm[i].value);
								myarr[array_index] = frm[i].value;
								array_index+=1;
							}				
						}
						for(i=0;i<myarr.length;i++)
						{
							array_value+=(myarr[i]+",");
						}
						go_ajax(array_value);
			return false;
		}
	}
	function go_ajax(str)
	{
		var XMLHttpRequestObject = false; 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
			var url ="ajax_get_array.php";		 
		  XMLHttpRequestObject.open("POST",url);
		  XMLHttpRequestObject.setRequestHeader('Content-Type', 
		            'application/x-www-form-urlencoded'); 
		  XMLHttpRequestObject.onreadystatechange = function() 
			{   
				if (XMLHttpRequestObject.readyState == 4){
		      if(XMLHttpRequestObject.status==200) {
		          var xmlDocument = XMLHttpRequestObject.responseXML; 	
		      		var images_list = xmlDocument.getElementsByTagName("image");
		      		 for(loopIndex=0; loopIndex < images_list.length; loopIndex++)
								{
										alert(images_list[loopIndex].firstChild.data);
								}
		      	}
		      }
			}
		  XMLHttpRequestObject.send("str="+str);
	}
</script>
</head>
<body>	
	<form name="form1" method="post" onsubmit="return get_array_values(this)">
		<input type="checkbox" name="check_box" value="1" /><br />
		<input type="checkbox" name="check_box" value="2" /><br />
		<input type="checkbox" name="check_box" value="3" /><br />
		<input type="submit" value="Go" />
	</form>
	<div id="array_images">
		<img src="avatar.png" alt="" />
	</div>
</body>
</html>

PHP

Code:

<?PHP
header("Content-type: text/xml");
	$images_array = array("1" => "avatar.png",
												"2" =>  "chat.png",
												"3" => "edit.png");
	$images=explode(",",$_POST['str']);
	echo '<?xml version="1.0"?>';
  echo '<images>';
  foreach ($images as $image)
  {
    echo '<image>';
    echo $images_array[$image];
    echo '</image>';
  }
  echo '</images>';
?>

**bharanidharanit** · Apr 22nd, 2010, 09:35 AM

HI,
I am getting the output when i use iframe, after AJAX being finished, it agains reloads the source of the iframe,
Is it good to do that?
Also how to set overflow to none in iframe?
Is it good to use iframes in webpage?

**kows** · Apr 22nd, 2010, 11:32 AM

first, why are you manually making an $images array (with your own indexes), and then replacing it with an explode()?

second, why are you outputting XML? you're trying to output XHTML (for use within your website), not XML. use the <img> tag with the source (src) attribute set to the image path.

on iframes: you could turn scrolling off with an attribute for an iframe. I don't know why you're using an iframe, so I don't know if it's 'good' for you to do that or not. however, it sort of defeats the purpose of using AJAX at all (assuming the images are to be placed in the iframe). I would never use an iframe, personally, unless it was absolutely necessary.

Thread: [RESOLVED] Partly Refreshin Page

Thread Tools

Display

[RESOLVED] Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Re: Partly Refreshin Page

Posting Permissions