Jump to content

Mixed results with javascript.

max_power

By max_power
in Javascript Help

 Share

Recommended Posts

max_power Member

max_power

Posted
Posted

Hi,

 

I have created two php sites at the minute.(testing stage) Anyway, the first site is just for the admin to add more users, delete users, update them and so forth and has validation in the form of javascript. Anyway this one works, here are is the php page which contains all the php/mysql:

 

<?php
include("includes/host_conf.php");
include("includes/mysql.lib.php");
$obj=new connect;
$mode=$_GET["mode"];

	echo "<table width='500' border='0' cellpadding='4' cellspacing='1' bgcolor='#eeeeee' align='center'>";
	echo "<tr>";
		echo "<td colspan=3> <a href=\"javascript:requestInfo('showTable.php?mode=new&id=$id','showTable','')\">Add New Data </a>  ||  <a href=\"javascript:requestInfo('showTable.php?mode=list','showTable','')\">Refresh</a></td>";
	echo "</tr>";

	echo "<tr>";
		echo "<th> ID ";
		echo "<th> Username";
		echo "<th> Password";
	echo "</tr>";
	// For Delete 
	if($mode=="delete") {		
		$var_id=$_GET["id"];
		$sqlDelete="Delete from tbl_admin where id='$var_id'";
		$obj->query($sqlDelete);
		echo "<tr>";
			echo "<td colspan=3>Data Deleted";
		echo "</tr>";

	}
	// End of Delete 


	// For Add New Data -- Display Text box and the Cancel and Save Option 
	if($mode=="new") {
		echo "<tr>";
			echo "<td> <input id='id' size=5> ";
			echo "<td> <input id='username' size=10> ";
			echo "<td> <input id='password' size=10> ";
			echo "<td<a href=\"javascript:requestInfo('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a></td>";
			echo "<td><a href=\"javascript:save_data();\">Save</a>";

		echo "</tr>";
	}
	// End of Add New Data


	// After Click on Add >> Save option the data is save into the database 
	if($mode=="save_new") {
		$id=$_GET["id"];
		$username=$_GET["username"];
		$password=$_GET["password"];
		$sqlSave="Insert into tbl_admin values('$id','$username','$password')";
		$obj->query($sqlSave);
		echo "<tr>";
			echo "<td colspan=3>Data Saved";
		echo "</tr>";
	}
	// End of save_new 

	// For Update save Option
	if($mode=="update_data") {
		$prev_id=$_GET["prev_id"];
		$id=$_GET["id"];
		$username=$_GET["username"];
		$password=$_GET["password"];
		$sqlUpdate="update tbl_admin set username='$username',password='$password',id='$id' where id='$prev_id'";
		$obj->query($sqlUpdate);
		echo "<tr>";
			echo "<td colspan=3>Data Updated";
		echo "</tr>";
	}
	// End of Update

	// Display all the data from the table 
		$sql="select * from tbl_admin order by id desc";
		$obj->query($sql);	
		while($row=$obj->query_fetch(0)) {
			$id=$row['id'];
			$username=$row['username'];
			$password=$row['password'];
		echo "<tr bgcolor='#ffffff'>";
		// if Mode is Update then get the ID and display the text field with value Other wise print the data into the table 
		if($mode=="update") {
			$id_=$_GET["id"];

		}
		if($id_==$id) {
			echo "<input type='hidden' value='$id_' name='prev_id' id='prev_id'>";
			echo "<td> <input type='text' value='$id' id='id' size='5'> </td> ";
			echo "<td> <input type='text' value='$username' id='username' size='10'> </td> ";
			echo "<td> <input type='text' value='$password' id='password' size='10'> </td> ";
			echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a> </td> ";
			echo "<td><a href=\"javascript:update_data();\">Save</a>";
		}  else {
			echo "<td>$id</td>";
			echo "<td>$username</td>";
			echo "<td>$password</td>";
			echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=update&id=$id','showTable','')\">Update</a> </td> ";
			echo "<td> <a href=\"javascript:requestInfo('showTable.php?mode=delete&id=$id','showTable','');\" onclick='return confirmLink(this);'>Delete</a></td>";
		}		

		echo "</tr>";

		}
	echo "</table>";

?>

 

And here is the javascript page that contains the validation:

 

function getHTTPObject() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (!xmlhttp){
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    
}
  return xmlhttp;

  
}
var http = getHTTPObject(); // We create the HTTP Object

