How to fire javascript function on user control blur event - javascript

I'm developing a Web user control
.ascx
<div style="position:relative;border:none;" id="divComboContainer" runat="server" >
<asp:HiddenField ID="Hidden_TextField" Value="" runat="server" />
<asp:HiddenField ID="Hidden_ValueField" Value="" runat="server" />
<asp:HiddenField ID="Hidden_Value" Value="" runat="server" />
<asp:HiddenField ID="Hidden_Row_Index" Value="" runat="server" />
<asp:HiddenField ID="hfScrollPosition" Value="" runat="server" />
<asp:TextBox ID="txtDisplay" runat="server" CssClass="tb10" ></asp:TextBox>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel"
Width="280px" style="display :none;visibility: hidden;padding-bottom:-1px;
margin-top:-28px;margin-left:0px;background-color:#F5F5F5;overflow:hidden;
height:auto;min-height:100px;max-height:300px;max-width:350px;" >
<div id="CombClose" style="padding-right:2px;color:#FFFFFF;text-align:right;cursor:pointer;height:35px;background-color:#507CD1;width:100%;" runat="server" >Close</div>
<br />
<div runat="server" id="listDiv" style="padding-bottom:-1px;margin-top:-28px;
margin-left:0px;background-color:#F5F5F5;overflow-Y:auto;overflow-X:hidden;
height:200px;max-height:265px;max-width:350px;" tabindex="0">
<asp:CheckBoxList ID="chkList" runat="server" CssClass="Chklist">
</asp:CheckBoxList>
</div>
</asp:Panel>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="txtDisplay"
DropDownControlID="DropPanel" HighlightBorderColor="Transparent" OnClientPopup="OnClientPopup" />
</div>
In this control i need to fire some java-script on lostFocus or blur event.
Can any one guide me how can i call my script on control blur or lostFocus.

Related

How to validate dynamically created Checkboxlist And RadioButtonlist

I am trying to create a dynamic Multiple-choice Question Quiz, where we have different categories in which there are multiple questions with their individual options. I need to validate that at least one option is selected.
Below is the aspx code which I am using to bind the data:
<asp:ListView ID="lv_cat" runat="server" OnItemDataBound="lv_cat_ItemDataBound">
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<div class="step">
<h4 style="text-align: center;"><%# Eval("Cat_name") %></h4>
<asp:Label ID="lbl_Cat_id" runat="server" Text='<%# Eval("cat_id") %>' hidden="true"></asp:Label>
<asp:ListView ID="Lv_question" runat="server" OnItemDataBound="Lv_question_ItemDataBound">
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<div class="row">
<div class="col-md-10">
<h3><%# Eval("Question") %></h3>
<asp:Label ID="lbl_Q_Id" runat="server" Text='<%# Eval("Q_id") %>' hidden="true"></asp:Label>
<asp:Label ID="lbl_Q_ID_Status" runat="server" Text='<%# Eval("status") %>' hidden="true"></asp:Label>
<%-- <ul class="data-list-2">
<asp:ListView ID="Lv_Answer_check" runat="server" >
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<li>
<input name="rate" type="checkbox" class="required check_radio" id="checkbox" value='<%# Eval("A_id") %>'><label><%# Eval("answers") %></label></li>
</ItemTemplate>
</asp:ListView>
<asp:ListView ID="Lv_Answer_Radio" runat="server" >
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<li>
<input name="rate" type="radio" id="radiobutton" class="required check_radio" value='<%# Eval("A_id") %>'><label> <%# Eval("answers") %></label></li>
</ItemTemplate>
</asp:ListView>
</ul>
</br>--%>
<asp:RadioButtonList ID="Rbl_options" runat="server" Style="text-align: left; margin-left: 30px;" >
</asp:RadioButtonList>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" name="CheckBoxList1" Style="text-align: left; margin-left: 30px;" ></asp:CheckBoxList>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</ItemTemplate>
</asp:ListView>
and below is the javascript code which I am tried to implement.
<script>
$("input[type='checkbox']").addClass("answer_check");
$(".answer_check").each(function () {
$(this).rules("add", {
required: true,
messages: {
required: "please select atleast one of the below"
}
});
}); </script>

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');

Handle click event of dropdown in c# by jquery

I have written code in aspx file
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<section>
<div>
<label>State</label>
<label class="select">
<asp:DropDownList ID="ddlState" runat="server" DataTextField="StateName" DataValueField="StateName">
</asp:DropDownList><i></i>
</label>
</div>
</section>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlCountry" />
</Triggers>
</asp:UpdatePanel>
<div>
<label>Country</label>
<label class="select">
<asp:DropDownList ID="ddlCountry" runat="server" ToolTip="Select country" DataTextField="CountryName"
DataValueField="CountryID" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged">
</asp:DropDownList><i></i>
<asp:Label ID="lblSelectCountryFirst" Visible="false" Text="Please Select Country" runat="server" ForeColor="Red">
</asp:Label>
</label>
</div>
</section>
Now I want that when user will click on state dropdown the label lblSelectCountryFirst should be visible. How to accomplish this in jquery.
Use OnClientClick and change visible=false to css style display:none;. Please refer the solution given below:
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<section>
<div>
<label>
State</label>
<label class="select">
<asp:DropDownList ID="ddlState" runat="server" DataTextField="StateName" DataValueField="StateName">
</asp:DropDownList><i></i>
</label>
</div>
</section>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlCountry" />
</Triggers>
</asp:UpdatePanel>
<div>
<label>
Country</label>
<label class="select">
<asp:DropDownList ID="ddlCountry" runat="server" ToolTip="Select country" DataTextField="CountryName"
DataValueField="CountryID" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" OnClientClick="ShowCountryLabel();">
</asp:DropDownList><i></i>
<asp:Label ID="lblSelectCountryFirst" Text="Please Select Country" runat="server" ForeColor="Red" style="Display: none;"></asp:Label>
</label>
</div>
</section>
//Jquery Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function ShowCountryLabel(){
$("#lblSelectCountryFirst").show();
__doPostBack('__Page', '');
}
</script>

