Question

I have five tabs right now: New Reports, Old Reports, Judges, Users, and Other Settings. When Judges or Users is clicked, there’s a list of users or judges as well as a button that allows you to “Add New User” or “Add New Judge”. When one is clicked, that button becomes invisible and some text boxes appear. After you save (or decide to cancel) your new judge or user, the “Add New” button reappears. This all works quite well aside from the fact that if you click the “Judges” or “Users” tab again, the “Add New Button” will appear again even if you’re in the process of adding a new one. I’m trying to figure out the best way to prevent this from happening.

So far I’ve tried adding $(this).attr(‘disabled’, ‘disabled’); to the click event for Judges and Users, but I don’t think that’s exactly the right approach. Any ideas?

Code:

<div id="tabs" style="width:800px;margin: 0 auto;">
    <ul>

        <li><a href="#tabs-1" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">New Reports</a></li>
        <li><a href="#tabs-2" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">Old Reports</a></li>
        <li><a href="#tabs-3" onClick="$('#newJudgeLink').show(); $('#newUserLink').hide();">Judges</a></li>
        <li><a href="#tabs-4" onClick="$('#newJudgeLink').hide(); $('#newUserLink').show();">Users</a></li>
        <li><a href="#tabs-5" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">Other Settings</a></li>
        </ul>

        <div style="float:right;"><button id="newUserLink" style="display:none;"                    onClick="return false;">Add New User</button></div>
        <div style="float:right;"><button id="newJudgeLink" onClick="return false;" style="display:none;">Add New Judge</button></div>

Answer 1

well first I would recommend binding click events in the traditional Jquery fashion instead of using onClicks embedded in your HTML.

So what you could do is show() your save button when the tab is clicked, hide it if itself is clicked, and show it when the save/submit/cancel (i dont see them up there) button is clicked like so:

$("a[href$=#tabs]").click(function(){
     $("a[href$=#tabs]").removeClass("active");
     $(this).addClass("active");
     if ($(this).attr("href") == "#tabs-3" && !($(this).hasClass("active"))){
           $('#newJudgeLink').show();
           $('#newUserLink').hide();
     }
     else if ($(this).attr("href") == "#tabs-4" && !($(this).hasClass("active"))){
           $('#newUserLink').show();
           $('#newJudgeLink').hide();
     }
     else{
           $('#newJudgeLink').hide();
           $('#newUserLink').hide();
     }
});

$("#yourSaveButton,#yourCancelButton").click(function(){
        if ($("a.active").attr("href") == "#tabs-3"){
           $('#newJudgeLink').show();
           $('#newUserLink').hide();
        }
        else{
           $('#newUserLink').show();
           $('#newJudgeLink').hide();
        }
});