We Keep Coding

Call javascript in aspx.cs with div<%# Eval("variable") %>' as parameter in aspx

I have a collapsible and expandable gridview. When i change the dropdown in my gridview the gridview collapses due to the autopostback that is caused. I need to do a autopostback since I want to populate a second dropdown based on the first dropdown. Is there a way I can expanded it after it is collapsed. I am thinking of calling the javascript but i dont now how to call it since I have little knowledge in javascript. Thank you for your help.
Here is my javascript.
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "../images/minus.gif";
} else {
div.style.display = "none";
img.src = "../images/plus.gif";
}
}
Here is the code for my indexChanged how can I add the javascript to expand the grid.
protected void OnClosetIndexChanged(object sender, EventArgs e)
{
//Call javascript to reopen gridview
}
And here is my front end
<asp:TemplateField ItemStyle-Width="20px" >
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("componente_id") %>');" >
<img id="imgdiv<%# Eval("componente_id") %>" width="9px" border="0" src="../images/plus.gif"
alt="" /></a>
<asp:ImageButton ImageUrl="~/images/select.png" runat="server" CommandName="Select" OnRowDataBound = "OnRowDataBound" Width="10px" Height="10px"/>
</ItemTemplate>
<ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Purchase Order ID">
<ItemTemplate>
<asp:Label ID="lblPurchaseOrderID" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "componente_id") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%" style="background:#F5F5F5" >
<div id="div<%# Eval("componente_id") %>" style="overflow:auto; display:none; position: relative; left: 15px; overflow: auto">
<div class="header">
Cambiar la cantidad
</div>
<div class="body">
<asp:Label ID="lblType" runat="server" Text=""></asp:Label>
<br/>
<label for="validationOfTypeID">Armario:</label>
<asp:DropDownList ID="drCloset2" runat="server" Width="40%" Height="30px" AutoPostBack="True" OnSelectedIndexChanged = "OnClosetIndexChanged"></asp:DropDownList>
<br/>
<label for="validationOfTypeID">cajón:</label>
<asp:DropDownList ID = "drDrawer2" runat="server" Width="40%" Height="30px" >
</asp:DropDownList>
<br />
<asp:Label ID="lblQuantity" runat="server" Text=""></asp:Label>
<asp:DropDownList Height="30px" ID="drOperation" runat="server">
<asp:ListItem>+</asp:ListItem>
<asp:ListItem>-</asp:ListItem>
</asp:DropDownList>
<asp:TextBox width="50px" ID="txtChangeQuantity" runat="server" TextMode="Number" min="0" step="1" Value="0"></asp:TextBox>
<br/>
<asp:Button ID="btnChangeQuantity" runat="server" Text="Validar" OnClick="change_quantity_Click" />
<asp:Button ID="btnHide" runat="server" Text="Anular" AutoPostBack="True" />
</div>
<asp:DetailsView id="DetailsView1" DataKeyNames="componente_id" Runat="server" Width="300px" Font-Names="Calibri"/>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
Here is a image of what it looks like :

ASP.NET GridView inside UpdatePanel doesn't update until second click

