I am writing some php code and jquery to make it a bit live. I have a cell table which I click to show a div. The html is something like:
<table>
<tr id="line-157"><td id="cell1-157" class="edit"></td><td id="cell2-157"></td></tr>
<tr><td id="w_157"></td><td id="p_157"></td></tr>
<tr id="line-158"><td id="cell1-158" class="edit"></td><td id="cell2-158"></td></tr>
<tr><td id="w_158"></td><td id="p_158"></td></tr>
<tr id="line-159"><td id="cell1-159" class="edit"></td><td id="cell2-159"></td></tr>
<tr><td id="w_159"></td><td id="p_159"></td></tr>
</table>
jquery:
$(document).ready(function() {
$('.edit').bind('click', function() {
var a = this.id.split('-') ;
var name_id = a[1] ;
$('#w_'+name_id).fadeIn();
$.get('minirpc.php',{
subcontrol: 'select_id',
id: name_id
},function(data){
$('#w_'+name_id).html(data);
})
$.get('minirpc.php',{
subcontrol: 'select_pay_id',
id: name_id
},function(data){
$('#p_'+name_id).fadeIn();
$('#p_'+name_id).html(data);
})
return false;
});
});
What I get the callback multiple times instead of one on each click. If I click one time is ok, 2 times it loops 4 times, 3 times it loops 16, and so on...any idea?
EDIT:
reading comments I'm figuring it could be a problem on software architecture, output data
does contain javascript because minirpc.php calls class_overbooking.php that calls js files. The files are:
- minirpc.php
- class_overbooking.php
- js/init_overbooking.js
- js/overbooking.js
inside minirpc.php:
<?
include('class_overbooking.php');
switch($subcontrol){
case ...
case quote_select:
break;
case quote_pay_id:
break;
}
?>
inside class_overbooking.php:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/init_overbooking.js"></script>
<script type="text/javascript" src="js/overbooking.js"></script>
<?
php class functions mixed jquery
?>
inside js/init_overbooking.js:
google.load("jquery", "1.7.1");
google.load("jqueryui", "1.8.13");
google.setOnLoadCallback(function() {
// ![CDATA[
various sfuff
// ]]
});
inside js/overbooking.js:
$(document).ready(function() {
(...)
$('.edit').live('click', function() {
var a = this.id.split('-') ;
var name_id = a[2] ;
var count = 0 ;
var start = new Date().getTime();
$('#w_'+name_id).fadeIn();
var elapsed1 = new Date().getTime() - start;
$('#jdebug1').html() ;
$.get('minirpc.php',{
subcontrol: 'quote_select',
id: name_id
},function(data){
$('#w_'+name_id).html(data);
var elapsed2 = new Date().getTime() - start;
$('#jdebug1').append('|('+name_id+')elapsed2:'+elapsed2+'ms ') ;
});
$.get('minirpc.php',{
subcontrol: 'quote_pay_id',
id: name_id
},function(data){
$('#p_'+name_id).fadeIn();
$('#p_'+name_id).html(data);
var elapsed3 = new Date().getTime() - start;
$('#jdebug1').append('|('+name_id+')elapsed3:'+elapsed3+'ms ') ;
});
return false;
});
});
I also tried with a unique selector class but the problem changing name "edit" into "edit-rev123" is the same.
Any suggestion?