Assume I\'m calling search through AJAX. Now I want to call another AJAX on the page that will be loaded by AJAX and can be edited.
You need to use Jquery delegate for binding events to live elements
$('body').delegate('#yourtableid','click /*or watever you want*/',function(){
//do stuff here (editing)
});
Assuming that you have something basically like this structure and jQuery 1.7+
<div id="resultContainer">
<table>
<tr>
<!-- editable data -->
<span>data</span>
<!-- that turns into like this on click -->
<form>
<input type="text" value="data">
<input type="submit" value="save">
On the parent page, you need to attach "delegated handlers", which are event handlers placed on parent elements that execute for present or future child elements.
And so, assuming that we have a container div id'ed "resultContainer" in which you dump the live data, we attach it handlers:
//attach a delegated submit handler on resultContainer for forms
$('#resultContainer').on('submit','form',function(event){
//do what you want when an item is edited
//"this" inside here is the DOM element form, which fired the submit
//prevent the default submit action using event.preventDefault()
//$(this).serialize() turns the form data into a serialized query string
});
PHP page of my application in this live search with pagination i am applied
<html>
<head>
<script type="text/javascript">
//====================================================================================================================
//============================================first call when page load=============================================
function ajaxCall(n)
{
//alert("display ajacCall ");
//alert("page no ::"+n);
var ajaxRequest;
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange=function()
{
if(ajaxRequest.readyState==4)
{
//alert("Response :: "+ajaxRequest.responseText);
document.getElementById("displayButton").innerHTML=ajaxRequest.responseText;
if(n!=0)
{
disp_Record(n);
}
else
{
disp_Record(0);
}
}
}
var query="ajaxhendler.php?msg=select";
//alert("Request ::" +query);
ajaxRequest.open("POST",query,true);
ajaxRequest.send();
}
//================================================Display Recodr to button Press================================================
//================================================Display Record to Static Button===============================================
function disp_Record(n)
{
//alert("display record function");
var ajaxRequest;
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange=function()
{
if(ajaxRequest.readyState==4)
{
//alert("Response :: "+ajaxRequest.responseText);
document.getElementById("displayRecord").innerHTML=ajaxRequest.responseText;
}
}
//alert("txt::"+ txt)
var query="ajaxhendler.php?msg=selectRecordNo&no_of_record="+n;
//alert("Request ::" +query);
ajaxRequest.open("POST",query,true);
ajaxRequest.send();
}
//==============================================For Live search==============================================================
//===========================================For live search Display Button=================================================
function callSearch(n,text)
{
//alert("call Search First Function");
var ajaxRequest;
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange=function()
{
if(ajaxRequest.readyState==4)
{
//alert("Response :: "+ajaxRequest.responseText);
document.getElementById("displayButton").innerHTML=ajaxRequest.responseText;
if(n!=0)
{
disp_Record_live(n,text);
}
else
{
disp_Record_live(0,text);
}
}
}
var txt=document.getElementById("txtsearch").value;
//alert("txt::"+ txt)
var query="ajaxhendler.php?msg=selectRecord&txt="+txt;
//alert("Request ::" +query);
ajaxRequest.open("POST",query,true);
ajaxRequest.send();
}
//====================================================================================================================
function disp_Record_live(n,text)
{
//alert("Display Record live Second Function");
var ajaxRequest;
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange=function()
{
if(ajaxRequest.readyState==4)
{
//alert("Response :: "+ajaxRequest.responseText);
document.getElementById("displayRecord").innerHTML=ajaxRequest.responseText;
}
}
var txt=document.getElementById("txtsearch").value;
//alert("txt::"+ txt)
var query="ajaxhendler.php?msg=select_Record_No_live&no_of_record_live="+n+"&findR="+txt;
//alert("Request ::" +query);
ajaxRequest.open("POST",query,true);
ajaxRequest.send();
}
</script>
</head>
<body onLoad="<?php if($_GET['txt']=="")
{
echo "ajaxCall(";
$n=0; if($_GET['page']!=null)
{
echo $_GET['page'];
}
else
{
echo $n;
}
echo ")";
}
else
{
echo "callSearch(";
echo $_GET['page'].",'".$_GET['txt']."')";
} ?>" onUnload="msg()" bgcolor="#CCCCCC">
<form>
<table width="100%">
<tr bgcolor="#CCFFCC">
<td colspan="5">
<font color="#CC6666">Search Record By Name</font><input type="text" name="txtsearch" id="txtsearch" value="<?php echo $_GET['txt'];?>" onKeyUp="callSearch(<?php
$n=0;
if($_GET['page']!=null)
{
echo $_GET['page'].",'".$_GET['txt']."'";
}
else
{ echo $n;}
?> )"/>
</td>
<td align="right">
<a href="insert.php">Insert Record</a>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td>
<div id="displayRecord"></div>
</td>
</tr>
<tr>
<td>
<div id="displayButton">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
and this is my Handlerpage.php
<?php
$page_name = "http://localhost/desk.php";
$msg=$_GET['msg'];
if($msg=='select')
{
load_pages($_GET['page']);
}
if($msg=="selectRecord")
{
live_search_pages();
}
if($msg=="selectRecordNo")
{
$n=$_GET['no_of_record'];
disp_Record($n);
}
if($msg=="select_Record_No_live")
{
$n=$_GET['no_of_record_live'];
live_search($n,$t);
}
//==================================================================pages============================================
//=====================================================Static button================================================
function load_pages($page)
{
$cn=mysql_connect("localhost","root","");
mysql_select_db("per_info",$cn);
$query="SELECT count(*) 'TR' from p_info";
$rs = mysql_query($query);
$rec = mysql_fetch_array($rs);
$n=$rec['TR'];
if($n>0)
{
$pages=ceil($n/3);
$i=0;
echo "<table align=\"center\"><tr><td align=\"right\" bgcolor=\"#666666\"><font color=\"#FFFFFF\">Pages : </td><td align=\"center\" bgcolor=\"#666666\">";
while($i<$pages)
{
echo "<input type=\"button\" value=\"".($i+1).""; echo "\" onclick=\"disp_Record(".($i*3).")\" />";
$i=$i+1;
}
echo "</td></tr></table>";
}
else
{
echo "No Record Found";
}
}
//============================================Selected record Display By Button========================================
//==========================================Display Record for static Record==========================================
function disp_Record($btn)
{
$cn=mysql_connect("localhost","root","");
mysql_select_db("per_info",$cn);
//$btn=1;
$query="SELECT u.p_id 'ID', u.p_name 'NAME', u.p_add 'ADDRESS', l1.loc_name 'CITY', l2.loc_name
'STATE',u.p_gen
'GENDER', u.p_photo 'PIC', u.p_phone 'PH'
FROM p_info u, tbl_state l1, tbl_state l2
WHERE u.p_city = l1.loc_id
AND l2.loc_id = l1.loc_parent ORDER BY u.p_id desc LIMIT ".$btn.", 3";
$rs = mysql_query($query);
echo "<table width=\"100%\" frame=\"hsides\" >
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Name</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Address</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">City</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">State</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Gender</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Photo</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Phone No</font></th>
<th bgcolor=\"#666666\"></th>
<th bgcolor=\"#666666\"></th>";
while($row=mysql_fetch_array($rs))
{
echo "<tr>
<td>".$row['NAME']."</td>
<td>".$row['ADDRESS']."</td>
<td>".$row['CITY']."</td>
<td>".$row['STATE']."</td>
<td>";if($row['GENDER']=="1")
{
echo "Male";
}
else
{
echo "Female";
}
echo "</td>
<td>
<img src=\"".$row['PIC']."\" alt=\"Pulpit rock\" width=\"50\" height=\"50\" />
</td>";
echo "<td>".$row['PH']."</td>
<td><input type=\"button\" value=\"Edit\" onclick=\"getid(".$row['ID'].",".$btn.",'')\"/></td>
<td><input type=\"button\" value=\"Delete\" onclick=\"callDelete(".$row['ID'].",".$btn.",'')\"/></td>
</tr>";
}
}
//==========================================================Live search By Button=====================================
function live_search_pages()
{
$txt=$_GET['txt'];
$cn=mysql_connect("localhost","root","");
mysql_select_db("per_info",$cn);
$query="SELECT count(*) 'TR' from p_info where p_name like '".$txt."%'";
$rs = mysql_query($query);
$rec = mysql_fetch_array($rs);
$n=$rec['TR'];
if($n>0)
{
$pages=ceil($n/3);
$i=0;
echo "<table align=\"center\"><tr><td align=\"right\" bgcolor=\"#666666\"><font color=\"#FFFFFF\">Pages : </td><td align=\"center\" bgcolor=\"#666666\">";
while($i<$pages)
{
echo "<input type=\"button\" value=\"".($i+1).""; echo "\" onclick=\"disp_Record_live(".($i*3).")\" />";
$i=$i+1;
}
echo "<td></tr></table>";
}
else
{
echo "No record Found";
}
}
//================================================================Live search==========================================
function live_search($btn,$text)
{
$txt=$_GET['findR'];
$text=$_GET['text'];
$cn=mysql_connect("localhost","root","");
mysql_select_db("per_info",$cn);
if($text==null)
{
$query="SELECT u.p_id 'ID', u.p_name 'NAME', u.p_add 'ADDRESS', l1.loc_name 'CITY', l2.loc_name 'STATE', u.p_gen
'GENDER', u.p_photo 'PIC', u.p_phone 'PH'
FROM p_info u, tbl_state l1, tbl_state l2
WHERE u.p_city = l1.loc_id
AND l2.loc_id = l1.loc_parent
AND u.p_name LIKE '".$txt."%' ORDER BY u.p_id desc LIMIT ".$btn.", 3";
}
else
{
$query="SELECT u.p_id 'ID', u.p_name 'NAME', u.p_add 'ADDRESS', l1.loc_name 'CITY', l2.loc_name 'STATE',u.p_gen
'GENDER', u.p_photo 'PIC', u.p_phone 'PH'
FROM p_info u, tbl_state l1, tbl_state l2
WHERE u.p_city = l1.loc_id
AND l2.loc_id = l1.loc_parent
AND u.p_name LIKE '".$text."%' ORDER BY u.p_id desc LIMIT ".$btn.", 3";
}
if($rs=mysql_query($query))
{
echo "<table width=\"100%\" frame=\"hsides\">
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Name</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Address</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">City</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">State</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Gender</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Photo</font></th>
<th bgcolor=\"#666666\"><font color=\"#FFFFFF\">Phone No</font></th>
<th bgcolor=\"#666666\"></th>
<th bgcolor=\"#666666\"></th>";
while($row=mysql_fetch_array($rs))
{
echo "<tr>
<td>".$row['NAME']."</td>
<td>".$row['ADDRESS']."</td>
<td>".$row['CITY']."</td>
<td>".$row['STATE']."</td>
<td>";if($row['GENDER']=="1")
{
echo "Male";
}
else
{
echo "Female";
}
echo "</td>
<td>
<img src=\"".$row['PIC']."\" alt=\"Pulpit rock\" width=\"50\" height=\"50\" />
</td>";
echo "<td>".$row['PH']."</td>
<td><input type=\"button\" value=\"Edit\" onclick=\"getid(".$row['ID'].",".$btn.",'".$txt."')\"/></td>
<td><input type=\"button\" value=\"Delete\" onclick=\"callDelete(".$row['ID'].",".$btn.",'".$txt."')\"/></td>
</tr>";
}
}
else
{
echo "error";
}
}
?>
I hope that it will helps you