Hi, I am getting trouble with this,my problem is that I have a div as a container,and a tabs compose of two li’s ,every time i click Tab A the data will be request to the server via jQuery.ajax and then the requested data will be loaded to the container div,and if i click the Tab B the data also will be requested to the server via jQuery.Ajax and will be loaded to the container div…each Tab A and Tab B has dialog box if ever i click the edit button and then i already clicked the Tab B,the dialog of the Tab B will show as animated. And if i click to Tab A and then click again the edit button the dialog box of Tab A will show as animated.but my problem is that the two dialog will show every time i click the button edit.but i already changing the id of my edit button everytime i click each of this Tab.
$(function () {
$('#TabA').click(function () {
$('#Bedit').attr('id','edit'); changing the id of the edit button
$.ajax({
type:"POST",
url:"to other page.php",
data:some parameter here //
success:function (item) {
//data loaded to the container div here.
});
}
});
});
});
$('#TabB').click(function () {
$('#edit').attr('id','Bedit'); changing the id of the edit button
$.ajax({
type:"POST",
url:"to other page.php",
data:some parameter here //
success:function (item) {
//data loaded to the container div here.
});
}
});
});
});
<div id="tabA" ></div>
<div id="tabAbox" >
<div class="outerlabel">
<label>Edit tab A</label>
</div>
</div>
<div id="tabB" ></div>
<div id="tabBbox" >
<div class="outerlabel">
<label>Edit tab B</label>
</div>
</div>
$(function(){
$('#Bedit').click(function(e){
e.preventDefault();
$('#tabB').fadeIn(200);
$('#tabBbox').animate({
top:'5px',
left:'250px'
}, 500);
});
});
$(function(){
$('#edit').click(function(e){
e.preventDefault();
$('#tabA').fadeIn(200);
$('#tabAbox').animate({
top:'5px',
left:'250px'
}, 500);
});
});
