We Keep Coding

How to pass id of a control in GridView to Jquery?

SCRIPT
<script type="text/javascript">
$(function () {
$(".ttip").hide();
$(".txttwo").keyup(
function () {
var one = $(this).val();
$(".ttip").fadeIn().text(one);
});
$(".txttwo").blur(
function () {
var one = $(this).val();
$(".ttip").hide();
});
});
</script>
CODE:
<asp:GridView ID="GridView1" runat="server" EnableModelValidation="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<p class="ttip bubble" class="bubble"></p>
<asp:TextBox ID="abc" class="txttwo tipin" runat="server" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
FIDDLE
http://jsfiddle.net/w96LX/7/
Also it would be just great if someone can tell me how can I set the width of bubble such that it expands according to the length of text.
I get tooltip for all the textboxes because I have used class. I need to show tooltip just for the one at a time.

Just use $(this).attr("id") to get the ID of an element. Also, apped display:inline-block; width: auto; to make the bubble as big as the content: http://jsfiddle.net/w96LX/26/
Update:
I did not see an ID in your HTML, just the server side code. You will need to append the ID to a HTML element to receive it. Or you generate inline javascript, that is calling a method to set the ID.

How do i preform a Jquery function after drop down list change?

I'm struggling to move into the change function after i have made a change to my drop down list?
<script type="text/javascript" src="ICCMJScripts/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#ddRequestCategory").change(function () {
//Do something
});
});
</script>
Here is my drop down list.
<ICCM:ICCMDropDownList style="width:185px;" runat="server" ID="ddRequestCategory" name="ddRequestCategory" TabIndex="1" AppendDataBoundItems="true" >
<Items>
<asp:ListItem Value="" Text="" Selected="True" />
</Items>
</ICCM:ICCMDropDownList>

You need to use ClientID as the html gererated by asp.net has different id then you have assigned.
$("#<%= ddRequestCategory.ClientID %>").change(function () {
//Do something
});
If you are using .net framework 4 or above then you can use ClientIDMode="static" to get the same id in the generated html by asp.net.

Add this to the code behind in the form load.
DropDownListName.Attributes.Add("onchange", "jsFunctionName();");
When the DropDownList selectedItemIndex is changed then your function is called and you can do what ever you need from there.

Use ON function to trigger the event.
$(document).ready(function(){
$('#selectID').on('change', function(){
console.log($(this).val());
});
});
demo: http://jsfiddle.net/9eDS7/

how to change aspx with javascript functions from aspx.cs?

I am working on an asp.net web app project, and I have a button which is using javascript for drop down menu:
<asp:Button ID="BtnPlant1" runat="server" Width="160px" BackColor="Transparent"
Height="40px" CssClass="buttonStyle" onmouseover="MM_showMenu(window.langT,0,40,null,'BtnPlant1');"
onmouseout=MM_startTimeout();/>
And I have a dropdown list for change drop down menus.
For example when dropdownlist.SelectedItem.Text == "langE" I want to change onmouseover to this:
onmouseover="MM_showMenu(window.langE,0,40,null,'BtnPlant1');"
// ^-- (langE, not langT)
How can I do this? Any idea? Thanks...

You should have jquery... so try something like this:
<asp:Button ID="BtnPlant1" runat="server" Width="160px" BackColor="Transparent"
Height="40px" CssClass="buttonStyle" onmouseover="showMenu()"
onmouseout=MM_startTimeout();/>
javascript:
function showMenu() {
if($('.dropdownlist').val() == "langE")
MM_showMenu(window.langE,0,40,null,'BtnPlant1');
else
MM_showMenu(window.langT,0,40,null,'BtnPlant1');
}
$('.dropdownlist').change(function() {
showMenu();
}
Not testet!....

The solution:
function showMenu() {
if($("#ddlistid option:selected").text() == "langE")
MM_showMenu(window.langE,0,40,null,'BtnPlant1');
else
MM_showMenu(window.langT,0,40,null,'BtnPlant1');
}

javascript function make a full postback in an update panel

I call the following javascript function in an update panel which refresh my page although it is in an update panel!!
<script type="text/javascript" language="javascript">
function get_emp_num(source, eventArgs) {
var txt_emp_num = "<%= txt_RequestEmpNum.ClientID %>";
document.getElementById(txt_emp_num).value = eventArgs.get_value();
__doPostBack("<%=txt_RequestEmpNum.ClientID %>");
}
function get_person_num(source, eventArgs) {
var txt_person_num = "<%= txt_RequestPersonNum.ClientID %>";
document.getElementById(txt_person_num).value = eventArgs.get_value();
__doPostBack("<%=txt_RequestPersonNum.ClientID %>");
}
</script>
I don't want this script to change the partial post back behavior of my update panel .how to do that ?

What is your postback control and is it setup as an async trigger on the update panel? Based on the code you posted, I suspect that txt_RequestEmpNum and txt_RequestPersonNum are text boxes. Those controls don't natively support postbacks. What you need is a hidden button on the page that your javascript will "click" to send the postback. Something like this:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txt_RequestEmpNum" runat="server" />
<asp:TextBox ID="txt_RequestPersonNum" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<div style="display: none;">
<asp:Button id="Button1" runat="server" OnClick="Button1_Click" />
</div>
<script>
function get_emp_num(source, eventArgs) {
// I am unsure what your intent was with the code here so I removed it
__doPostBack("<%=Button1.UniqueID %>", "");
}
function get_person_num(source, eventArgs) {
// I am unsure what your intent was with the code here so I removed it
__doPostBack("<%=Button1.UniqueID %>", "");
}
function refresh_using_jquery() {
__doPostBack($('#<%=Button1.ClientID %>').attr('name'), '');
}
</script>

If you're looking to not do a full page postback then you'll want to implement a solution that uses AJAX. I would go with using jQuery because it makes using AJAX somewhat easier (in my opinion, anyway).

Regarding 'this' keyword in JavaScript

In my web page I've a Linkbutton with OnClientClick event as show below.
<asp:LinkButton ID="lnkbtn" Text="Click" runat="server" OnClientClick="dosomething(this.Text)" />
and I've defined the function as shown below in the head section of the web "page
<script type="text/javascript">
function dosomething(ObjCntxt)
{
alert(ObjCntxt.toLocaleString());
var textval = ObjCntxt;
alert(textval.value);
}
</script>
When i run the page and click on the LinkButton i'm getting the message undefined.
I request you all kindly solve my problem.
Thanks & Regards.

This works for me:
<script type="text/javascript" language="javascript">
function doSomething(ObjCntxt) {
alert(ObjCntxt); // Text
alert(ObjCntxt.toLocaleString()); // Text
alert(ObjCntxt.toString()); // Text
alert(ObjCntxt.value); // undefiend
}
</script>
<asp:LinkButton ID="lnkbtn" Text="Click" runat="server" OnClientClick="doSomething(this.text);">Text</asp:LinkButton>
Remember, that the content of doSomething is JavaScript, not .NET, so you should use JavaScript members, such as this.text not this.Text
What do you expect from ObjCntxt.value?? Christmas gift?

Try this One
<script type="text/javascript" language="javascript">
function doSomething(ObjValue) {
alert(ObjValue); // Text
}
</script>
<asp:LinkButton ID="lnkbtn" Text="Click" runat="server" OnClientClick="doSomething(this.value);">Text</asp:LinkButton>