We Keep Coding

Button click event being fired automatically during TextBoxFor Enter key press

The issue I am facing now is a button click event is automatically being fired when enter key is pressed in Html.TextBoxFor(). I am having a main view. In this view there are 3 buttons. On each of 2 button click a partial view is opened and during 3rd button click, a new view is opened. Please see the code below :
<script>
$(document).ready(function () {
SetUpDatePickers();
});
$('#button1').click(function (event) {
$('#divdefinetraj').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
GetTrajectories();
});
$('#button2').click(function (event) {
$('#divRequestTT').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
});
$('#button3').click(function (event) {
window.location.href = '/UserManagement/UsersList/';
event.preventDefault();
});
</script>
I clicked button1 and the first partial view is opened :
The partial view has below code :
#Html.TextBoxFor(u => u.TrajName, new { #class = "txtboxclass", #id = "TrajName" })
My issue is when I press "Enter" key inside this text box, the code for button1 in main view is being executed :
$('#button1').click(function (event) {
$('#divdefinetraj').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
GetTrajectories();
});
This results in all the buttons being hidden and the view becomes useless unless user reloads the view forcefully.
I tried to handle the onchange() event of the textboxfor and redirected to below function, but it doesn't handle.
function EnterKeyFilter() {
if (window.event.keyCode == 13) {
event.returnValue = false;
event.cancel = true;
}
}
Even I tried the same function for div - click() .. It doesn't work.
When I press the enter key the exact button1 click is being handled with this information event = j…y.Event {originalEvent: MouseEvent, type: "click", timeStamp: 7055.025000000001, jQuery110208686809991100928: true, toElement: button#button1.
But I am not clicking it either. The partial view is not part of a form also and form submission is not the issue. I am new to ASP.NET MVC and confused with this strange behavior. Please help. Thanks in advance.

If you want to disable your press enter in your keyboard, try this:
$(function () {
//On your document ready function, add this:
$('html').bind('keypress', function (e) {
if (e.keyCode == 13) {
return false;
}
});
}

Try to keep all three buttons in different form tags and made them submit button.
So in this case, whenever you hit enter in a form input, respective button will be clicked. To prevent full page postback, use e.preventDefault() in button click event.
HTML:
<form id="frm1">
-------------
-------------
<input id="btnSubmit" type="submit" value="submit" />
</form>
jQuery
$("#btnSubmit").click(function(e){
e.preventDefault();
-- rest of code
});

appear submit button web controls after 5 min using C# /JS

I am developing an application where I want a submit button to appear after 5 min.
Into my Login page we crosscheck the userid password then send OTP, if user can't get OTP then we want to make appear after 5-10 min a new submit button(Generate OTP).

You can use setTimeout() function available in javascript.
Or
you can use ASP.NET Timer Control
JavaScript Example:
<script type="text/javascript">
function showButton()
{
document.getElementById("btnSubmit").style.visibility = "visible";
}
function hideButton()
{
document.getElementById("btnSubmit").style.visibility = "hidden";
}
window.onload = function()
{
hideButton();
setTimeout('showButton()', 1000);
}
</script>

disable browser back button javascript

I am using MVC 4 with java script.
Today's i have a requirement to disable to back button in all browsers, need to prevent to go-back to previous page(home page) after click on log-out button with the help of back button of browsers.
Help Me thanks.

Try this
JavaScript Code Sample
javascript code to all the pages where we need to disable the browser back button.
<script type="text/javascript">
//Disable Back Button In All Browsers.
function DisableBackButtonAllBrowsers() {
window.history.forward()
};
DisableBackButtonAllBrowsers();
window.onload = DisableBackButtonAllBrowsers;
window.onpageshow = function (evts) { if (evts.persisted) DisableBackButtonAllBrowsers(); };
window.onunload = function () { void (0) };
</script>
ActionResult code sample in mvc 4
Code for response to ActionResult for log-out in MVC 4. i.e.
/// <summary> /// Logs user out and renders login <see cref="View"/> /// </summary> /// <returns>Login <see cref="View"/></returns>
public ActionResult Logout()
{
//Disable back button In all browsers.
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1));
Response.Cache.SetNoStore();
FormsAuthentication.SignOut();
return View("Login");
}

Try this, may it will help you.
Link: http://hightechnology.in/how-to-disable-browser-back-button-in-asp-net-using-javascript/
Javascript Code:
<script type = "text/javascript" >
function preventBack(){window.history.forward();}
setTimeout("preventBack()", 0);
window.onunload=function(){null};
</script>

You can use as below :
<script type="text/javascript" language="javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function() { void (0) }
</script>

Possible duplicate..
there is a solution mentioned befor here:
set cachebality to noCache..
Page.Response.Cache.SetCacheability(HttpCacheability.NoCache)
Disable browser "back" button
Disable browser's back button