/*
Funtion Name=requestInfo 
Param = url >> Url to call : id = Passing div id for multiple use ~ as a seprator for eg. div1~div2 :
redirectPage >> if you like to redirect to other page once the event success then 
the response text = 1 and the redirectPage not left empty
*/

    function requestInfo(url,id,redirectPage) {      
	var temp=new Array();
		http.open("GET", url, true);
		http.onreadystatechange = function() {
			if (http.readyState == 4) {
			  if(http.status==200) {
		  		var results=http.responseText;
				if(redirectPage=="" || results!="1") {

					var temp=id.split("~"); // To display on multiple div 
					//alert(temp.length);
					var r=results.split("~"); // To display multiple data into the div 
					//alert(temp.length);
					if(temp.length>1) {
						for(i=0;i<temp.length;i++) {	
							//alert(temp[i]);
							document.getElementById(temp[i]).innerHTML=r[i];
						}
					} else {
						document.getElementById(id).innerHTML = results;
					}	
				} else {
					//alert(results);
					window.location.href=redirectPage;			
				}
			  } 
  				}
		};
		http.send(null);
       }

/*
Function Name= emptyValidation
Desc = This function is used to validation for the empty field 
Param fieldList = This arguments set as a string varialble. you just need to supply the textbox name
if the textbox is multiple then supply with ~ separator for eg. username~password
*/
function emptyValidation(fieldList) {

	var field=new Array();
	field=fieldList.split("~");
	var counter=0;
	for(i=0;i<field.length;i++) {
		if(document.getElementById(field[i]).value=="") {
			document.getElementById(field[i]).style.backgroundColor="#FF0000";
			counter++;
		} else {
			document.getElementById(field[i]).style.backgroundColor="#FFFFFF";	
		}
	}
	if(counter>0) {
			alert("The Field mark as red could not left empty");
			return false;

	}  else {
		return true;
	}

}

function init_table() {
	requestInfo('showTable.php?mode=list','showTable','');
}

function save_data() {
		var id=document.getElementById("id").value;
		var username=document.getElementById("username").value;
		var password=document.getElementById("password").value;
		var checkValidation=emptyValidation('id~username~password');

	if(checkValidation==true) {
		requestInfo('showTable.php?mode=save_new&id='+id+'&username='+username+'&password='+password,'showTable','');
	} 
}

function update_data() {
		var prev_id=document.getElementById("prev_id").value;
		var id=document.getElementById("id").value;
		var username=document.getElementById("username").value;
		var password=document.getElementById("password").value;
		var checkValidation=emptyValidation('id~username~password');

	if(checkValidation==true) {
		requestInfo('showTable.php?mode=update_data&id='+id+'&username='+username+'&password='+password+'&prev_id='+prev_id,'showTable','');
	} 
}


function confirmLink(theLink)
{
   
    var is_confirmed = confirm('Are you sure to delete this record?\n\nThis will permanently delete the Record!');
    if (is_confirmed) {
        theLink.href += '';
    }

    return is_confirmed;
}

 

The other one is for an admin to add, delete and update events now for this one, it can only delete but can not perform the update_data1() and save_data1()  functions for some wierd reason. Here is the php code:

 

