Ajax loaded Form search or submit button will not work

[ChrisATO]

Hello All, First let me acknowledge I am still fairly new to webdevelopment and this site. Thanks in advance to anyone who can help me with this issue and for those willing to try.

The PROBLEM: I load into a div on index.php page via AJAX another php page. Once that page loads, I lose all the function of that page. For example, I click on the search or submit button and nothing happens.

I am trying to create a site using mostly PHP and MySQL and I have integrated some AJAX functions into the site to load new PHP pages into a DIV called "dynamic" on the index.php page without having to reload the entire page. This is working great.

However, when I use the menu with the following hyperlink <a href="javascript: addContent('sample.php', 'dynamic')"> calling the AJAX code to load the sample.php page inot the the DIV dynamic, the sample.php pages loads into the DIV but the PROBLEM is that the submit, and or search functions on the sample.php page stop working.

I believe that this has something to do with using the AJAX code because it is Asynchronous. Perhaps I need to use live or event delegation.

Since I am new to webdevelopment and trying to learn best practices if anyone knows a good way to load PHP forms into a DIV on perhaps a index.php page and then have the form controls still work, I would greatly appreciate your advice, help and if at all possible sample code to help me get past this issue I have been stuck on.

Also I have been using NuSphere PhpED for an IDE which has helped me step through PHP and MySQL code to solve problems real well. However, I would like to get a recommendation on a IDE to use with Java Script and AJAX. Part of my problem with resolving this issue is that I can't step through the code to see what is not happening..

Thanks in advance for your help!

[scrappedcola]

Could we see some code? If you are attaching events to the anchors that are on the part that is being dynamically changed you will either need to reattach those events onload or use something like delegate/live (like you mentioned) to dynamically bind those events. The best way to step through javascript would be to use Firefox and Firebug. Firebug will allow you to write out variables to a command line within firebug, set break points and view variables at various states, and also view headers/content for the http requests that occur (really useful for ajax calls to see what you have sent to the server and what the server sent back). IE has a similar console/debug tool but it's not as intuitive as firebug and you would need a second tool called Fiddler to view the actual http traffic (still a nice tool to play with as well). There are various tutorials on both tools out there (google is your friend). Safari and Chrome both have developer tools but I personally don't like them and will generally stick with firebug when I can at work.

[ChrisATO]

Hello and thanks to all who can provided some insite or help with this. I have stripped down the code to a minimium in order to get right to the issue(s)and provided a plain sample the problem I am encountering.

The objective is to have a index page that is used for a template for the site and depending on what user is logged in and what their permission level is will load a different menu. So I am using includes to accomplist this and in all the menus I have AJAX hyperlinks that will display the php page in a div on the index page called "content". That is working fine, as far as getting the php page to load in the div content on the index page.

The probelm is that once the new page is displayed in the div on the index page, all the functionality of that page stops working. For example the click event of the new dynamically loaded page stops working. So I did a little research and thought that using the jquerry live function would somehow bind the click events of the page once it was loaded. However it is not working and I could use some help. Below is the stripped down basic code of what I am trying to accomplish. All help and fixes to my sample code would be greatly appreciated. Thanks in advance to ALL!

index.ph

<!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>
</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>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div id="content">
<h1>Div &quot;content&quot;</h1>

<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>

ajax_live_slidetoggle.php

<html>
<head>
<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();
});
});
</script>
</head>
<body>

<div id="mydiv">
<div style="background-color:blue">
<p>Slide toggle text for the click event. </p>
<button>Submit</button>
</div>
</div>

</body>
</html>

I also reference and link ajax.js and jquery-1.4.4.js

Any example code would be greatly appreciated. Thanks!!