Here I have shown 4 files I am using to edit rows of table by taking data from the database.
First file is DataAdministration.php. when loading this file #Loading_Page7 should be shown and after clicking on #EditForms I need to show #Loading_Page8 div. At the moment when it is displaying for the first time I need to load DisplayData.php inside to #Loading_Page8 div. To support that I have used Update.js file. After loading DisplayData.php I need to edit a selected row by clicking on the edit link. Then the editable input box needed to be display in the relevant FormName column. Instead of writing them in the same file I need to use separate files like I have used here. But after clicking on edit link ajax request is not sent to the UpdateData.php file.
I'm working with this for many days but couldn't fix it yet. This is quite a long question. But please someone be kind enough to show my mistake.
<html>
<head>
<script type='text/javascript' src='Update.js'></script>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#Loading_Page8").hide();
$("#EditForms").click(function(){
$("#Loading_Page7").hide();
$("#Loading_Page8").show();
ABC();
C();
return false;
});
});
</script>
</head>
<body>
<div id="Loading_Page7" >
<div id="EditForms" class="AddUser">
<li><a href=""><span>Edit/Delete Forms</span> </li></a>
</div>
</div>
<div id="Loading_Page8">
<div class="User" style="color:#0B173B">Forms_Available_to_Collect_Pubic_Health_Information </div>
<div id="DisplayFormDetails" style="position:absolute; top:100px; width:1000px;">
</div>
</div>
</body>
</html>
This is the Update.js file
function ABC(){
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "DisplayData.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#DisplayFormDetails").html(response);
//alert(response);
}
});
C();
}
function C() {
$(".FormEdit").click(function(){
var B=$(this).attr('id');//ID comming is FormEdit3. And now B==4
var NumericValue=B.replace("FormEdit","");
$.ajax({
type:"POST",
url:"UpdateData.php",
data:{ NumericValue : NumericValue },
success:function(data){
$("#FormName"+NumericValue).html(data);
},
error: function (err){
alert(err.responseText)
}
});
});
}
This is DisplayData.php
<?php
include 'connectionPHP.php';
$result=mysqli_query($con,"SELECT * FROM Form");
echo "<table border='1' >
<tr style='background-color:#D0A9F5;' height='40px;'>
<th width='100px;'>Form ID</th>
<th width='420px;'>Form Name</th>
<th width='70px;'>Edit</th>
</tr>";
$i=1;
while($row = mysqli_fetch_array($result)) {
$w=$row['Form_ID'];
echo "<tr height='25px;'>";
echo "<td name='FormID' id='FormID ".$i."' align=center>$row[Form_ID] </td>";
echo "<td name='FormName' id='FormName".$i."' align=left>$row[Form_Name]</td>";
echo "<td class='FormEdit' id='FormEdit".$i."' align=center><a href='' align=left>Edit</a></td>";
echo "</tr>";
$i++;
}
echo "</table>";
?>
And Finally UpdateData.php file.
<?php
include 'connectionPHP.php';
if(isset($_POST['NumericValue'])) {
$uid = $_POST['NumericValue'];
echo $uid;
$query ="SELECT * FROM Form WHERE Form_ID='$uid' ";
$FetchResults=mysqli_query($con,$query);
while($row=mysqli_fetch_array($FetchResults)) {
$FormName=$row['Form_Name'];
echo '<input type="text" value="$FormName"></input>';
}
}
?>
The call to UpdateData.php in inside a click handler which sits inside the function C(){..}. Just calling C() on click of #EditForms will not suffice.
Also, I don't think .FormEdit is being used anywhere.
EDIT:
function C() {
var NumericValue = $("#DisplayFormDetails table tr").length;
$.ajax({
type: "POST",
url: "UpdateData.php",
data: {
"NumericValue": NumericValue
},
success: function (data) {
$("#FormName" + NumericValue).html(data);
},
error: function (err) {
alert(err.responseText)
}
});
}