Alessandro Siverino Alessandro Siverino - 6 months ago 147
jQuery Question

Bootstrap modal's button ASP.NET C#

I have a problem with my site

I have this modal:

<div class="modal fade " id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content login-modal">
<div class="modal-header login-modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title text-center" id="loginModalLabel">Autenticazione utente</h4>
</div>
<div class="modal-body">
<div class="text-center">
<div class="form-group">
<asp:Panel ID="pError" Visible="false" runat="server">
<div class="alert alert-dismissable alert-danger" id="confirm" runat="server">
<asp:Label ID="lblError" runat="server"> </asp:Label>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div>
</asp:Panel>
</div>
<div role="tabpanel" id="pnl" class="login-tab">
<!-- SCHEDE -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a id="signin-taba" href="#home" aria-controls="home" role="tab" data-toggle="tab">Accedi</a></li>
<li role="presentation"><a id="signup-taba" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Registrati</a></li>
<li role="presentation"><a id="forgetpass-taba" href="#forget_password" aria-controls="forget_password" role="tab" data-toggle="tab">Recupero</a></li>
</ul>

<!-- LOGIN -->


<div class="tab-content">
<div role="tabpanel" class="tab-pane active text-center" id="home">

<div class="clearfix"></div>
<%-- email --%>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<asp:TextBox ID="txtLoginEmail" CssClass="form-control" placeholder="Email" runat="server"></asp:TextBox>

</div>
<asp:RequiredFieldValidator ID="vLoginEmail" runat="server" Display="dynamic" ControlToValidate="txtLoginEmail" ForeColor="Red" ValidationGroup="validator" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="reLoginEmail" runat="server" ValidationGroup="validator" ControlToValidate="txtLoginEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<asp:TextBox type="password" ID="txtLoginPassword" class="form-control" placeholder="Password" runat="server"></asp:TextBox>
</div>
</div>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" CssClass="btn btn-danger" data-loading-text="Signing In...." ValidationGroup="validator" runat="server" Text="Accedi"></asp:Button>
<input id="resetLogin" class="btn btn-danger" runat="server" type="reset" value="reset" />

<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8">
<i class="fa fa-lock"></i>
<a href="javascript:;" class="forgetpass-tab">Recupero </a>

</div>

<div class="col-xs-4 col-sm-4 col-md-4">
<i class="fa fa-check"></i>
<a href="javascript:;" class="signup-tab">Registrati </a>
</div>
</div>
</div>

</div>
<%-- REGISTRAZIONE --%>
<div role="tabpanel" class="tab-pane" id="profile">

<div class="clearfix"></div>
<div class="form-group">
<div class="input-group">

<label class="radio-inline">
<asp:RadioButton ID="rbUtente" GroupName="rbTipologia" Checked="true" runat="server" />Utente</label>

<label class="radio-inline">
<asp:RadioButton ID="rbRistoratore" GroupName="rbTipologia" runat="server" />Ristoratore</label>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>

<%-- username --%>
<asp:TextBox class="form-control" ID="txtNome" placeholder="Nome" runat="server"></asp:TextBox>
</div>
<asp:RequiredFieldValidator ID="vtxtNome" runat="server" Display="dynamic" ControlToValidate="txtNome" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Nome obbligatorio"></asp:RequiredFieldValidator>

</div>
<%-- cognome --%>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<asp:TextBox class="form-control" ID="txtCognome" placeholder="Cognome" runat="server"></asp:TextBox>
</div>
<asp:RequiredFieldValidator ID="vCognome" runat="server" Display="dynamic" ControlToValidate="txtCognome" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Cognome obbligatorio"></asp:RequiredFieldValidator>

</div>
<%-- email --%>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<asp:TextBox class="form-control" ID="txtEmail" placeholder="Email" runat="server"></asp:TextBox>

</div>
<asp:RequiredFieldValidator ID="vEmail" runat="server" Display="dynamic" ControlToValidate="txtEmail" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="reEmail" runat="server" ValidationGroup="validator2" ControlToValidate="txtEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</div>
<%-- password --%>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<asp:TextBox type="password" class="form-control" ID="txtPassword" placeholder="Password" runat="server"></asp:TextBox>

