Regarding 'this' keyword in JavaScript - 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>

Related

how to call a JS function on a asp:LinkButton click event

I have this JS function that loads whenever the page loads:
<script type="text/javascript">
window.onload = function () {
<asp:Literal ID="LiteralGraph01" runat="server"></asp:Literal>
<asp:Literal ID="LiteralGraph_ft01" runat="server"></asp:Literal>
</script>
How can I invoke this function from a asp:LinkButton click? The link button is called filtroCombinado:
<asp:LinkButton ID="filtroCombinado" runat="server"></asp:LinkButton>
Thanks for your help!
<asp:LinkButton... is rendered as an anchor (<a href=...). If you want to run some JS onload and onclick do something like this.
<script type="text/javascript">
window.onload = function myFunc () {//nobody blames you when you name the function
<asp:Literal ID="LiteralGraph01" runat="server">some data I fill in from server (and replace this text)</asp:Literal>
<asp:Literal ID="LiteralGraph_ft01" runat="server"></asp:Literal>
return false; //avoid sending request to the server
}//close the function
</script>
...
//do something before sending request to the server
<asp:LinkButton ID="filtroCombinado" runat="server" OnClientClick="return myFunc();"></asp:LinkButton>
Try this:
<script type="text/javascript">
var onLoadFunction = function () {
<asp:Literal ID="LiteralGraph01" runat="server"></asp:Literal>
<asp:Literal ID="LiteralGraph_ft01" runat="server"></asp:Literal>
</script>
<asp:LinkButton ID="filtroCombinado" runat="server" onClientClick="onLoadFunction()"></asp:LinkButton>

ASP.NET can't resolve javascript function

How could I run javascript on changing value of ASPxComboBox?
I tried this:
<dx:ASPxComboBox ID="cbx_Organization" runat="server" ValueType="System.String"
AutoPostBack="True" OnSelectedIndexChanged="handleOrganizationChange()" Width="230px">
</dx:ASPxComboBox>
<script type="text/javascript">
function handleOrganizationChange() {
__doPostBack("<%= cbx_Organization.Value %>", "Load_Executives");
}
</script>
but Index.aspx does not contain a definition for handleOrganizationChange().
I think you are using inappropriate syntax. Instead of using OnSelectedIndexChanged attribute try using onchange="javascript:handleOrganizationChange()"attribute and that should work fine..
Try this one
<dx:ASPxComboBox ID="cbx_Organization" runat="server" ValueType="System.String" Width="230px"> <ClientSideEvents SelectedIndexChanged="function(s, e) { handleOrganizationChange(); }" />
</dx:ASPxComboBox>

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/

Setting text in Ajax toolkit htmleditorextender on button click event

I have been trying to figure this out for most of a day, so any help will be very very welcome...
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(function () {
ChangeText("This is the changed text from the document ready function");
});
function ChangeText(newText) {
var editorControl = $("#txtHTMLEditor");
editorControl[0].value = newText;
}
</script>
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div id="divTemp" style="display: block">
<asp:TextBox runat="server" ID="txtHTMLEditor" TextMode="MultiLine" Rows="25" Width="100%" Text="<b>This is test text</b>" /><br />
<ajaxToolkit:HtmlEditorExtender ID="htmlEditorExtender1" TargetControlID="txtHTMLEditor" runat="server" DisplaySourceTab="true">
</ajaxToolkit:HtmlEditorExtender>
</div>
<input type="button" onclick="ChangeText('This is the changed text from the button click event'); return false;" value="Perform Change">
</div>
</form>
The above code changes the text in the html editor perfectly in the document ready event, but does nothing if I click the button.
Both events fire the same javascript function (ChangeText()), with the value of the text area being changed in both instances, but the change does not show in the text area in the case of the button click event.
Any ideas why not?
You need to change the text via the HTMLEditorExtender's client side interface:
function ChangeText(newText) {
var editorControl = $find("<%=htmlEditorExtender1.ClientID%>");
editorControl._editableDiv.innerHTML = newText;
}
Location of the HTML contents of the HtmlEditorExtender may have changed over time. This is how I did it in version 7.1005 of the toolkit.
var htmlSource = $('#<%= DescriptionEnglishEditor.ClientID %>Extender_ExtenderContentEditable').html();
$('#<%= DescriptionFrenchEditor.ClientID %>Extender_ExtenderContentEditable').html(htmlSource);
The key is to locate the object in the DOM that is storing the HTML and reference it correctly.

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).

Categories