Menu
I am trying hard to show a panel (which contain two labels and it is hidden when page load) on a button click but not getting success.
When I click on a button(id=Button1) then it should show a panel(id=anspanel) but it is not happening like that. Instead of that it remain as it is i.e. nothing happens on a button click. I can't find out why. Have a look at my code. Show me where I am making mistake and what is the solution.
.aspx :-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Student_Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
var currentTab = 0;
$(function () {
$("#tabs").tabs({
select: function (e, i) {
currentTab = i.index;
}
});
});
$("#btnNext").live("click", function () {
var tabs = $('#tabs').tabs();
var c = $('#tabs').tabs("length");
currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
tabs.tabs('select', currentTab);
$("#btnPrevious").show();
if (currentTab == (c - 1)) {
$("#btnNext").hide();
} else {
$("#btnNext").show();
}
});
$("#btnPrevious").live("click", function () {
var tabs = $('#tabs').tabs();
var c = $('#tabs').tabs("length");
currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
tabs.tabs('select', currentTab);
if (currentTab == 0) {
$("#btnNext").show();
$("#btnPrevious").hide();
}
if (currentTab < (c - 1)) {
$("#btnNext").show();
}
});
$(function () {
//$("#Panel2").hide();
document.getElementById('form1').onsubmit = function () {
return false;
}//Avoid Reloading
$("#Button1").click(function () {
if ($('#anspanel').is(":hidden")) {
$('#anspanel').show();
}
else {
$('#anspanel').hide();
}
if ($("#Button1").val() == "Show Answer") {
$("#Button1").val("Hide Answer");
} else {
$("#Button1").val("Show Answer");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
<li><a href="#tabs-4">Tab 4</a></li>
<li><a href="#tabs-5">Tab 5</a></li>
</ul>
<div id="tabs-1">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Show Answer" />
<br />
<asp:Panel id="anspanel" runat="server">
<span>Correct Answer is :-</span><asp:Label ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>
</asp:Panel>
</asp:Panel>
<br />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tabs-2">
Tab 2 Content
</div>
<div id="tabs-3">
Tab 3 Content
</div>
<div id="tabs-4">
Tab 4 Content
</div>
<div id="tabs-5">
Tab 5 Content
</div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />
</div>
</form>
</body>
</html>.aspx.cs :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class Student_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = GetData("SELECT top 2 Question, Option1, Option2, Option3, Option4, CorrectAns, Explanation FROM Questions");
GridView1.DataBind();
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
Panel panel1 = (Panel)row.FindControl("Panel1");
Panel anspanel = (Panel)panel1.FindControl("anspanel");
anspanel.Style.Add("display", "none");
}
}
}
}
private DataSet GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
}
ERROR :-
Server Error in '/' Application.
Object reference not set to an instance of an object.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Source Error:
Line 24: Panel panel1 = (Panel)row.FindControl("Panel1");
Line 25: Panel anspanel = (Panel)panel1.FindControl("anspanel");
Line 26: anspanel.Style.Add("display", "none");
Line 27: }
Line 28: }
Source File: e:\Way2Success\Student\Test.aspx.cs Line: 26
Stack Trace:
[NullReferenceException: Object reference not set to an instance of an object.]
Student_Test.Page_Load(Object sender, EventArgs e) in e:\Way2Success\Student\Test.aspx.cs:26
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +51
System.Web.UI.Control.OnLoad(EventArgs e) +95
System.Web.UI.Control.LoadRecursive() +59
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2952
961
Problem is that the id will be set as "ct100_ContentPlaceHolder1_Button1" in place where you have Button1 and to "ct100_ContentPlaceHolder1_anspanel" to anspanel.
There are two solutions:
1) Set the Client Id mode to static: to your elements so that you remain with the static id.
Make this changes to both your Button1 and anspanel elements.
<asp:Button ID="Button1" ClientIDMode="Static" runat="server" Text="Show Answer" />
and
<asp:Panel id="anspanel" ClientIDMode="Static" runat="server">
And the exiting script must work fine.
2) Change your script to use the clientId.
$("#<%= Button1.ClientID %>") in place of $("#Button1")
And
$("#<%= anspanel.ClientID %>") in place of $("#anspanel")
Edit 1: After you mentioned that it works only for the first button I realized that you have the gridview and you will end up in having the same id's to all the panels which will not work well with Jquery. So the idea is to play with class selector. Here is some changes I would recommend you to do...
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'>
....
....
<asp:Button class="panelButton" runat="server" Text="Show Answer" />
<br />
<asp:Panel class="AnswerPanel" runat="server">
Note above that I have added classes to the button and the panel. Also I have removed the ID's as it is not necessary.
Then in your jquery change the code as below
$(".panelButton").click(function () {
var $thisButton = $(this); //save button into a variable
var $ansPanel = $(this).parent().find('.AnswerPanel'); //save ans panel into a variable
if ($ansPanel.is(":hidden")) {
$ansPanel.show();
}
else {
$ansPanel.hide();
}
if ($thisButton.val() == "Show Answer") {
$thisButton.val("Hide Answer");
} else {
$thisButton.val("Show Answer");
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