<?php
include("includes/host_conf.php");
include("includes/mysql.lib.php");
$obj=new connect;
$mode=$_GET["mode"];

	echo "<table width='550' border='0' cellpadding='4' cellspacing='1' bgcolor='#eeeeee' align='center'>";
	echo "<tr>";
		echo "<td colspan=3> <a href=\"javascript:requestInfo1('showTable.php?mode=new&id=$id','showTable','')\">Add New Events</a>||<a href=\"javascript:requestInfo1('showTable.php?mode=list','showTable','')\">Refresh</a></td>";
	echo "</tr>";

	echo "<tr>";
		echo "<th> ID ";
		echo "<th> Author";
		echo "<th> Last Updated";
		echo "<th> Category";
		echo "<th> Event";
		echo "<th> Summary";
	echo "</tr>";
	// For Delete 
	if($mode=="delete") {		
		$var_id=$_GET["id"];
		$sqlDelete="Delete from events where id='$var_id'";
		$obj->query($sqlDelete);
		echo "<td><a href=\"javascript:delete_data();\">Delete</a>";
		echo "<tr>";
			echo "<td colspan=3>Data Deleted";
		echo "</tr>";

	}
	// End of Delete 


	// For Add New Data -- Display Text box and the Cancel and Save Option 
	if($mode=="new") {
		echo "<tr>";
			echo "<td> <input id='id' size=5> ";
			echo "<td> <input id='author' size=10> ";
			echo "<td> <input id='last_updated' size=10> ";
			echo '<td> <select name="category">
						<option value="category1">category1</option>
						<option value="category2">category2</option>
						<option value="category3">category3</option>
						<option value="category4">category4</option>
						</select> ';
			echo '<td> <textarea name="event" rows="12" cols="25"></textarea><td><textarea name="summary" rows="5" cols="25"></textarea> ';
			echo "<td<a href=\"javascript:requestInfo1('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a></td>";
			echo "<td><a href=\"javascript:save_data1();\">Save</a>";

		echo "</tr>";
	}
	// End of Add New Data


	// After Click on Add >> Save option the data is save into the database 
	if($mode=="save_new") {
		$id=$_GET["id"];
		$author=$_GET["author"];
		$last_updated=$_GET["last_updated"];
		$category=$_GET["category"];
		$event=$_GET["event"];
		$summary=$_GET["summary"];
		$sqlSave="Insert into events values('$id','$author','$last_updated','$category','$events','$summary')";
		$obj->query($sqlSave);
		echo "<tr>";
			echo "<td colspan=3>Data Saved";
		echo "</tr>";
	}
	// End of save_new 

	// For Update save Option
	if($mode=="update_data") {
		$id=$_GET["id"];
		$author=$_GET["author"];
		$last_updated=$_GET["last_updated"];
		$category=$_GET["category"];
		$event=$_GET["event"];
		$summary=$_GET["summary"];
		$sqlUpdate="Update events set id='$id', author = '$author', last_updated = '$last_updated', category = '$category', event = '$event', summary = '$summary' where id='$prev_id'";
		$obj->query($sqlUpdate);
		echo "<tr>";
			echo "<td colspan=3>Data Updated";
		echo "</tr>";
	}
	// End of Update

	// Display all the data from the table 
		$sql="SELECT id,author,last_updated,category,event,summary FROM events order by id desc";
		$obj->query($sql);	
		while($row=$obj->query_fetch(0)) {
			$id=$row['id'];
			$author=$row['author'];
			$last_updated=$row['last_updated'];
			$category=$row['category'];
			$event=$row['event'];
			$summary=$row['summary'];
		echo "<tr bgcolor='#ffffff'>";
		// if Mode is Update then get the ID and display the text field with value Other wise print the data into the table 
		if($mode=="update") {
			$id_=$_GET["id"];

		}
		if($id_==$id) {
			echo "<input type='hidden' value='$id_' name='prev_id' id='prev_id'>";
			echo "<td> <input type='number' value='$id' id='id' size='5'> </td> ";
			echo "<td> <input type='text' value='$author' id='author' size='10'> </td> ";
			echo "<td> <input type='text' value='$last_updated' id='last_updated' size='10'> </td> ";
			?><td> <select name="category">
						<option><? echo $category; ?></option><? echo '
						<option value="category1">category1</option>
						<option value="category2">category2</option>
						<option value="category3">category3</option>
						<option value="category4">category4</option>
						</select> ';
			?><td> <textarea name="event" rows="12" cols="25"><? echo $event; ?></textarea><td><textarea name="summary" rows="5" cols="25"><? echo $summary; ?></textarea> <?
			echo "<td> <a href=\"javascript:requestInfo1('showTable.php?mode=list&id=$id','showTable','')\">Cancel</a> </td> ";
			echo "<td><a href=\"javascript:update_data1();\">Save</a>";
			}  else {
			echo "<td>$id</td>";
			echo "<td>$author</td>";
			echo "<td>$last_updated</td>";
			echo "<td>$category</td>";
			echo "<td>$event</td>";
			echo "<td>$summary</td>";
			echo "<td> <a href=\"javascript:requestInfo1('showTable.php?mode=update&id=$id','showTable','')\">Update</a> </td> ";
			echo "<td> <a href=\"javascript:requestInfo1('showTable.php?mode=delete&id=$id','showTable','');\" onclick='return confirmLink(this);'>Delete</a></td>";
		}		

		echo "</tr>";

		}
	echo "</table>";

?>

 

And here is the javascript code (in this one I have purposely included the login function)

 

function getHTTPObject() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (!xmlhttp){
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    
}
  return xmlhttp;

  
}
var http = getHTTPObject(); // We create the HTTP Object

