DropDownList Client-side onchange stops Server-side SelectedIndexChanged event - javascript

How to call the clientside script and server-side script at same time.
I cannot able to use both at same time.
<asp:DropDownList ID="ddlModule" runat="server" Width="200px" AutoPostBack="True"
OnSelectedIndexChanged="ddlModule_SelectedIndexChanged" />
In Page_Load
ddlModule.Attributes.Add("onchange", "javascript:return validateDropDown('" + ddlModule.ClientID + "');");
if client script execute then server side not working.
Please Help..
Thanks,

One solution: in your validateDropDown JavaScript function you can postback the page
<script language='Javascript'>
__doPostBack('__Page', 'MyCustomArgument');
</script>
Here is a reference link How to call Postback from Javascript

Related

Trigger c# Event from JavaScript Function

I'm trying to call c# event from javascript function. I tried this:
<script type="text/javascript">
function LikeClick() {
document.getElementById('<%=Helper.ClientID %>').click();
}
</script>
<asp:Button ID="Helper" runat="server" OnClick="Helper_Click" />
But it doesn't trigger the c# event.
I believe a <asp:Button> will natively post the form back without a client side event handler. You need a control that does not natively post back but instead uses a client side click handler to call the __doPostBack() function.
Change
<asp:Button ID="Helper" runat="server" OnClick="Helper_Click" />
to this
<asp:LinkButton ID="Helper" runat="server" OnClick="Helper_Click" />

Set asp.net textbox value using javascript

I want to set the value of a asp.net textbox using javascript
My JS Code is:
document.getElementById('<%=txtFlag.ClientID %>').value = "Track";
My textbox is:
<asp:TextBox ID="txtFlag" runat="server" Visible="False"></asp:TextBox>
But it gives me an error document.getElementById(...)' is null or not an object
I dont understand what is wrong.
Please help.
<asp:TextBox ID="txtFlag" runat="server" Visible="False"></asp:TextBox>
Setting visible=false will cause this textbox to not appear in the rendered page. Remove this, and add display:none;
<asp:TextBox ID="txtFlag" runat="server" style="display:none;"></asp:TextBox>
Try including the ClientIDMode property in your textbox
<asp:TextBox ID="txtFlag" runat="server" Visible="False"
ClientIDMode="Static"></asp:TextBox>
You are calling javascript before complete document load. Please write your javascript code on document.ready function like this
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
document.getElementById('<%=txtFlag.ClientID %>').value = "Track";
});
</script>
And second thing is that use display none in place of visible false or use hidden field control
<asp:TextBox ID="txtFlag" runat="server" style="display:none;"></asp:TextBox>
Solution 1:
Make that textbox as visible=true and try,
When you make a control as visible false, that control will not be loaded in client side and as you knew javascript will be executed on client side itself.
Solution 2:
Add this javascript at the end of the page.
document.getElementById('txtFlag').value='Track'
try this

OnClientClick event in In ASP.NET

I'm using ASP.NET to pass a value to a JavaScript function and, for some reason I haven't been able to determine, it isn't working when I try to pass in a value from another control. Instead, it acts like there is a syntax error and it just submits back to the main form.
Does anyone know why?
Example:
<asp:TextBox ID="txtToSay" runat="server" Text="Something"></asp:TextBox>
<asp:Button runat="server" ID="btnSaySomething1" Text="Say Something"
OnClientClick="saySomething(<%=txtToSay.Text%>);" /> <!-- doesn't work -->
<asp:Button runat="server" ID="btnSaySomething1" Text="Say Something"
OnClientClick="saySomething('<%=txtToSay.Text%>');" /> <!-- doesn't work -->
<asp:Button runat="server" ID="btnSaySomething2" Text="Say Something"
OnClientClick="saySomething('Something');" /> <!-- works -->
<script type="text/javascript">
function saySomething(txt){
alert(txt);
};
</script>
Additional Information:
Web Application running on .NET 4.0
Language: C#
Update:
After working with this a while, I've determined that you can't use <%%> tags in ASP controls. Additionally, if you're looking for dynamic evaluation of control values AVOID AVOID AVOID using <%=someControl.Text%> or similar constructs since they are only evaluated once a request is submitted to the server. If you need a static value from another control at runtime, simply set that value in the page load event or handle it another way in the code behind.
Javacript will search for variable name = txtToSay.Text in saySomething function call, Put quotes around it to make it string value
Change
OnClientClick="saySomething(<%=txtToSay.Text%>);"
To
OnClientClick="saySomething('<%=txtToSay.Text%>');"
You can get the txtToSay.Text without passing it this way
<script type="text/javascript">
function saySomething(txt){
alert(document.getElementById('<%=txtToSay.Text%>').value);
};
</script>
you need to put ' around your text in the saySomething() call.
Like this:
<asp:Button runat="server" ID="btnSaySomething1" Text="Say Something" OnClientClick="saySomething('<%=txtToSay.Text%>');" />
UPDATE
<%= %> won't work inside an asp.net control. Can you set it from the code-behind?
I.E
btnSaySomething1.OnClientClick = "Text to say"

