Hello, thanks for reading my thread. I'm still new to web development so I appreciate your help in advance. I am having a problem that I am sure many people have run across in the past. In my project, I have sidebar menus loaded based upon the user permission level after login. I am loading the different php files into a "content" div in the index.php page with AJAX. This is working great. However, once I have loaded the php file into the div, I lose the php files functionality and I am trying to get it back. I understand that is because I am using AJAX to load the files into the div. So I have been trying to use Live to bind the DOM. If anyone can help me with some code suggestions or code examples I would greatly appreciate it. I am posting some stripped down basic code examples to try to get the concept figured out. The slider is link is working but I am having trouble with the sayhello.php page not displaying the results from the submit button and refreshing or displaying the results in the div "content" in index.php page. What happens is the index.php page just simply reloads with no results.
Thanks for you help!
here is the index.php file 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" />
<title>Untitled Document</title>
<link href="twoColFixLt.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mydiv').live('click',function(){
$("p").slideToggle();
alert("Thank you for using the Slide Toggle");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#content').live('submit',function(){
alert("Thank you for using the submit button");
});
});
</script>
</head>
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li><li><a href="javascript: addContent('ajax_live_slidetoggle.php', 'content')">Ajax-Live-Slide Toggle</a></li>
<li><li><a href="javascript: addContent('sayhello.php', 'content')">sayhello</a></li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div id="content">
<h1>Div "content"</h1>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
Here is the sayhello.php page that AJAX loads into the div on the index page:
<?php
// Print a greeting if the form was submitted
if ($_POST['user']) {
print "Hello, ";
// Print what was submitted in the form parameter called 'user'
print $_POST['user'];
print "!";
} else {
// Otherwise, print the form
print <<<_HTML_
<div id="content">
<form name="MyForm" action="" method="post" >
Your Name: <input type="text" name="user">
<br/>
<input type="submit" value="submit">
</form>
_HTML_;
}
?>
</div>
ajax_live_slidetoggle.php page code here:
<html>
<head>
</head>
<body>
<div id="mydiv">
<div style="background-color:blue">
<p>Slide toggle text for the click event. </p>
<input type="submit" value="Submit">
</div>
</div>
</body>
</html>