Develop Reference

How to prevent postback on asp button while displaying a popup using JQuery

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.

ASP disable button during postback

I have a button which i am trying to add a css class to appear disabled once the user has clicked it.
protected void Button_Continue_OnClick(object sender, EventArgs e)
{
Panel_Error.Visible = false;
Literal_Error.Text = "";
if (RadioButton_Yes.Checked)
{
...//if radio checked get text and process etc.
}
}
My button onlick is above which simply processes a textbox filled on the page.
My button looks like this:
<asp:Button runat="server" ID="Button_Continue" CssClass="button dis small" Text="Continue" OnClick="Button_Continue_OnClick" ClientIDMode="Static" OnClientClick="return preventMult();" />
And my javscript is as follows:
<script type="text/javascript">
var isSubmitted = false;
function preventMult() {
if (isSubmitted == false) {
$('#Button_Continue').removeClass('ready');
$('#Button_Continue').addClass('disabled');
isSubmitted = true;
return true;
}
else {
return false;
}
}
</script>
The problem I am having is that the css class added works fine on the first postback, but after which my button onclick doesnt work and the button cant be clicked again if the user needs to resubmit the data if it is wrong
Another problem I am having is that with a breakpoint in my method i notice that the method is fired twice on the click.

Looks like you need something like this:
private void Page_Load()
{
if (!IsPostBack)
{
//doNothing
}
else
{
//button.disabled = true
}
}

try this
<asp:Button runat="server" ID="Button_Continue" AutoPostBack="true" CssClass="button dis small" Text="Continue" OnClick="Button_Continue_OnClick" ClientIDMode="Static" OnClientClick="return preventMult();" />

Setting style.display from asp.net c#

I am using a Panel in an ASP.NET webpage to hide or display a selection of control in response to a client side button click. Simple script toggles the visibility
<script>
function SetToAddSurvey() {
var x = document.getElementById("NewSurveyPanel");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I now need to toggle the display property on the server side following a database transaction. I know I can't use the code
NewSurveyPanel.visible = false;
as it will cause the control to not be rendered and the above jscript to fail when it is called next.
NewSurveyPanel.Attributes["display"] = "block";
also doesn't work.
Is there an easy solution for this?
Ta.

Try this
NewSurveyPanel.Attributes["style"] = "display: none";
or
NewSurveyPanel.Attributes["style"] = "visibility: hidden";
What this does is to render the opening tag like this:
<div ....... style="display: none" ....>

Use a CSS class:
.hidden {
display: none;
}
....
NewSurveyPanel.CssClass = "hidden";

Code Behind
NewSurveyPanel.Attributes["style"] = "display: block";
ASPX
<asp:Panel ID="NewSurveyPanel" runat="server">
test
</asp:Panel>
<asp:Button runat="server" OnClientClick="SetToAddSurvey(); return false;" />
<script>
function SetToAddSurvey() {
var x = document.getElementById("<%= NewSurveyPanel.ClientID%>");
alert(x);
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

JavaScript form submit doesn't fire asp server-side click function of the submit button

I used an event listener to prevent the action of my asp:button (submit) because I wanted to validate my form with a javascript function before it actually gets submitted.
formInstance.addEventListener('submit', function (event) {
event.preventDefault();
}, false);
Here is the button:
<asp:Button ID="btnCreateForm" CssClass="submit-form button" runat="server"
Text="Save Form" OnClick="btnCreateForm_Click"
OnClientClick="Sharpforms.checkFormEntry()" />
The fired javascript:
checkFormEntry: function () {
var formName = document.getElementById("txtFormName");
if (formName.value.trim() == "") {
alert("Please fill in a valid form name!");
return false;
}
else {
//formInstance.submit();
return true;
}
}
Apparently the javascript submit() does submit the form because the page is being reloaded but I recognized that it doesn't enter my ASP side btnCreateForm_Click function any more:
protected void btnCreateForm_Click(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine("Test if the button has been clicked.");
}
When commenting my form event listener as well as the submit() and try to submit it natively he enters the click function without problems. But then I have no possibility to check my form on the client side. What am I missing?

You have to add return to the OnClientClick event. If the function returns true, the postback occurs. If the function returns false, the postback gets cancelled.
<asp:Button ID="btnCreateForm" CssClass="submit-form button" runat="server"
Text="Save Form" OnClick="btnCreateForm_Click"
OnClientClick="return Sharpforms.checkFormEntry()" />
Also, doing it in this way you can remove the event listener.

Prevent Postback after opening jQuery dialog box

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#