Ideally you want to prevent your session history from getting populated in the first place.
location.replace(url)
From: https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
The Location.replace() method replaces the current resource with the one at the provided URL. After using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.
If the session history is empty, the back button is disabled. If your app depends heavily on form submission, jQuery makes it easy to convert form variables to a query string for use with location.replace.
function submitForm() {
// this eliminates issues with the back button
window.location.replace('?' + jQuery.param(jQuery('form').serializeArray()));
}

Alertify in a asp.net c# page

sorry if my english is poor.
I've a question, i think that the problem is my poor knowledge of javascript but.. i know that you can help me about this.
i've a page with an imagebutton, i use this for delete data and i need a confirmation dialog box. Alertify is pretty, i use altertify alert in server side like this:
string myScript2 = "alertify.error('message.')";
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(),
Guid.NewGuid().ToString(), myScript2, true);
return;
and work fine!
but i don't understand how to use alertify.confirm.
for example i've used
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../js/alertify.min.js"></script>
<!-- include the core styles -->
<link rel="stylesheet" href="../../js/alertify.core.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="../../js/alertify.default.css" />
<script type="text/javascript">
$("#btElimina").on('click', function () {
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
</script>
but nothing to do...i can't use onclientclick because alertify is a non-blocking instead a modal windows...
can you help me to understand? not to write code for me, but, to understand and make me viable
thank you
Henry

Replace alertify.success("You've clicked OK"); with return true;
and alertify.error("You've clicked Cancel"); with return false;
Also change this:
$("#btElimina").on('click', function () {
to this:
$("#<%=btElimina.ClientID%>").on('click', return function () {

I used this and it is working:
My button is :
<asp:ImageButton ToolTip="Çıkış" ID="ImageButton1" ImageUrl="Image/Exit.png" runat="server" OnClick="btnLogout_Click" />
My script is:
<script type="text/javascript">
$("#ImageButton1").on('click', function () {
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
__doPostBack("<%=ImageButton1.UniqueID%>", "");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
</script>
Here when i clicked "cancel" button returns false and doing nothing but when you clicked ok button i am doing postback for related button and you can write your own code in server side
protected void btnLogout_Click(object sender, EventArgs e)
{
Session.RemoveAll();
Response.Redirect("~/Login.aspx");
...
}

I can't comment on the last comment below as I don't have 50 reputation, so I'm posting an answer simply to elaborate on Ratna's answer.
As per Ratna's answer, you should use server tags to refer to ASP.Net controls (controls with runat="server") to ensure that you get the control regardless of what ASP.Net renames the control to.
So to reiterate Ratna's answer:
Instead of
$('#btElimina').on(..
use
$('#<%= btElimina.ClientID %>').on(..
to make sure that you get the correct clientside control id in your jQuery script.

jquery alertbox is getting disabled automatically

I have written the code on
ascx script:
<script src="JScripts/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script>
<script>
$(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
</script>
and on
Code behind:
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
the problem is alert box is automatically getting disabled after some time when page load fully
What could be the reason that the alert box is being disable after clicking on OK button and how to call the callAlert function in proper way.

If you are using Master page or pages then you won't get the Client Id of the button as you are declared it should be declared as $('#<%=ImageButton1.ClientID%>') or $('[id$=ImageButton1]') hope it will solve you problem.
$(document).ready(function(){
$('#<%=ImageButton1.ClientID%>').click(function() {
alert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});

You can try to put the following line before the function
$(document).ready(function() {
This will make it:
$(document).ready(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
});
If you wait till the page is ready, the alert box won't be overwritten (I hope x)).
Also when you check that text box, check if the condition is false, then give the alert.
Is the condition not false? Build in a check to check if the condition is really true. If so? Redirect.
EDIT:
var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
//redirect
else
return

OK, so first it's important to understand that $(function(){... and $(document).ready(function() {... are equivalent, and nothing inside either will execute until the page is fully loaded. In other words, there's no need to use
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
That can be removed. Also, I see that you're probably using web forms. Be mindful that the Id attribute that will be rendered is not equal to the Id of the control attribute. In other words, if you have a runat="server" control with an Id of ImageButton1, using the syntax $('#ImageButton1') in your jQuery won't work.
Taking this into account, I've added an example below that uses selectors based on class attributes.
<script type="text/javascript">
$(function () {
$('.ImageButton1').click(function (e) {
var text = $('.TextBox1').val();
var redirect = true;
if (!text) {
redirect = confirm('Empty...are you sure?');
}
if (redirect) {
window.location.href = 'http://your-redirect-here.com';
}
});
});
</script>
<input class="TextBox1" type="text" />
<input class="ImageButton1" type="button" value="Click" />
That should get you where you want to go. Let me know if you have any questions.

var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
{
//redirect
} else
{
return false;
}

Put this after jAlert Box:
return false;
And call the function like this:
return callAlert();