I Have a Code like
TextBox
<input id="myinput" type="text" runat="server" />
Button
<asp:Button runat="server" ID="btnsave" Text="SAVE" OnClick="btnsave_Click" OnClientClick="save();" class="button button2" style="display:none;" />
i want to generate btnsave_Click Event when click on Shift Button on keyBoard, Is this Possible??
I don't know if you want to trigger the Save on shift click everywhere or just inside the TextBox. So here are both.
Entire page
<script type="text/javascript">
$(document).keydown(function (e) {
if (e.keyCode == 16) {
$("#<%= btnsave.ClientID %>").click();
}
});
</script>
Or just inside a TextBox
<script type="text/javascript">
$('body input[type=text]').keydown(function (e) {
if (e.keyCode == 16) {
$("#<%= btnsave.ClientID %>").click();
}
});
</script>
Related
I have web application under which I am using update panel of some part of website. Update panel working properly but problem is there is jquery which is not working when I use update panel. First my jquery was inside update panel. It didn't worked so I tried to put it outside updatepanel But that too didn't worked. Is there additional things required to make it work if updatepanel used. Following is my code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<input id="decrement" type ="button" value="-" class="add-sub-button" />
<asp:TextBox ID="quantity" ClientIDMode="Static" Text="1" CssClass="quantity" runat="server"></asp:TextBox>
<input id="increment" type ="button" value="+" class="add-sub-button" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="medicinesList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
$("#increment").click(function () {
if ($('#quantity').val() != "90") {
var $n = $("#quantity");
$n.val(Number($n.val()) + 1);
}
});
$("#decrement").click(function () {
if ($('#quantity').val() != "1") {
var $n = $("#quantity");
$n.val(Number($n.val()) - 1);
}
});
});
</script>
use your java script like
<script type="text/javascript">
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
function EndRequestHandler(sender, args) {
$("#increment").click(function () {
if ($('#quantity').val() != "90") {
var $n = $("#quantity");
$n.val(Number($n.val()) + 1);
}
});
$("#decrement").click(function () {
if ($('#quantity').val() != "1") {
var $n = $("#quantity");
$n.val(Number($n.val()) - 1);
}
});
}
});
</script>
Any events directly bound to DOM elements inside the UpdatePanel are lost on post backs. You will therefore need to use Delegated Events to ensure the desired behaviour is preserved.
This is done by binding the events to a container outside of the UpdatePanel and specifying a selector paremeter (representing the actual target) using the jQuery on() method instead of click().
selector - A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
<div id="myPanel">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<input id="decrement" type="button" value="-" class="add-sub-button" />
<asp:TextBox ID="quantity" ClientIDMode="Static" Text="1" CssClass="quantity" runat="server"></asp:TextBox>
<input id="increment" type="button" value="+" class="add-sub-button" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="medicinesList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#myPanel").on("click", "#increment", function() {
if ($("#quantity").val() != "90") {
var $n = $("#quantity");
$n.val(Number($n.val()) + 1);
}
});
$("#myPanel").on("click", "#decrement", function() {
if ($("#quantity").val() != "1") {
var $n = $("#quantity");
$n.val(Number($n.val()) - 1);
}
});
});
</script>
I have following script to prevent a button from submitting twice by double clicking. It works fine.
But the scenario gets clumsy when I added a Required Field validator. If I try to submit with a blank value in textbox, the validator fires. But when I entered value in textbox and try to submit again it does not do a postback.
I understand the reason, in the first button click itself, the variable isActionInProgress is set as 'Yes' irrespective of the validation error.
What is the best way to overcome this challenge?
MARK UP
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var isActionInProgress = 'No';
$('.myButton').click(function (e) {
if (isActionInProgress == 'No') {
isActionInProgress = 'Yes';
}
else {
e.preventDefault();
//alert('STOP');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
<asp:Button ID="Button1" CssClass="myButton" runat="server" Text="Submit" ValidationGroup="ButtonClick"
OnClick="Button1_Click" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtEmpName"
runat="server" ErrorMessage="RequiredFieldValidator" ValidationGroup="ButtonClick" Text="*"></asp:RequiredFieldValidator>
</div>
</form>
</body>
REFERENCES
Page_ClientValidate is validating multiple times.
Hide redundant error message in ASP.Net ValidationSummary
MSDN - ASP.NET Validation in Depth
I think somthin like this:
$('.myButton').click(function (e) {
if(Page_IsValid){
if (isActionInProgress == 'No') {
isActionInProgress = 'Yes';
}
else {
e.preventDefault();
//alert('STOP');
}
}
});
how to fire click event for the textbox which is put under the gridview in item template in asp.net?
It is the same as making a clickevent outside a gridview. im using jqueryto do this
<asp:textbox id="textbox1" ontextchanged="textbox1_textchange">
<asp:linkbutton runat="server" id="hiddenbtn" onclick="textbox_click"/></asp:textbox>
<script>
$(document).ready(function() {
$("#textbox1").click(function () {
$('#hiddenbtn').trigger('click');
});
});
</script>
I'm new to jQuery and I want to do this simple thing in a ASP.Net application:
I have a button in the the form and which when clicked I want to execute some server side code. BUT I want the user confirmation first, given through a jQuery modal dialog.
Which of the following approaches is correct:
1) Put the ASP.Net button (server control who's OnClick is linked to the server side event) in the form and use jQuery to open the dialog when clicked:
<script ...>
$(document).ready(function ()
{
$("#ConfirmDialog").dialog(
{
autoOpen: false,
modal: true,
buttons: {
'Yes': function () { return true; },
'No': function () { return false; }
}
});
$("#<%= SubmitButton.ClientID %>").click(function (event) {
event.preventDefault();
$("#ConfirmDialog").dialog('open');
});
});
</script>
...
<div id="ConfirmDialog"></div>
...
<asp:Button ID="SubmitButton" runat="server"
Text="Submit" OnClick="Submit_Click" />
2) Put the ASP.Net Button (server control) in the div used as the confirmation dialog and put a HTML button (non server control) in the form for the user to click.
<script ...>
$(document).ready(function ()
{
$("#ConfirmDialog").dialog(
{
autoOpen: false,
modal: true
});
$("#SubmitButton").click(function (event) {
$("#ConfirmDialog").dialog('open');
});
});
</script>
...
<div id="ConfirmDialog">
<asp:Button ID="SubmitButton" runat="server"
Text="Yes" OnClick="Submit_Click" />
...
</div>
...
<input id="SubmitButton" type="button" value="Submit" />
I'm going with the first approach but can't make it work, is it ok to do event.PreventDefault() and then just return true; in the Yes button?
The 2nd approach is more correct. If you think about it, you want to use server-side controls when you want some interaction with the server. In this case, you don't want to interact with the server, but put up a client-side modal dialog, which requires zero interaction with the server to accomplish.
I'd use the following (untested):
<script ...>
$(document).ready(function ()
{
$("#ConfirmDialog").dialog(
{
autoOpen: false,
modal: true
});
$("#SubmitButtonClient").click(function (event) {
$("#ConfirmDialog").dialog('open');
});
});
</script>
...
<div id="ConfirmDialog">
<asp:Button ID="SubmitButton" runat="server"
Text="Yes" OnClick="Submit_Click" />
...
</div>
...
<input id="SubmitButtonClient" type="button" value="Submit" />
All I changed was the id of the client-side submit button. In this approach, you don't need to do event.PreventDefault(). Note that I haven't tested the above code.
However, since jQuery is very AJAX-oriented, you generally don't want to do a server postback to accomplish your "button press", but use an AJAX post. This will prevent the entire page from reloading, and you can adjust your page as needed. See the ajax() method in jQuery for some examples. You'll notice that in ASP.NET MVC you don't see nearly as many server-side controls, but a richer integration with jQuery. This is the general direction Microsoft is headed - fewer server controls and more AJAX-level integration.
my question is really simple. I have a asp.net button. I can use it to call the simpleModal and have a dialog displayed. Now, I added a label control in the dialog, and would like this label to display some value. What should I do?
Here is my codes
$('#<%= btnOpen.ClientID %>').click(function(e) {
e.preventDefault();
$('#content').modal({
onOpen: function(dialog) {
dialog.overlay.fadeIn('slow', function() {
dialog.data.hide();
dialog.container.fadeIn('slow', function() {
dialog.data.slideDown('slow');
});
});
},
onClose: function(dialog) {
dialog.data.fadeOut('slow', function() {
dialog.container.slideUp('slow', function() {
dialog.overlay.fadeOut('slow', function() {
$.modal.close(); // must call this!
});
});
});
}
});
e.preventDefault();
// return false;
});
<asp:Button ID="btnOpen" runat="server" Text="ASP.NET Open"/>
<div id="content" style="display: none;">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
I assume since you said that your question is simple that you just have an unfamiliarity with jQuery. You can put this in your click function, or in the $(document).ready function, depending on your full requirements:
var yourValue = ; // put your function or value here
$('#Label1').text(yourValue);
Note: You'll need to use .html instead of .text if you have a string with tags, but .text is faster.
Lol, I am answering my own question again, but I will give credit to mNVhr tho.
I finally get the whole thing work. The trick for asp.net button to fire a postback, along with javascript's postback, is to put the asp.net button into an update panel. Here is the code I have
For the javascript part:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.simplemodal-1.3.5.js" type="text/javascript"></script>
<script type="text/javascript">
function myOpen() {
$('#content').modal({
onOpen: function(dialog) {
dialog.overlay.fadeIn('slow', function() {
dialog.data.hide();
dialog.container.fadeIn('slow', function() {
dialog.data.slideDown('slow');
});
});
},
onClose: function(dialog) {
dialog.data.fadeOut('slow', function() {
dialog.container.slideUp('slow', function() {
dialog.overlay.fadeOut('slow', function() {
$.modal.close();
});
});
});
}
});
}
function myClose() {
$.modal.close();
}
</script>
For the HTML markup
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnOpen" runat="server" Text="Open" OnClick="btnOpen_Click" OnClientClick="myOpen();" />
</ContentTemplate>
</asp:UpdatePanel>
<div id='content' style="display: none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
<input id="Button2" type="button" value="Close" onclick="myClose();" />
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
For the code behind:
protected void Page_Load(object sender, EventArgs e)
{
}
private void CloseDialog()
{
string script = string.Format(#"myClose()");
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}
protected void btnSave_Click(object sender, EventArgs e)
{
if (TextBox1.Text == "1")
CloseDialog();
else
Label2.Text = TextBox1.Text;
}
protected void btnOpen_Click(object sender, EventArgs e)
{
TextBox1.Text = DateTime.Now.ToString();
UpdatePanel1.Update();
}
I hope this tiny code can help those asp.net developer who want to use the nice jQuery in their projects.
As you can see, from the above codes.
When I click on the btnOpen button, two postbacks fired. One is from the asp.net code behind, which assign current datetime to the textbox control inside the modal dialog. The second postback is from the javascript, which open the modal dialog. The asp.net button has to be inside the update panel. Otherwise, the modal dialog will only stay for about 0.5 second.
When I click on the btnSave inside the modal dialog. Postback also occurred. I have a little logic here. When the textbox's value is 1, I call the closeDialog() function. When the value is other numbers, the modal dialog stay opening, and the label control inside the dialog will display the number from the text box.
jQuery is nice, but as a .Net developer, it is just new, and sometimes difficult for me to understand it, especially for the conflict of postbacks between javascript and .net.
I hope this answer is helpful.