I had a page with many FileUploads and I am having a problem with jQuery to fire up 2 .click events to remove files at the certain point when a RadioBoxList .click(is selected) event, two buttons calling same function as delete_Click on code behind..
My code as following :
<asp:Button ID="delBtn1" runat="server" Text="DeleteFile" OnClick="delete_Click" ClientIDMode="Static" />
<asp:Button ID="delBtn2" runat="server" Text="DeleteFile" OnClick="delete_Click" ClientIDMode="Static" />
$("#rblist").click(function() {
if ($("#rbl_1").prop("checked")) {
$(".someclass").hide();
uploadCheck1();
uploadCheck2();
$("delBtn1").click();
$('delBtn2').click();
}
});
first click never fired, wondering where is the problem? I am new to jQuery and hoping someone can point out my mistake,thank you!
You need ClientID to get ASP.NET controls with jQuery:
$('#<%= rblist.ClientID %>').click(function() {
if ($('#<%= rbl_1.ClientID %>').prop("checked")) {
$(".someclass").hide();
uploadCheck1();
uploadCheck2();
$('#<%= delBtn1.ClientID %>').click();
$('#<%= delBtn2.ClientID %>').click();
}
});
Use the dblclick event
$(document).ready(function(){
$("p").dblclick(function(){
alert("The the page.");
});
});
you are selecting the button control with id so you need to specify the Jquery id selector(#)
try below code
$("#rblist").click(function() {
if ($("#rbl_1").prop("checked")) {
$(".someclass").hide();
uploadCheck1();
uploadCheck2();
$("#delBtn1").click(); //change here
$('#delBtn2').click();//change here
}
});
Related
I have the following ItemTemplate in my GridView:
<ItemTemplate>
<asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnClientClick="myfunction(); return false;" OnCommand="btnShow_Command" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' />
</ItemTemplate>
For the ItemTemplate I have a button which opens a popup window when clicked by using the following JQuery:
$(document).ready(function () {
$(".btnSearch").click(function (e) {
e.preventDefault();
//centering with css
centerPopup();
//load popup
loadPopup();
});
});
function myfunction() {
}
my Command code-behind:
protected void btnShow_Command(object sender, CommandEventArgs e)
{
int index = 0;
if (e.CommandName == "ViewAll")
{
index = Convert.ToInt32(e.CommandArgument);
DataTable cacheTable = HttpContext.Current.Cache["ResultsTable"] as DataTable;
string column = cacheTable.Rows[index].Field<string>("Guideline");
string test = BookingResults.Rows[index].Cells[7].Text;
string html = HttpUtility.HtmlDecode(column);
ResultsDiv.InnerHtml = html;
//tbGL.Text = html;
//upData.Update();
//MessageBox.Show(index.ToString());
}
}
I added the OnClientClick="myfunction(); return false;" because it was doing a postback each time I clicked. If I have multiple rows, it only works the first time I click but any time after, the popup is not displayed when another or the same button is clicked.
How do I resolve it so no matter which button is clicked the popup is displayed without doing a postback?
Actually you have not showed up the implementation of your method myfunction(), in case the myfunction() method have any syntactical error then the OnClientClick event will be void and it will post-back/submit the form to the server.
Try to remove the call from OnClientClick and just implement your logic at jquery on click event by using class selector as follows
$(document).ready(function () {
$(".btnSearch").click(function (e) {
e.preventDefault();
alert($(this).val() + " Clicked"); // you can put your method mymethod() here
// you can put youe popup logic here
return false;
});
});
You can also see this example of js fiddle
Put it out on the tag or <%: Html.BeginForm %> tag
OnClientClick="return myfunction();
function myfunction(){
// you can put youe popup logic here
return false;
}
Using like this your button never do post back.
I was working on ASP.NET Gridview row delete, it was working fine.but when I tried to add popup delete confirmation, some problem came.
my delete button tag is:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server" CssClass="CoolButtons" Text="Delete" CommandName="Delete" OnClick="btnEdit_Click" CommandArgument='<%# Container.DataItemIndex%>'/>
</ItemTemplate>
</asp:TemplateField>
Now,I hv added some script for popup.NOTE: I hv used hidden field to use the value for server side delete event.
//***** 'Yes' button Click on Popup *****
$("#btnYes").click(function (e) {
HideDialog();
e.preventDefault();
});
//***** 'No' Button click on Popup *****
$("#btnNo").click(function (e) {
$('input[id="hdnConfirmDelete"]').val("no");
HideDialog();
e.preventDefault();
});
//***** 'Delete' Button click on server ****
$('input[value="Delete"]').click(function (e) {
ShowDialog(true);
e.preventDefault();
});
//**** Function to Open Dialog ***
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
//**** Function to Close Dialog ****
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
Now the problem is the I m not able to trigger the OnClick="btnEdit_Click", I know its server side. Is there any way so that I can trigger the OnClick event of delete button when I click the "Yes" button on delete confirm dialog?
NOTE: The dialog is made of simple HTML tags.
When you write e.preventDefault() it prevents the button from it's original working means server side code execution.
so use this
$("#btnYes").click(function (e) {
HideDialog();
});
Remove the e.preventDefault();
Here is a link from where you can better understand
http://api.jquery.com/event.preventDefault/
Edit 1:-
use this
$("#btnYes").click(function (e) {
$('input[id="hdnConfirmDelete"]').val("yes");
HideDialog();
});
I want to stop the IsPostBack fired from the enter key pressed at a TextBox. The textBox can not be multiline.
I'm trying this:
<asp:TextBox ID="kemetTextBox" runat="server" Width="215px">
</asp:TextBox>
<script type="text/javascript">
$(document).ready(function () {
$("#kemetTextBox").keyup(function (e) {
if (e.keyCode == 13) {
Search();
return false;
}
});
});
</script>
But it stills reloading the page.
Data: Visual Studio 2010, Asp.net, C# as codebehind.
Thanks
Just set the AutoPostBack="False" like this:
<asp:TextBox ID="kemetTextBox" runat="server" Width="215px" AutoPostBack="False">
TextBox.AutoPostBack Property
Use the AutoPostBack property to specify whether an automatic postback
to the server will occur when the TextBox control loses focus.
Pressing the ENTER or the TAB key while in the TextBox control is the
most common way to change focus.
Adding to this you can do this too:
<asp:TextBox ID="kemetTextBox" runat="server" Width="215px" onkeydown="return (event.keyCode!=13);">
Source: Disable Enter key in TextBox to avoid postback in ASP.Net
Instead of KeyUp, use keyDown
<script type="text/javascript">
$(document).ready(function () {
$("#kemetTextBox").keydown(function (e) {
if (e.keyCode == 13) {
Search();
e.preventDefault();
return false;
}
});
});
</script>
i have a form and a button a form:
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="SubmitData" />
i have a method in my c# program. the method is called SubmitData
however i would also like to run a javascript function on this button click as well. how do i do this?
here is my javascript function:
var selectedLanguages = new Array();
jQuery('#lstProblems option:selected').each(function() {
selectedLanguages.push(jQuery(this).val());
});
i got it from here: jquery listbox return what user selected
how do i run it ? do i have to put it in <script></script> and do some_Function(etc...) ?
you should use the OnClientClick='myJsFunc();'
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="SubmitData" OnClientClick="aaa()" />
<script type="text/javascript">
function aaa()
{
var selectedLanguages = new Array();
jQuery('#lstProblems option:selected').each(function() {
selectedLanguages.push(jQuery(this).val());
});
}
</script>
You can use OnClientClick event
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Your javascript function" OnClick="SubmitData" />
Set up your server side event code the way it seems to be already, then in the Page_Load method of your code behind add the following line:
Button1.Attributes.Add("onclick","yourJavascriptFunction();");
EDIT: To run the function from your edited question, simply create a function of the same name in your javascript file. Something like this:
<script type="text/javascript">
function yourJavascriptFunction()
{
var selectedLanguages = new Array();
jQuery('#lstProblems option:selected').each(function() {
selectedLanguages.push(jQuery(this).val());
});
}
</script>
Page:
<body>
<form id="frmLogin" runat="server">
<asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel" runat="server"/>
<div id="divDialog"></div>
<asp:Label ID="lblText" runat="server"></asp:Label>
</form>
</body>
JS
<script type="text/javascript">
$(document).ready(function() {
$("#divDialog").dialog({autoOpen: false,
buttons: { "Ok": function()
{
$(this).dialog("close");
},
"Cancel": function()
{
$(this).dialog("close");
}
}
});
});
function openConfirmDialog()
{
$("#divDialog").dialog("open");
}
C#
protected void Page_Load(object sender, EventArgs e)
{
lblText.Text = "";
}
protected void PopulateLabel(object sender, EventArgs e)
{
lblText.Text = "Hello";
}
This code opens me a dialog box with Ok and Cancel button but it do not wait for user activity and post the page immediately and the label gets populated. I need to call the c# function based on user activity. If user clicks "Ok" label should get populated and if user clicks "Cancel" it should not call the c# function. How do I achieve this?
First, to prevent the page from immediately posting back to the server, you need to cancel the default behavior of the click event by returning false from your handler:
<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel"
OnClientClick="openConfirmDialog(); return false;" />
Next, you need to perform the postback yourself when your Ok button is clicked:
$("#divDialog").dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
__doPostBack("btnClick", "");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
Note that the first argument to __doPostBack() is the name of the control (its UniqueID in ASP.NET terminology). Since the button is a direct child of the <form> element, we can hardcode its id in the __doPostBack() call, but things will get more complicated if it resides in a container hierarchy. In that case, you can use ClientScript.GetPostBackEventReference() to generate the appropriate call to __doPostBack().
EDIT: Since your page does not contain any postback-enabled control, __doPostBack() won't be defined on the client side. To work around that problem, you can use a LinkButton control instead of a Button control.
Added another button and used the jQuery click() event to trigger new button's click event which will in turn trigger the respective event handler in C#