I am trying to have an update panel show when i click on a button. Right now it makes a postback of the whole page and it takes a long time to get all the information as the first time. I am trying to speed up that time and would like to know if there was a way to click the button show a panel over top of the page with the rest of the page grayed out and not postback. If I set onClientClick="return false" then the update panel never shows.
<asp:ImageButton ID="DetailButton" runat="server" CommandName="detail" CommandArgument='<%# Eval("id") %>'
ImageUrl="~/Images/detailbutton_export.png" onmouseover="this.src='/Images/detailbutton2_export.png'"
onmouseout="this.src='/Images/detailbutton_export.png'" />
and on the code behind
else if ((string)e.CommandName == "detail")
{
// Show the toast of information.
//ResetApprovalDetailFields();
PopulateApprovalDetailByWebUserId(webUserId,int.Parse((string)e.CommandArgument)
ApprovalDetailPanel.Visible = true;
}
Related
This is an ASP.NET C# question.
<script>
function buttonfunc() {
document.getElementById("demo").innerHTML = "js work";
}
</script>
<form id="form1" runat="server">
<div>
<p id="demo"></p>
<asp:Button ID="UpdateButton" runat="server" Text="Update"
OnClick="UpdateButton_Click" OnClientClick="buttonfunc()"; return false;/>
</div>
</form>
protected void UpdateButton_Click(object sender, EventArgs e)
{
Response.Write("cs work");
}
In the case of using both a JavaScript and a C# method on a button, how can we stop postback page and display two lines of text at the same time (if possible, without using AJAX)?
The way this works is rather handy.
While that button can have both a client side event, and a server side event?
If the client side js code/event returns false, then the server side event will not trigger. This is ideal for say prompting a user to delete a record, or to perform some operation that you require a "confirm" for.
so, take this button:
<asp:Button ID="cmdDel" runat="server" Text="Delete record"
CssClass="btn"
OnClick="cmdDel_Click"
OnClientClick="return DelConfirm()" />
<script>
function DelConfirm() {
return confirm("Really delete this reocrd?")
}
</script>
so, if the js code (client side) returns true, then server button click runs. If client side js code returns false, then server side button does not run.
You would see this for running above:
and display two lines of text at the same time
Hum, that is not clear what you goal here. What 2 lines are you looking to display here?
I mean, either you want/have the server side button event code run, or it does not. As noted, if you return false, then you should not be seeing a post-back. With your sample code, the return false should result in the server side button even NEVER running.
I mean, if you don't do a post-back, then it does not make sense that you can/will have the server side button code run. You require a post-back for this to occur.
Now, you might be able to live with a update panel, and that allows you to define ONLY that part of the web page that will travel up to the server, and run your code. From a user point of view, the page will not appear to have a post back (and you don't actually have a full page post back in this case). The brower scoll bar will not change postion, and you not see the browser "spinner" show a post-back.
So, you drag + drop in the script manager, and then inside of the update paneel, you would have this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="cmdDel" runat="server" Text="Delete record"
CssClass="btn"
OnClick="cmdDel_Click"
OnClientClick="return DelConfirm()" />
<script>
function DelConfirm() {
return confirm("Really delete this reocrd?")
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
Now, in your code exmaple, place everything inside of the content template, and remove your return false for the client side click. give it a try.
Now, some caution with above. The page life cycle DOES trigger. So, the page load event will fire (like it always does), and then your code stub will run. but to the user, you not see a full page post back. This is often called a "partial page" post-back.
Needless to say, to build a working web forms page, 99% of the time, your page load event that sets up values for controls and does things on the FIRST page load ONLY?
You have the !IsPost back stub in the page load event, so your REAL first time page load code only ever runs one time.
eg:
if (!IsPostBack)
{
// first time page load
// load up grid, some combo boxes etc.
// this code only runs ONE time, on first page load
}
I'm trying to fix a bug I've encountered with a button not triggering in my webform.
The code for the button in the aspx file and the vb file looks like this:
<asp:Button ID="btnUserEditSave" runat="server" Text="Save User" ClientIDMode="Static" CssClass="button saveButton xbtnWaitEvent" width="100px" ToolTip="Save changes" />
Protected Sub btnUserEditSave_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnUserEditSave.Click
I haven't included to code for the button itself as it's irrelevant because the bug relates to the button not triggering rather than the code of the button itself breaking. I've tested how the button works and what causes it to not trigger and here's the information I have thus far:
When first saving user details through this button, the button triggers and all code runs as expected. The page is the reloaded with the new user details showing.
However after doing this, the button will not trigger properly and when clicked will cause the page to go blank. This is despite the fact that no page load methods written in the source trigger either nor does the Javascript seem to either which I've tried testing through the use of alerts (see code below):
if(document.getElementById('btnUserEditSave').clicked == true)
{
alert("button was clicked");
}
It is worth noting that the other buttons on the page also do not work again in a very similar way. The code behind the button does not trigger nor does a page load method trigger. But a blank page is still shown.
If any further code is needed for context then I will provide as much as I can, and any help as to what might be causing this error would be greatly appreciated as I am rather stuck for ideas. Thanks.
You need to add the onclick event in the html markup, that's how you wire it up.
<asp:Button ID="btnUserEditSave" onclick="btnUserEditSave_Click" runat="server" Text="Save User" ClientIDMode="Static" CssClass="button saveButton xbtnWaitEvent" width="100px" ToolTip="Save changes" />
i am trying to show a hidden div after a login button click event..but the div is not staying..it is vanishing after the login click..but i want to stay the div after login button click and it will stay in the page untill i click anything in the page..
my button
<asp:Button ID="loginbutton" runat="server" Text="Login" OnClientClick=" return someFunction();"/>
my javascript function
<script type="text/javascript">
function someFunction() {
$("#logdiv").show();
}
</script>
Here the div is not stay visible after the click of your button because you make at the same time post back, after the reload of the page the div is hidden again.
I am not suggest you to hold the post back because probably is not what you want. You can try either render the div again with visible on, either register some other script after the post back to make it visible.
I open a (css made)modal dialog using the rel="#showEditModal" attribute of a button.
I used it to add values to database then update gridview and got it working at last.
Problem is now i need to edit this values when clicked upon in the gridview.
It is something like this:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="BtnEditDep" rel="#showEditModal" CssClass="btn showModal"
runat="server" CausesValidation="false" Text="Test" OnClientClick="window.scrollTo =
function(x,y) { return true; };" />
</ItemTemplate>
</asp:TemplateField>
This pretty much screws me because i need to send a variable(ID) to that modal
1) If i put it inside the Grid_RowCommand it won't go there until after the modal shows up
tried putting the value inside a viewstate => can't seem to be able to extract the value from the gridview
2) Tried to open the modal dynamically by adding attribute ("rel","#showEditModal") dynamically INSIDE the Grid_RowCommand but apparently I will need to click it again to show the modal (looked into programmatically clicking the button but failed)
3) Also tried it like this(didn't work - couldn't send parameter)
OnClientClick="SaveValue('<%= (BtnEditDep.ClientID).Text %>);
window.scrollTo = function(x,y) { return true; };"
....
function SaveValue(name)
{
$("hiddenelement").value = "<%= (BtnEditDep.ClientID).Text %>";
}
How can i accomplish this because I am currently stumped.
Thanks.
I think you should try to pack your function of saving data and refreshing gridview in a service and use ajax to fire it on client side, that's the most nature solution for your problem.
I have looked around for a way of implementing this. Here is a pseudocode representation of what I have:
bool hasData = ItemHasData(itemid);
Confirm = "false"; // hidden variable
if (hasData)
{
//Code to call confirm(message) returns "true" or "false"
if (Confirm == "true")
{
//Delete item
}
else if (Confirm == "false")
{
return;
}
}
The code to call confirm uses a asp:Literal control and sets it equal to the confirm. I can get the popup but only after the function exits. And it does nothing with the conditions after that.
The general consensus seems to be that calling the javascript at that specific line is impossible (makes sense due to the server side/client side gap), but how can I achieve this? I tried using the ConfirmButtonExtender from the ASP.NET AJAX Toolkit but I couldn't interact with the confirmbuttonextender object from the code behind when the object is set to runat="server".
edit:
Sorry, I did miss those tidbits. Thanks Icarus.
The control itself is the GridView (the pseudo version is actually from the gvData_RowCommand function)'s rowcommand. The first check looks to see if the CommandName is DeleteItem and if so goes into this.
The gvData's columns are set based off a list of headers (and the dataset) passed as the table it is working against is for multiple items with different required information. The gvData's data is there, I just need to get a Yes/No (or in reality it'll end up being Ok/Cancel) dialog to verify they want to delete the item when there is data.
One method I end up using in some situations is to have a Panel that displays the Confirm / Cancel buttons. This avoids the need to handle JavaScript events and uses ASP.NET entirely.
<asp:Panel ID="pDeleteConfirm" runat="server"
CssClass="AlertDialog"
Visible="False">
<p>Do you wish to delete the selected record?<br />
<asp:Button ID="btDeleteYes" runat="server" OnClick="btDelete_Click" Text="Delete" />
<asp:Button ID="btDeleteNo" runat="server" OnClick="btDelete_Click" Text="Cancel" />
</p>
</asp:Panel>
<asp:GridView ID="gvData" runat="server"
AutoGenerateColumns="False"
CssClass="GridView"
DataKeyNames="ID"
DataSourceID="sqlData"
EmptyDataText="There is no data entered in the system."
OnRowDeleting="gvData_RowDeleting">
......
</asp:GridView>
I use the OnRowDeleting event to show the Panel
protected void gvData_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
// Show confirmation dialog
pDeleteConfirm.Visible = true;
// Select the row to delete
gvData.SelectedIndex = e.RowIndex;
// Cancel the delete so the user can use the confirm box
e.Cancel = true;
}
Handle the button Click events
protected void btDelete_Click(object sender, EventArgs e)
{
Button bt = (Button)sender;
switch (bt.ID)
{
case "btDeleteYes": // they confirmed a delete
sqlData.Delete();
break;
case "btDeleteNo": // they clicked cancel
// Do nothing
break;
default:
throw new Exception("Unknow button click in btDelete_Click");
}
// clear selection and hide the confirm box
gvData.SelectedIndex = -1;
pDeleteConfirm.Visible = false;
}
This isn't JavaScript but you can add in some UpdatePanels to do AJAX work on it.
Just one method to do it through ASP.NET rather than JavaScript handling.
The job of your code-behind is to render HTML out to the browser. It does this, and then the socket is closed and your server side code is no longer executing.
You'll have to implement this logic using a Javascript function on the client side.
Are you attempting to warn the user if there's data loaded before they take a certain action? Or perhaps before they try to leave the page? You'll have to popup the alert using script when that action happens on the page.