I've looked for answers online but I have not found any answer. I have a GridView inside an UpdatePanel and one Linkbutton column to show some detail in a Bootstrap modal. I had a problem that when the user clicks on the LinkButton the event OnClick doesn't fire, so, to solve that I made a fuction in Javascript that only causes a click in another LinkButton to fire the OnClick event.
Now it works fine, but nothing changes until the second click.
ASP.NET code
<asp:UpdatePanel ID="upContent" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table align="center">
<tr>
<td>
<asp:GridView ID="grvOrderTracing" runat="server" EmptyDataText="There are no pending orders for the selected date" AutoGenerateColumns="False" DataSourceID="SqlDTSgetOrdersByDate" CssClass="table table-striped table-hover table-responsive" GridLines="None" AllowPaging="True" PageSize="8" >
<PagerStyle CssClass="pagination-ys" />
<Columns>
<asp:BoundField DataField="Order ID" HeaderText="Order ID" SortExpression="Order ID" >
<ControlStyle CssClass="hide" />
<FooterStyle CssClass="hide" />
<HeaderStyle CssClass="hide" />
<ItemStyle CssClass="hide" />
</asp:BoundField>
<asp:TemplateField HeaderText="Order Number">
<ItemTemplate>
<asp:LinkButton ID="lbtShowMoreInfo" runat="server" data-toggle="modal" data-target="#showLog" CommandName="OrderID" Text='<%# Bind("[Order Number]") %>' style="cursor: pointer; font-weight: bold;" OnClientClick="ActivityLog(this);">
</asp:LinkButton>
<asp:LinkButton ID="lbtActivityLog" runat="server" CommandName="OrderID" CssClass="hide" OnClick="ActivityLog_Click" Text='<%# Bind("[Order ID]") %>' ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDTSgetOrdersByDate" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" SelectCommand="sp_getOrdersByDate" SelectCommandType="StoredProcedure" CancelSelectOnNullParameter="False">
<SelectParameters>
<asp:Parameter DefaultValue="0" Name="filter" Type="Int32" />
<asp:Parameter Name="startDate" Type="String" />
<asp:Parameter Name="endDate" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upLog" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- Modal -->
<div id="showLog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Orden Log</h4>
</div>
<div class="modal-body">
<asp:GridView ID="grvLog" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDTSgetTracing" CssClass="table table-striped table-hover table-responsive" GridLines="None" >
<Columns>
<asp:BoundField DataField="Movement Date" HeaderText="Movement Date" SortExpression="Movement Date" ReadOnly="true" DataFormatString="{0:dd/MM/yyyy HH:mm}" />
<asp:BoundField DataField="User" HeaderText="User" SortExpression="User" ReadOnly="true" />
<asp:BoundField DataField="Action" HeaderText="Action" SortExpression="Action" ReadOnly="true" />
<asp:BoundField DataField="Comments" HeaderText="Comments" SortExpression="Comments"/>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDTSgetTracing" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" SelectCommand="sp_getTracing" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:Parameter DefaultValue="0" Name="ord_id" Type="Int32"/>
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Javascript code
function ActivityLog(lbt) {
lbt.nextSibling.nextSibling.click(); //Find the other LinkButton and click
}
C# Code
protected void ActivityLog_Click(object sender, EventArgs e)
{
SqlDTSgetTracing.SelectParameters["ord_id"].DefaultValue = ((LinkButton)sender).Text;
SqlDTSgetTracing.Select(DataSourceSelectArguments.Empty);
grvLog.DataBind();
upLog.Update();
}
When clicking the first time
When clicnking the seccond time
After clicking twice now the data is displayed in the GridView.
I want that from the first click the data being displayed in the GridView.

I think you might want to append return false; to the end of OnClientClick to prevent the rest of that control's click event (coded by ASP.NET for you) from running. That will ensure only the LinkButton you care about will postback.
OnClientClick="ActivityLog(this);return false;"
Not sure if that will fix the need for clicking twice or not, but maybe!

store details in gidview on button click