</div>
<asp:RequiredFieldValidator ID="vPassword" runat="server" Display="dynamic" ControlToValidate="txtPassword" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Password obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rePassword" runat="server" ValidationGroup="validator2" ControlToValidate="txtPassword" Display="Dynamic" ForeColor="red" ErrorMessage="La password deve contenere: minimo 8 caratteri; almeno 1 maiuscola; almeno 1 minuscola; almeno 1 numero" SetFocusOnError="True" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,15}$"></asp:RegularExpressionValidator>

</div>

<%-- password controllo --%>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<asp:TextBox type="password" class="form-control" ID="txtCPassword" placeholder="Conferma password" runat="server"></asp:TextBox>
</div>
<asp:CompareValidator ID="cvPassword" ValidationGroup="validator2" Display="Dynamic" runat="server" ForeColor="Red" ControlToCompare="txtPassword" ControlToValidate="txtCPassword" ErrorMessage="La password non corrisponde"></asp:CompareValidator>
<asp:Label ID="lblRegistrazione" Visible="false" runat="server" ></asp:Label>
</div>




<asp:Button ID="btnSignin" CssClass="btn btn-danger " data-loading-text="Registrando...." OnClick="btnSignin_Click" ValidationGroup="validator2" runat="server" Text="Registrati"></asp:Button>
<input id="r2" class="btn btn-danger" runat="server" type="reset" value="reset" />


<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8">
<i class="fa fa-lock"></i>
<a href="javascript:;" class="forgetpass-tab">Password dimenticata? </a>

</div>

<div class="col-xs-4 col-sm-4 col-md-4">
<i class="fa fa-check"></i>
<a href="javascript:;" class="signin-tab">Registrati</a>
</div>
</div>
</div>

</div>


<div role="tabpanel" class="tab-pane text-center" id="forget_password">
&nbsp;&nbsp;
<div class="clearfix"></div>
<%--RECUPERO --%>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<asp:TextBox class="form-control" ID="txtRecEmail" placeholder="Email" runat="server"></asp:TextBox>


</div>
<asp:Label ID="lblRecovery" runat="server" ></asp:Label>
<asp:RequiredFieldValidator ID="vREmail" runat="server" Display="dynamic" ControlToValidate="txtRecEmail" ForeColor="Red" ValidationGroup="validator3" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="reREmail" runat="server" ValidationGroup="validator3" ControlToValidate="txtRecEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

</div>

<asp:Button ID="btnRecovery" OnClick="btnRecovery_Click" CssClass="btn btn-danger reco" data-loading-text="Invio...." ValidationGroup="validator3" runat="server"></asp:Button>
<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-lock"></i>
<a href="javascript:;" class="signin-tab">Registrazione </a>

</div>

<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-check"></i>
<a href="javascript:;" class="signup-tab">Accesso </a>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>


It has 3 tabs: Signin (LOGIN), Signup (Registrazione) and forgot password (RECUPERO).

It is a bit 'difficult to explain but I'll try:
In the 3 cards I have 3 buttons.
If I am in my third card and I press enter key, the computer triggers the onclick event of the button that is located on the first tab.

I tried this jquery code but it doesn't work:
$(document).keypress(function (event) {

var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
if ($('#home').is(":visible")) {

$("#btnLogin").trigger("click");
}
else if ($('#profile').is(":visible")) {
$("#btnSignin").trigger("click");

}
else {
$('#btnRecovery').click(ShowPopUp);

}

}

}
);


Do you have any solution?

P.S.
If I use the browser's console the javascript code work, but when i try it on my project it doesn't work...

Please help me... this is my exam's project...

Answer
  1. Create a local variable(in the jQuery load function) called currentTab
  2. Create a click event for your tabs(<li> tags)
  3. In the click event set the currentTab variable to the clicked <li>
  4. Modify your keypress function to evaluate the currentTab variable and trigger the relevant click event

    var currentTab = "";
    
    $(".nav li").click(function () {
    
        var li = $(this);
        var liText = li.text();
        currentTab = liText;
        alert('You clicked on "' + liText + '" now lets store this value in a variable called currentTab');
    });
    
    $(document).keypress(function (event) {
    
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
    
            switch (currentTab) {
                case "Accedi":
                    $("#btnLogin").trigger("click");
                    break;
                case "Registrati":
                    $("#btnSignin").trigger("click");
                    break;
                case "Recupero":
                    $("#btnRecovery").trigger("click");
                    break;
            }
        }
    });
    

Please remember to mark as answered if my answer helped you

Comments