Unable to call Javascript function onload a asp:button using ASP.NET4

I am unable to call a Javascript function on the OnLoad event of a asp:button
HTML
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " onLoad = "AllHide()" OnClientClick ="ShowCal()" />
Javascript
function AllHide() {
alert("Hello");
}
Please Help
You will need to use JavaScript to toggle styles like you are trying
<asp:Button ID="btnFromCalOpen" runat="server" Text="" OnClientClick ="ShowCal()" style="display:none;visiblity:hidden;" />
Original Comment You can't do onLoad with JavaScript for any button. What are you hoping to accomplish? We can help figure out that solution.
You can do it at the page level. The page has a javascript onload event.
You can't do that.
Here's why. The OnLoad event in ASP.NET for a control is fired while the server is building the page (on the web server), but before it sends it to the browser (running on the user's machine).
Code on the web server can't directly call code on the browser computer (which hasn't even got the page yet).
If you just want to hide the control, just do this in your markup:
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " visible="false" OnClientClick ="ShowCal()" />
Another approach (hidden control doesn't takes up space):
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " style="display:none;" OnClientClick ="ShowCal()" />
Another approach (hidden control takes up space)
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " style="visibility:hidden;" OnClientClick ="ShowCal()" />

Populate a TextBox from a DropDownList selection ASP.NET/Javascript

I have a DDL and ASP.NET Textbox. I would like to populate the text box with the option I choose from the DDL. I need this to be instant and not use postbacks so it would seem JavaScript would be the obvious choice here. I have done quite a bit of searching but everything I have found seems to be for standard HTML (Selects and Inputs) and these do not appear to work with ASP objects:
<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" DataTextField="FullName" />
<asp:TextBox runat="server" id="txtSalesPerson" />
My DDL is populated from SQL in the code-behind page.
Can somebody assist with the appropriate code I should use? Thanks.
ASP.Net controls render as standard HTML elements on the browser. In script, you can get a reference to them by using the ClientID property of the ASP.Net control.
Put this in a script block in your aspx:
var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');
Now you have references to the DOM objects for the select and input elements that the ASP.Net controls rendered and you can use the techniques you've already learned on the HTML elements.
Additional info
You need to add an onchange attribute to your DropDownList control as such:
<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" onchange="ddlChange();" DataTextField="FullName" />
and then put this script block in your aspx
<script type="text/javascript">
function ddlChange()
{
var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');
textBox.value = ddl.options[ddl.selectedIndex].text;
}
</script>
As you change the dropdown list, you'll see the textbox update. Tested in IE and Chrome.
Since you've pointed out that you're a JavaScript beginner, may i suggest you use an updatepanel control. An updatepanel allows you to execute server code without refreshing the page. Simply place the dropdownList and the textbox in the same updatepanel or in two separate updatepanels and write the code for the textbox to update based on the dropdownlist selection. Make sure to set the dropdownlist to do autopostback.
The asp markup is as follows:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlList" runat="server"
AutoPostBack="True">
<asp:ListItem>-select-</asp:ListItem>
<asp:ListItem>option 1</asp:ListItem>
<asp:ListItem>option 2</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtTextBox" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
The codebehind in vb is as follows:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If ddlList.Text <> "-select-" then
txtTextBox.Text = ddlList.text
End If
End Sub
If you're new to JavaScript, use the jQuery library (simply provide references to the CDN-hosted jQUery files at google.com) and then you can use the following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$("#DDLSalesPerson").change(function () {
$("#txtSalesPerson").val($(this).val());
});
</script>

Categories