I am using the following code. My desire is to be able to switch Gridviews at the click of a button. The probem is that nothing happens when I click the buttons even though the javascript is firing. I verified by putting alerts in the functions. I tried
adding the ispostback in java (I'm trying not to use the code behind if possible). When I start I can see Gridview1 but not Gridview2. Which is right. When I click my first button, gridview1 should hide and gridview2 should show. It does for a split second
but then goes back to the way it is at beginning. Can someone help?
You have to return FALSE, in your javascript method, to avoid button raising the postback event. You method is correct, but after effecting the action, the page is reloaded.
function ShowGridView2() {
document.getElementById("GridView1").style.display = "none";
document.getElementById("GridView2").style.display = "inline";
//// you have to return false, to avoid BUTTON raise the postback event
return false;
}
function ShowGridView1() {
document.getElementById("GridView1").style.display = "inline";
document.getElementById("GridView2").style.display = "none";
//// you have to return false, to avoid BUTTON raise the postback event
return false;
}
MVP Client Operating System
Please Mark as Answer if it helps :)
mhinkle2
Member
564 Points
519 Posts
Problems with page
Feb 20, 2012 02:28 PM|LINK
I am using the following code. My desire is to be able to switch Gridviews at the click of a button. The probem is that nothing happens when I click the buttons even though the javascript is firing. I verified by putting alerts in the functions. I tried adding the ispostback in java (I'm trying not to use the code behind if possible). When I start I can see Gridview1 but not Gridview2. Which is right. When I click my first button, gridview1 should hide and gridview2 should show. It does for a split second but then goes back to the way it is at beginning. Can someone help?
Mike
<head runat="server"> <title></title> <script language="javascript" type="text/javascript"> function LoadPage1() { if (!document.getElementById('clientSideIsPostBack') == 'false') { alert(!document.getElementById('clientSideIsPostBack')); document.getElementById("GridView2").style.display = "none"; document.getElementById("GridView1").style.display = "inline"; } } function ShowGridView2() { document.getElementById("GridView1").style.display = "none"; document.getElementById("GridView2").style.display = "inline"; } function ShowGridView1() { document.getElementById("GridView1").style.display = "inline"; document.getElementById("GridView2").style.display = "none"; } </script> </head> <body onload="LoadPage1();"> <form id="form1" runat="server" > <asp:Button ID="EditPOs" OnClientClick="ShowGridView2();" runat="server" Font-Bold="True" Font-Names="Tahoma" Font-Size="XX-Small" style="top: 26px; left: 42px; position: absolute; height: 26px; width: 105px" Text="Edit Saved PO's" UseSubmitBehavior="False" /> <asp:Button ID="EditVendors" onclientclick="ShowGridView1();" runat="server" Font-Bold="True" Font-Names="Tahoma" Font-Size="XX-Small" style="top: 28px; left: 38px; position: absolute; height: 26px; width: 107px" Text="Edit Saved Vendors" UseSubmitBehavior="False" Visible="False" /> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="VendorID" DataSourceID="SqlDataSource2" EmptyDataText="There are no data records to display." Font-Bold="True" Font-Names="Tahoma" Font-Size="XX-Small" style="top: 111px; left: 7px; position: absolute; height: 187px; width: 165px" PageSize="20"> <Columns> <asp:CommandField ShowDeleteButton="True"></asp:CommandField> <asp:BoundField DataField="VendorID" HeaderText="VendorID" ReadOnly="True" SortExpression="VendorID"></asp:BoundField> <asp:BoundField DataField="Vendor" HeaderText="Vendor" SortExpression="Vendor"></asp:BoundField> <asp:BoundField DataField="EmpID" HeaderText="EmpID" SortExpression="EmpID"></asp:BoundField> </Columns> </asp:GridView> <asp:GridView ID="GridView2" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="RememberedPOID" DataSourceID="SqlDataSource3" EmptyDataText="There are no data records to display." Font-Bold="True" Font-Names="Tahoma" Font-Size="XX-Small" style="display:none; top: 120px; left: 3px; position: absolute; height: 187px; width: 1190px" PageSize="20"> <Columns> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True"></asp:CommandField> <asp:BoundField DataField="RememberedPOID" HeaderText="ID" ReadOnly="True" SortExpression="RememberedPOID" InsertVisible="False"></asp:BoundField> <asp:BoundField DataField="EmpID" HeaderText="EmpID" SortExpression="EmpID"></asp:BoundField> <asp:BoundField DataField="VendorID" HeaderText="VendorID" SortExpression="VendorID"></asp:BoundField> <asp:BoundField DataField="Vendor" HeaderText="Vendor" SortExpression="Vendor"></asp:BoundField> <asp:BoundField DataField="Quantity1" HeaderText="Quantity1" SortExpression="Quantity1"></asp:BoundField> <asp:BoundField DataField="UnitPrice1" HeaderText="UnitPrice1" SortExpression="UnitPrice1"></asp:BoundField> <asp:BoundField DataField="Description1" HeaderText="Description1" SortExpression="Description1"></asp:BoundField> <asp:BoundField DataField="PurchaseTotal1" HeaderText="PurchaseTotal1" SortExpression="PurchaseTotal1"></asp:BoundField> <asp:BoundField DataField="PurchaseTotal" HeaderText="PurchaseTotal" SortExpression="PurchaseTotal"></asp:BoundField> <asp:BoundField DataField="AccountNum1" HeaderText="AccountNum1" SortExpression="AccountNum1"></asp:BoundField> <asp:BoundField DataField="AccountAmount1" HeaderText="AccountAmount1" SortExpression="AccountAmount1"></asp:BoundField> <asp:BoundField DataField="AccountTotal" HeaderText="AccountTotal" SortExpression="AccountTotal"></asp:BoundField> <asp:BoundField DataField="Purpose" HeaderText="Purpose" SortExpression="Purpose"></asp:BoundField> </Columns> </asp:GridView>CollyMelon
Participant
997 Points
222 Posts
Re: Problems with page
Feb 20, 2012 02:40 PM|LINK
What if you try with Visibility instead?
function ShowGridView2() { document.getElementById('<%=GridView1.ClientID%>').style.visibility = "hidden"; document.getElementById('<%=GridView2.ClientID%>').style.visibility = "visible"; } function ShowGridView1() { document.getElementById('<%=GridView2.ClientID%>').style.visibility = "hidden"; document.getElementById('<%=GridView1.ClientID%>').style.visibility = "visible"; }mhinkle2
Member
564 Points
519 Posts
Re: Problems with page
Feb 20, 2012 02:47 PM|LINK
This does not help. Does the same thing.
giop
Member
378 Points
81 Posts
Re: Problems with page
Feb 20, 2012 04:37 PM|LINK
You have to return FALSE, in your javascript method, to avoid button raising the postback event. You method is correct, but after effecting the action, the page is reloaded.
function ShowGridView2() { document.getElementById("GridView1").style.display = "none"; document.getElementById("GridView2").style.display = "inline"; //// you have to return false, to avoid BUTTON raise the postback event return false; } function ShowGridView1() { document.getElementById("GridView1").style.display = "inline"; document.getElementById("GridView2").style.display = "none"; //// you have to return false, to avoid BUTTON raise the postback event return false; }Please Mark as Answer if it helps :)
raju dasa
Star
14730 Points
2496 Posts
Re: Problems with page
Feb 20, 2012 04:44 PM|LINK
HI,
above poster said right!
u need to return false both from js and html.
function ShowGridView2() {
document.getElementById('<%=GridView1.ClientID%>').style.visibility = "hidden";
document.getElementById('<%=GridView2.ClientID%>').style.visibility = "visible";
return false;
}
<asp:Button ID="EditPOs" OnClientClick="return ShowGridView2();" .../>
rajudasa.blogspot.com || blog@opera
Smith Peter
Member
142 Points
52 Posts
Re: Problems with page
Feb 21, 2012 12:31 PM|LINK
Hi,
A function should return a value.
Your function doesn't returning anything.