Maintian Scrollbar Of GridView Under <div> Asp.netnot working?

i have content page in which i am selecting value from drop down on which gridview populate i am here showing my aspx page,
<div>
<table>
<tr>
<td>
<asp:DropDownList ID="ddlConsultant" runat="server"
AutoPostBack="True"
onselectedindexchanged="ddlConsultant_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
</td>
<td>
<asp:TextBox ID="txtActivatedOn" runat="server">
</asp:TextBox>
<a href="javascript:show_calendar('<%=txtActivatedOn.ClientID%>','<%=txtActivatedOn.Text%>');">
<img border="0" src="./Images/calendar.gif" alt="calendar" /></a>
</td>
<td>
</td>
<td>
<asp:Button ID="btnUpdateActivated" runat="server" Text="Update Date"
class="button" />
</td>
</tr>
</table>
<div id="grdWithScroll" style="OVERFLOW: auto" onscroll="SetDivPosition()">
<asp:GridView ID="gvProjects" runat="server" AutoGenerateColumns="False" Height="150px"
Width="225px" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDeleting="gvProjects_RowDeleting"
DataKeyNames="ID" ViewStateMode="Inherit">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chk_All" runat="server" AutoPostBack="true" OnCheckedChanged="chk_All_CheckedChanged"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk_selector" runat="server" AutoPostBack="true" OnCheckedChanged="chk_selector_CheckedChanged" Checked='<%#bool.Parse(Eval("Proj_Flag").ToString() == "True" ? "True": "False") %>'/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lbl_ID" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProjectID" Visible="true">
<ItemTemplate>
<asp:Label ID="lblProjectID" runat="server" Text='<%# Bind("ProjectID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<%--<asp:TemplateField HeaderText="Order #">
<ItemTemplate>
<!-- <asp:Label ID="lblOrderNumber" runat="server" Text=''></asp:Label>-->
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="Title">
<ItemTemplate>
<a href="javascript:openPopup('DsProjectDetail.aspx?mode=1&cid=<%# Eval("ID") %>&prj=<%#Eval("Title")%>' )">
<%--<%#Eval("Title")%>--%>
<asp:Label ID="lblTitle" runat="server" Text='<%# Bind("Title") %>'></asp:Label></a>
</ItemTemplate>
<ControlStyle Width="400px" />
</asp:TemplateField>
<%-- <asp:TemplateField HeaderText="CompletionDate">
<ItemTemplate>
<asp:Label ID="lblCompletionDate" runat="server" Text='<%# Bind("CompletionDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="ConsultantID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblConsultantID" runat="server" Text='<%# Bind("CompanyID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField DeleteImageUrl="~/Images/Delete.gif" ButtonType="Image" ShowDeleteButton="True" />
</Columns>
</asp:GridView>
</div>
<input type="hidden" id="XPos" runat="server" />
<input type="hidden" id="YPos" runat="server" />
<table>
<tr>
<td>
<asp:Button ID="btnAddProject" runat="server" CssClass="button" Text="New Project"
onclick="btnAddProject_Click" />
</td>
</tr>
</table>
</div>
Javascript i am using are,
<script type="text/javascript">
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("grdWithScroll").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("grdWithScroll").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
<script type="text/javascript">
window.scrollBy(100, 100);
function foo() {
alert("ddd");
if (grdWithScroll != null) alert(grdWithScroll.scrollTop);
}
</script>
and at the end of the page load event i am using,
Page.ClientScript.RegisterStartupScript(GetType(), "MyKey", "SetDivPosition();", true);
i have added this line in
<%# Page Language="C#" MaintainScrollPositionOnPostback="true" ...
and also added in webconfig,
<system.web>
<pages maintainScrollPositionOnPostBack="true" >
</pages>
</system.web>
getting help from this link,
http://stackoverflow.com/questions/12092150/maintain-scroll-bar-position-of-a-div-within-a-gridview-after-a-postback
One think i wanna mention that "onscroll="SetDivPosition()" in div tag showing me warning that on scroll is not valid attribute for div tag
But after doing all this its not working for me firstly i populate gridview with dropdown when grid populate it shows check box column too in all rows that on checked save check box value in database and post back occurs if i am at bottom of grid it scroll to the top after post back
Hopes for your suggestion
Thanks

Concerned with datalist

I have a datalist. My designer code is like this.
<asp:DataList ID="dlView" runat="server" CssClass="basix" RepeatColumns="4" >
<ItemTemplate>
<tr>
<td>
<asp:Image ID="imgPlan" runat="server" ImageUrl='<%#GetImage(Eval("ImageName")) %>' />
</td>
<td>
<asp:LinkButton ID="lnkChangeLogo" runat="server" Text="ChangeLogo" CommandName="Select">
</asp:LinkButton>
<asp:LinkButton ID="lnkRemoveLogo" runat="server" Text="RemoveLogo"
OnClientClick="javascript:ConfirmChoice();return false;"/>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"/>
</td>
</tr>
</ItemTemplate>
</asp:DataList>
When I click btnUpload, I want to call one function in javascript, suppose its uploadimages(). I have to pass Eval("ImageName") in imgPlan, and ImageName also to javascript. How can I do that?
Untested:
<asp:Button ID="btnUpload" runat="server" onclick="UploadImages("<% Eval("ImageName") %>");" Text="Upload"/>
EDIT:
onclick might need to be OnClick or OnClientClick (and you may have to put "javascript:UploadImages"

Categories