The problem I am facing is..the onclick and onchange events are triggered multiple times. I need help in handling the events for ajax calls. I tried using off() to handle but it is not working properly. below is my js code.
The application looks something like this
https://i.imgur.com/FAiGu2s.png
Main-p file.. I have two pills/tabs...on click of home (I load bnpp-h.php) on click of #tab1 i populate tracker.php
bnpp-h file -> has just a carousal code
tracker file -> I populate a dropdown with id #tname using which (based on the value selected) i populate another dropdown from tmember.php has the #logbutton on click of which I call the logdata.php I have two tabs (#sub1 and #sub2) on click of which I populate table.php
tmember file -> populates another dropdown to #member based on value selected from #tname (handling this by onchange event)
table file -> fetches records from a table x (triggered on #sub2 and #sub3 onclick)
logdata file -> inserts record into the table x (triggered by #logbutton click)
This is my js file...
$(document).ready(function()
{
$('#tab0').on('click',function()
{
document.getElementById("myhome").innerHTML='<object type="text/html"
width="100%" height="100%" style="position: absolute" data="bnpp-h.php" >
</object>';
$("#tab0").off("click");
});
$('#tab1').on('click',function()
{
/*
if($('#homeload').length)
{
$('#homeload').remove();
}
*/
$('#content').load('tracker.php');
//unbinding click events
$("#tab1").off("click");
$("#tname").off("change");
$("#sub2").off("click");
$("#sub3").off("click");
$("#logbutton").off("click");
});
$('#issuetype').on('change',function()
{
//$('#issuetitle').prop("disabled",false);
var select=$('#issuetype :selected').text();
if(select=='Other')
{
$('#issuetitle').prop("disabled",false);
}
else
{
$('#issuetitle').prop("disabled",true);
}
$("#issuetype").off("change");
});
$('#tname').on('change',function()
{
//$('#issuetitle').prop("disabled",false);
var tname =$('#tname :selected').val();
if(tname == '')
{
//$("#tname").off("change");
alert('fucking comes here');
$("#tmember").empty();
}
else
{
var teamname =$('#tname :selected').text();
var dataString = { 'tname': teamname};
$.ajax(
{
type: 'POST',
url: 'tmember.php',
datatype: 'jsonp',
data: dataString,
success: function(data)
{
//alert(data);
$('#tmember').html(data);
}
});
//$("#logbutton").off("click");
}
//unbinding click events
$("#tname").off("change");
$("#sub2").off("click");
$("#sub3").off("click");
$("#logbutton").off("click");
//$("#tname").off("change");
});
$('#sub2').on('click',function()
{
var fetch="open";
var dataString = { 'fetchtype': fetch};
$.ajax(
{
type: 'POST',
url: 'table.php',
datatype: 'jsonp',
data: dataString,
success: function(data)
{
$('#openrec').html(data);
}
});
$("#tab1").off("click");
$("#tname").off("change");
$("#sub2").off("click");
$("#sub3").off("click");
$("#logbutton").off("click");
});
$('#sub3').on('click',function()
{
var fetch="closed";
var dataString = { 'fetchtype': fetch};
$.ajax(
{
type: 'POST',
url: 'table.php',
datatype: 'jsonp',
data: dataString,
success: function(data)
{
$('#closerec').html(data);
}
});
$("#tab1").off("click");
$("#tname").off("change");
$("#sub2").off("click");
$("#sub3").off("click");
$("#logbutton").off("click");
});
$('#logbutton').hover( function()
{
var tname =$('#tname :selected').val();
var mname =$('#tmem :selected').val();
var iname=$('#issuetype :selected').val();
var aname=$('#assigndrop :selected').val();
var teamname =$('#tname :selected').text();
var membername =$('#tmem :selected').text();
var issuename=$('#issuetype :selected').text();
var assignname=$('#assigndrop :selected').text();
var issuedesc=$('#issuedesc').val();
var logdate=$('#logdate').val();
if(tname == '' || mname == '' || iname == '' || aname == '' || issuedesc
== '' || logdate == '')
{
$('#logbutton').removeClass('btn-primary');
$('#logbutton').addClass('btn-danger');
}
else
{
$('#logbutton').removeClass('btn-primary');
$('#logbutton').addClass('btn-success');
}
}, function()
{
var tname =$('#tname :selected').val();
var mname =$('#tmem :selected').val();
var iname=$('#issuetype :selected').val();
var aname=$('#assigndrop :selected').val();
var teamname =$('#tname :selected').text();
var membername =$('#tmem :selected').text();
var issuename=$('#issuetype :selected').text();
var assignname=$('#assigndrop :selected').text();
var issuedesc=$('#issuedesc').val();
var logdate=$('#logdate').val();
if(tname == '' || mname == '' || iname == '' || aname == '' || issuedesc == '' || logdate == '')
{
$('#logbutton').removeClass('btn-danger');
$('#logbutton').addClass('btn-primary');
}
else
{
$('#logbutton').removeClass('btn-success');
$('#logbutton').addClass('btn-primary');
}
});
$('#logbutton').on('click',function()
{
var tname =$('#tname :selected').val();
var mname =$('#tmem :selected').val();
var iname=$('#issuetype :selected').val();
var aname=$('#assigndrop :selected').val();
var teamname =$('#tname :selected').text();
var membername =$('#tmem :selected').text();
var issuename=$('#issuetype :selected').text();
var assignname=$('#assigndrop :selected').text();
var issuedesc=$('#issuedesc').val();
var logdate=$('#logdate').val();
if(tname == '' || mname == '' || iname == '' || aname == '' || issuedesc
== '' || logdate == '')
{
alert(teamname+membername+issuename+assignname+issuedesc+logdate);
//$("#logbutton").off("click");
}
else
{
var dataString = { 'tname': teamname, 'tmem': membername, 'issuetype':
issuename, 'issuedesc': issuedesc, 'assign': assignname, 'logdate':
logdate};
$.ajax(
{
type: 'POST',
url: 'logdata.php',
datatype: 'jsonp',
data: dataString,
success: function(response)
{
alert(response);
//$('#alertmsg').response['message'];
location.reload();
//$('#alertmsg').html(data);
}
});
}
});
});
Below is my index/home php file code..
<div class="col-sm-10">
<ul id="mainpill" class="nav nav-pills nav-justified">
<li id="tab0"><a data-toggle="pill" href="#hometab"><span
class="glyphicon glyphicon-home"></span></a></li>
<li id="tab1"><a data-toggle="pill" href="#issue">IssueTracker</a></li>
<li id="tab2"><a data-toggle="pill" href="#error">ErrorDatabase</a></li>
<li id="tab3"><a data-toggle="pill" href="#leave">LeaveTracker</a></li>
<li id="tab4"><a data-toggle="pill" href="#activity">ActivityTracker</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="hometab" class="tab-pane fade">
<div id="myhome">
</div>
</div>
<div id="issue" class="tab-pane fade">
<h3>IssueTracker</h3>
<div id="content">
</div>
</div>
<div id="error" class="tab-pane fade">
<h3>Error DB</h3>
</div>
<div id="leave" class="tab-pane fade">
<h3>Leave Tracker</h3>
</div>
<div id="activity" class="tab-pane fade">
<h3>Activity Tracker</h3>
</div>
</div
