I have a home page from where I call another page insertfrm.php through Ajax. The problem is that insertfrm.php works fine when loaded directly in browser but does not work when loaded through ajax in div on home page.
home.php
insertfrm.php
test2.php
I don't know if I have explained my question well. Any help will be highly appreciated.
home.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © 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 bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
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
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, 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>
<title>PHP Project</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="pgwidth">
<div id="heading" >
<?php include("Menu/header.php"); ?>
</div>
<div id="wrapper">
<div id="navbar" Align="right" style="margin-right: 3px">
<?php include("Menu/navbar.php"); ?>
<!--end navbar--></div>
<div id="leftmenu">
<a href="javascript:ajaxpage('insertfrm.php', 'maincol');">New Head</a><br>
<!--end leftmenu--></div>
<div id="maincol">
<h1>PHP Test Project</h1>
<p>This is a test project to develop my HTML, PHP and mySQL skills</p>
<!--end maincol--></div>
<!--end wrapper--></div>
<div id="footer" Align="Center"><?php include("Menu/footer.php"); ?></div>
<!--end pgwidth--></div>
</body>
</html>
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var hcode = $("#HCode").val();
var hname = $("#HName").val();
//var username = $("#username").val();
//var password = $("#password").val();
//var gender = $("#gender").val();
var dataString = 'HCode='+ hcode + '&HName=' + hname;
if(hcode=='' || hname=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "test2.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
<html>
<body>
<h3>Creating New Head</h3>
<form method="post" name="form">
<table>
<tr>
<td>Head Code:</td><td><input type="text" name="HCode" /></td></tr>
<td>Head Type:</td><td><input type="text" name="HName" /></td></tr>
<td></td><td><!input type="submit" /><!button type='submit' name='update' ><!/button>
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span></td></tr>
</table>
</form>
</body>
</html>
Code:
<?php include("connectdb.php");
if($_POST)
{
$sql="INSERT INTO headTB (HCode, HName)
VALUES
('$_POST[HCode]','$_POST[HName]')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
//mysql_query("SQL insert statement.......");
}else { }
mysql_close($con)
?>
Comment