In my application I first need to have a button on clicking the button user should see a pop up with labels and text boxes and on clicking the add button which is in modal pop up the data should be added to grid view every thing is done, but if for the first time i enter the details of a person and i click on add button then they are added to gridview, again if i enter details of another person then the details that are in gridview for first person are disappered and in gridview the second person details are displayed.But it should display both the records.Also if i again run the application after some time then the added records are not displayed in gridview that means when i run the application after some time if i have added the records previously thay should be displayed in gridview along with button but only the button is displayed but not gridview how can i display the added records even i run the application any no of times.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Background
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.Popup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 400px;
height: 350px;
}
.lbl
{
font-size:16px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />
<div style="margin-left:10px;margin-top:10px">
<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="2"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderStyle-Width="120px" HeaderText="FirstName" DataField="FirstName" />
<asp:BoundField HeaderStyle-Width="120px" HeaderText=" MiddleName" DataField="MiddleName" />
<asp:BoundField HeaderStyle-Width="120px" HeaderText=" LastName" DataField="LastName" />
<asp:BoundField HeaderStyle-Width="120px" HeaderText="Gender" DataField="Gender" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<div id="irm1" style=" width: 300px; height: 250px;" runat="server" >
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="lbl" Text="First Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" CssClass="lbl" Text="Middle Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" CssClass="lbl" Text="Last Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" CssClass="lbl" Text="Gender"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
<td>
<asp:Button ID="Button3" runat="server" Text="Add" OnClick="Button3_Click" />
</td>
</tr>
</table>
</div>
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
</form>
</body>
In my code behind-
protected void Page_Load(object sender, EventArgs e)
{
dt = new DataTable();
DataColumn dc1 = new DataColumn("FirstName");
DataColumn dc2 = new DataColumn("MiddleName");
DataColumn dc3 = new DataColumn("LastName");
DataColumn dc4 = new DataColumn("Gender");
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
dt.Columns.Add(dc3);
dt.Columns.Add(dc4);
DataRow dr1 = dt.NewRow();
GridView1.DataSource = dt;
GridView1.DataBind();
}
DataTable dt;
protected void Button3_Click(object sender, EventArgs e)
{
DataRow dr1 = dt.NewRow();
dr1[0] = TextBox1.Text;
dr1[1] = TextBox2.Text;
dr1[2] = TextBox3.Text;
dr1[3] = TextBox4.Text;
dt.Rows.Add(dr1);
GridView1.DataSource = dt;
GridView1.DataBind();
ClearFields();
}
protected void ClearFields()
{
TextBox1.Text = "";
TextBox2.Text = "";
TextBox3.Text = "";
TextBox4.Text = "";
}

carry your gridview inside Panl1 and all your code behind to webform1.cs, delete webform2, you dont need it.

How do I change color of a text when its clicked using jquery?

I am trying hard to change the color of a text when it is clicked but not getting success.
There is one label for question, four labels for four options, one label for correct answer and one label for explanation.
What I am trying is when user click on any option then it should match with the correct answer and change the color of the text of that option i.e. when the answer is correct the text color should turn to green otherwise the color should turn to red .
But when I click on any option it is turning to red color only . Correct option should turn to green but it is turning to red . I can't figure out why ?.
Have a look at my code. Show me where I am making mistake and what is the solution.
.aspx :-
<%# Page Title="" Language="C#" MasterPageFile="~/Student/StudentPage.master" AutoEventWireup="true" CodeFile="studpractice.aspx.cs" Inherits="Student_studpractice" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(function () {
$(".optionclass").click(function () {
var $thisoption = $(this);
var $corrans = $(".correctans");
if ($thisoption.text() == $corrans.text()) {
$thisoption.css("color", "green");
} else {
$thisoption.css("color", "red");
}
});
});
</script>
<div>
<div id="tabs">
<ul>
<li>Reasoning</li>
<li>Quantitative Aptitude</li>
<li>English</li>
<li>Mathematics</li>
<li>Computer Concepts</li>
</ul>
<div id="tabs-1">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" width="100%">
<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 class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>' ></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
<br />
<asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">
<span>Correct Answer is :-</span><asp:Label class="correctans" 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">
<asp:GridView ID="GridView2" 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 class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
<br />
<asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">
<span>Correct Answer is :-</span><asp:Label class="correctans" 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-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>
</asp:Content>

So what wrong you are doing is you are selecting all .correctans and what you should do is select the .correctans specific to that question only.

Change $(".correctans") to $(".correctans")[0] or $(".correctans").first() to get the single correctans element instead of a collection.
EDIT:
Since you have multiple questions and answers on the page, use this to get the correctans for the question they're answering:
var $corrans = $(this).parent().find('.correctans:first');

call jquery function inside gridview

call jquery function inside gridview .what i want to happen when i click on the link button open the div . i have problem here with this case didn't work .
JavaScript
function toggleDiv(divId) {
$("#shoow").toggle('slow');
}
HTML Markup
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
CellPadding="4"
ForeColor="#333333"
GridLines="None"
Width="507px"
Height="294px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="toggleDiv('Shoow'); return false;">
LinkButton</asp:LinkButton>
<div id="Shoow" style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Description")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

Make these changes
Markup
Pass the clicked element as itself like toggleDiv(this)
Remove the id of the div
Sample Code
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'>
</asp:Label>
<br />
<asp:LinkButton ID="LinkButton1" runat="server"
OnClientClick="javascript:toggleDiv(this);return false;">
LinkButton</asp:LinkButton>
<div style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
JavaScript (Toggle the visibility of the element next to the element that's clicked)
function toggleDiv(elm) {
$(elm).next().toggle('slow');
}

Whenever I need to execute JS from a Gridview I try to avoid using asp controls like LinkButton as they tend to cause a postback which you then need to prevent, which can be done, but I find it far easier to just embed a basic html button or img tag with an onclick set for your JS. No postback and no extra code to prevent a postback.
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
<br />
<button ID="LinkButton1" runat="server">Button Text</button>
<div id="Shoow" runat=server style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
</asp:TemplateField>
Then in the OnRowDatabound event you do the following because runat="server" has been set:
dim btn as HtmlButton = e.Row.FindControl("LinkButton1")
dim div as HtmlContainer = e.Row.FindControl("Shoow")
dim js as String = String.Format("toggleDiv('#{0}')", div.UniqueID)
btn.Attributes.Add("onclick", js)
and the JS:
function toggleDiv(divId) {
$(divId).toggle('slow');
}