/*
Funtion Name=requestInfo 
Param = url >> Url to call : id = Passing div id for multiple use ~ as a seprator for eg. div1~div2 :
redirectPage >> if you like to redirect to other page once the event success then 
the response text = 1 and the redirectPage not left empty
*/

    function requestInfo1(url,id,redirectPage) {      
	var temp=new Array();
		http.open("GET", url, true);
		http.onreadystatechange = function() {
			if (http.readyState == 4) {
			  if(http.status==200) {
		  		var results=http.responseText;
				if(redirectPage=="" || results!="1") {

					var temp=id.split("~"); // To display on multiple div 
					//alert(temp.length);
					var r=results.split("~"); // To display multiple data into the div 
					//alert(temp.length);
					if(temp.length>1) {
						for(i=0;i<temp.length;i++) {	
							//alert(temp[i]);
							document.getElementById(temp[i]).innerHTML=r[i];
						}
					} else {
						document.getElementById(id).innerHTML = results;
					}	
				} else {
					//alert(results);
					window.location.href=redirectPage;			
				}
			  } 
  				}
		};
		http.send(null);
       }

/*
Function Name= emptyValidation
Desc = This function is used to validation for the empty field 
Param fieldList = This arguments set as a string varialble. you just need to supply the textbox name
if the textbox is multiple then supply with ~ separator for eg. username~password
*/

function emptyValidation1(fieldList1) {

	var field1=new Array();
	field1=fieldList1.split("~");
	var counter1=0;
	for(i=0;i<field1.length;i++) {
		if(document.getElementById(field1[i]).value=="") {
			document.getElementById(field1[i]).style.backgroundColor="#FF0000";
			counter1++;
		} else {
			document.getElementById(field1[i]).style.backgroundColor="#FFFFFF";	
		}
	}
	if(counter1>0) {
			alert("The Field mark as red could not left empty");
			return false;

	}  else {
		return true;
	}

}
function loginProcess() {
var var_username=document.getElementById("username").value;
var var_password=document.getElementById("password").value;

var checkValidation1=emptyValidation1('username~password');

if(checkValidation1==true) {
	requestInfo1('login_check.php?username='+var_username+'&password='+var_password,'loginDetails','welcome.php');
} else {
	return false;
}
}
function init_table() {
	requestInfo1('showTable.php?mode=list','showTable','');
}

function save_data1() {
		var id=document.getElementById("id").value;
		var author=document.getElementById("author").value;
		var last_updated=document.getElementById("last_updated").value;
		var category=document.getElementById("category").value;
		var event=document.getElementById("event").value;
		var summary=document.getElementById("summary").value;
		var checkValidation1=emptyValidation1('id~author~last_updated~category~event~summary');

	if(checkValidation1==true) {
		requestInfo1('showTable.php?mode=save_new&id='+id+'&author='+author+'&last_updated='+last_updated+'&category='+category+'&event='+event+'&summary='+summary,'showTable','');
	} 
}

function update_data1() {
		var prev_id=document.getElementById("prev_id").value;
		var id=document.getElementById("id").value;
		var author=document.getElementById("author").value;
		var last_updated=document.getElementById("last_updated").value;
		var category=document.getElementById("category").value;
		var event=document.getElementById("event").value;
		var summary=document.getElementById("summary").value;
		var checkValidation1=emptyValidation1('id~author~last_updated~category~event~summary');

	if(checkValidation1==true) {
		requestInfo1('showTable.php?mode=update_data&id='+id+'&author='+author+'&last_updated='+last_updated+'&category='+category+'&event='+event+'&summary='+summary+'&prev_id='+prev_id,'showTable','');

	} 
}

function confirmLink(theLink)
{
   
    var is_confirmed = confirm('Are you sure to delete this record?\n\nThis will permanently delete the Record!');
    if (is_confirmed) {
        theLink.href += '';
    }

    return is_confirmed;
}

 

Now apart from the number of extra values added in both functions I dont see any difference to why the javascript shouldnt work? Is there something missing?

 

Thanks

Link to comment
Share on other sites
rhodesa Newbie

rhodesa

Posted
Posted

Are you getting any specific JavaScript errors? Is the AJAX request going at all? It's tough to help on this cus I can't just pop your code into my browser and debug it. Do you have a link to the site so I can load it up in my browser?

 

Also, if you don't already, I would add the Firebug extension for Firefox. It does wonders for debugging JavaScript

Link to comment
Share on other sites
max_power Member

max_power

Posted
  • Author
Posted

Well, since it is in its early stages, if you have apache and mysql in your comp, it should be fine, since I am currently hosting it through a localhost (xxamp is very helpful).

 

I have uploaded the mysql database along with the php code here if you want to run it on your computer:

 

http://www.turboupload.com/9d4267pn9cxm/ajax_datagrid.zip.html

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.