'Confused about ajax and php
What i am trying to do is to remove table row after completing ajax request. html page is generated from php script. Code example:
echo "<script>";
echo "var trid = 'removetr$ChildSubnetID';";
echo "function funcBefore(){\$('#removetr$ChildSubnetID').remove();\$('#loadimg').show();}";
echo "function funcResults(data){\$(\"#message\").html(data);$(\"#loadimg\").hide();}";
echo "\$(document).ready(function(){
\$(\"#gotoa$ChildSubnetID\").bind(\"click\",function(){
var Operation='DelSubnet';
var DelID=\"$ChildSubnetID\";
var SubnetDEL=\"$ChildSubnet\";
\$.ajax({
url: \"exec.php\",
type:\"POST\",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:\"HTML\",
beforeSend:funcBefore,
success:funcResults
});
});
});";
echo "</script>";
echo "<tr id='removetr".$ChildSubnetID."'><td>$ChildSubnetID</td><td>$ChildSubnet</td><td><center><p id='gotoa".$ChildSubnetID."' onclick='return confirm(\"Удалить подсеть $ChildSubnet?\")' style='cursor:pointer;
other style...'>Удалить $ChildSubnet</p></center></td></tr>";
The result is a table with 3 columns. When i go to to "view page source" i get the following code from browser:
<script>var trid = 'removetr4';
function funcBefore(){$('#removetr4').remove();$('#loadimg').show();}
function funcResults(data){$("#message").html(data);$("#loadimg").hide();}
$(document).ready(function(){
$("#gotoa4").bind("click",function(){
var Operation='DelSubnet';
var DelID="4";
var SubnetDEL="1.1.1.1/29";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr4'><td id='removetr4'>4</td><td id='removetr4'>1.1.1.1/29</td><td id='removetr4'><center><p id='gotoa4' onclick='return confirm("Удалить подсеть 1.1.1.1/29?")' style='cursor:pointer;
other style attributes...'>Удалить 1.1.1.1/29</p></center></td></tr>
But every time when i press to
element, i get my show-hide image, but row doesnt disappear. I can see in page source
function funcBefore(){$('#removetr4').remove();$('#loadimg').show();}
Where i can see that element name(#removetr4) presents And also i see html code
<tr id='removetr4'>
So here i see that row id also is corrent. Can someone tell what is wrong with code? Why tr rows doesnt disappearing after ajax call?
One update. If in put in script part manual identificator-row disappears when i do click event.
For example from this
echo "function funcBefore(){\$('#removetr".$ChildSubnetID."').remove();\$('#loadimg').show();}";
to this
echo "function funcBefore(){\$('#removetr4').remove();\$('#loadimg').show();}";
Full HTML code:
<html><head><link rel='stylesheet' href='../keagpontyle2.css'><script type='text/javascript' src='jquery-2.0.3.min.js'></script></head>
<body><center><div id='loadimg' style='display:none;position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;opacity: 0.9;background:black';font: 35px Courier New;color: white;><center><img src='Curve-Loading.gif' style='position:absolute;width:100%;height:100%;top:0;bottom:0;left:0;right:0;></img><center><font color='red' size='5' face='Courier New'>Загрузка</font></center></center></div></center>
<center><table id='topMenu'><tr><th id='header' colspan='4'><center>Kea GPon UI</center><div id='infomessage'>Logged in as administrator</div></th></tr><tr><td><a href='../'>Главная</a></td><td><a href='../sites'>Конфигурация сайтов</a></td><td><div id='activemenu'>Конфигурация подсетей</div></td><td><a href='../leases'>Операции с адресами</a></td></tr></table></div></div><table id='sitecreate'><tr><td id='topMenuSite' colspan='4'>Создание и удаление подсетей</td></tr></table><table id='sitecreate'><tr><td colspan='2' id='topMenuSite3'>Операции с существующими сетями</td><td colspan='3' id='topMenuSite3'>Добавление новых подсетей</td></tr><tr><td><form action='' method='post'><select name='Sites' id='selects2'><option value='0'>Выберите Сайт</option><option value='CTA2-OLT1-MGM'>CTA2-OLT1-MGM</option></select></td><td><input type='submit' name='ShowSubnets' value='Показать подсети' / id='SiteAddButton'></form></td><td><form action='' method='post'><select name='SitesToAddSubnets' id='selects2'><option value='0'>Выберите Сайт</option><option value='CTA2-OLT1-MGM'>CTA2-OLT1-MGM</option></select></td><td><input type='text' name='NewSubnet' placeholder='Сеть/Префикс' id='selectstext'></td><td><input type='submit' name='AddSubnet' value='Добавить' / id='SiteAddButton'></form></td></tr></table><div id='message'><li>Вы выбрали 'CTA2-OLT1-MGM'</li></div></br><table id='currentsites'><tr><th>ID подсети</th><th>Подсеть</th><th>Действие</th></tr><script>var trid = 'removetr4';function funcBefore(){$('#removetr4').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa4").bind("click",function(){
var Operation='DelSubnet';
var DelID="4";
var SubnetDEL="1.1.1.1/29";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr4'><td id='removetr4'>4</td><td id='removetr4'>1.1.1.1/29</td><td id='removetr4'><center><p id='gotoa4' onclick='return confirm("Удалить подсеть 1.1.1.1/29?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 1.1.1.1/29</p></center></td></tr><script>var trid = 'removetr5';function funcBefore(){$('#removetr5').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa5").bind("click",function(){
var Operation='DelSubnet';
var DelID="5";
var SubnetDEL="5.5.5.0/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr5'><td id='removetr5'>5</td><td id='removetr5'>5.5.5.0/24</td><td id='removetr5'><center><p id='gotoa5' onclick='return confirm("Удалить подсеть 5.5.5.0/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 5.5.5.0/24</p></center></td></tr><script>var trid = 'removetr6';function funcBefore(){$('#removetr6').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa6").bind("click",function(){
var Operation='DelSubnet';
var DelID="6";
var SubnetDEL="2.2.2.2/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr6'><td id='removetr6'>6</td><td id='removetr6'>2.2.2.2/24</td><td id='removetr6'><center><p id='gotoa6' onclick='return confirm("Удалить подсеть 2.2.2.2/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 2.2.2.2/24</p></center></td></tr><script>var trid = 'removetr7';function funcBefore(){$('#removetr7').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa7").bind("click",function(){
var Operation='DelSubnet';
var DelID="7";
var SubnetDEL="7.7.7.7/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr7'><td id='removetr7'>7</td><td id='removetr7'>7.7.7.7/24</td><td id='removetr7'><center><p id='gotoa7' onclick='return confirm("Удалить подсеть 7.7.7.7/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 7.7.7.7/24</p></center></td></tr><script>var trid = 'removetr8';function funcBefore(){$('#removetr8').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa8").bind("click",function(){
var Operation='DelSubnet';
var DelID="8";
var SubnetDEL="8.8.8.8/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr8'><td id='removetr8'>8</td><td id='removetr8'>8.8.8.8/24</td><td id='removetr8'><center><p id='gotoa8' onclick='return confirm("Удалить подсеть 8.8.8.8/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 8.8.8.8/24</p></center></td></tr><script>var trid = 'removetr9';function funcBefore(){$('#removetr9').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa9").bind("click",function(){
var Operation='DelSubnet';
var DelID="9";
var SubnetDEL="9.9.9.9/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr9'><td id='removetr9'>9</td><td id='removetr9'>9.9.9.9/24</td><td id='removetr9'><center><p id='gotoa9' onclick='return confirm("Удалить подсеть 9.9.9.9/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 9.9.9.9/24</p></center></td></tr><script>var trid = 'removetr10';function funcBefore(){$('#removetr10').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa10").bind("click",function(){
var Operation='DelSubnet';
var DelID="10";
var SubnetDEL="10.10.10.10/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr10'><td id='removetr10'>10</td><td id='removetr10'>10.10.10.10/24</td><td id='removetr10'><center><p id='gotoa10' onclick='return confirm("Удалить подсеть 10.10.10.10/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 10.10.10.10/24</p></center></td></tr><script>var trid = 'removetr11';function funcBefore(){$('#removetr11').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa11").bind("click",function(){
var Operation='DelSubnet';
var DelID="11";
var SubnetDEL="11.11.11.11/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr11'><td id='removetr11'>11</td><td id='removetr11'>11.11.11.11/24</td><td id='removetr11'><center><p id='gotoa11' onclick='return confirm("Удалить подсеть 11.11.11.11/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 11.11.11.11/24</p></center></td></tr><script>var trid = 'removetr12';function funcBefore(){$('#removetr12').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa12").bind("click",function(){
var Operation='DelSubnet';
var DelID="12";
var SubnetDEL="12.12.12.12/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr12'><td id='removetr12'>12</td><td id='removetr12'>12.12.12.12/24</td><td id='removetr12'><center><p id='gotoa12' onclick='return confirm("Удалить подсеть 12.12.12.12/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 12.12.12.12/24</p></center></td></tr><script>var trid = 'removetr13';function funcBefore(){$('#removetr13').remove();$('#loadimg').show();}function funcResults(data){$("#message").html(data);$("#loadimg").hide();}$(document).ready(function(){
$("#gotoa13").bind("click",function(){
var Operation='DelSubnet';
var DelID="13";
var SubnetDEL="13.13.13.13/24";
$.ajax({
url: "exec.php",
type:"POST",
data:({operation:Operation,delid:DelID,subnet:SubnetDEL}),
dataType:"HTML",
beforeSend:funcBefore,
success:funcResults
});
});
});</script><tr id='removetr13'><td id='removetr13'>13</td><td id='removetr13'>13.13.13.13/24</td><td id='removetr13'><center><p id='gotoa13' onclick='return confirm("Удалить подсеть 13.13.13.13/24?")' style='cursor:pointer;
background-color: #1080b0;
width:60%;
align:center;
font: 15px Courier New;
color: white;
border: none;
text-shadow: 2px 2px 4px #000000;
border-radius: 5px;
border: 1px solid #1080b0;'>Удалить 13.13.13.13/24</p></center></td></tr></table></center></body></html>
Solution 1:[1]
I found what is wrong.
The unique id for tr is not the only thing that must be unique. In the code function names are the same:)
So before each <tr> function name "funcResults" must also be unique.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Ingo Steinke |