We Keep Coding

asp button to call java script function

I am a new developer of asp.net, now I have a problem on the issue of how to call java script function in asp.net. (I am lack of java-script)
I have a java-script code that will show the confirm modal popup like this
$('#modals-bootbox-confirm').click(function()
{
bootbox.confirm("Are you sure?", function(result)
{
$.gritter.add({
title: 'Callback!',
text: "BootBox Confirm Callback with result: " + result
});
});
});
I have known that this script binds to item with id "modals-bootbox-confirm" like
<input type="button" id="modals-bootbox-confirm" name="Hello"/>
but in asp the button will be initial with type = "submit" it cannot call this because after click the button it will postback all the time so how to use this script in asp.net
I have tried to change the id in the script to the asp's id but it does not work. How do I get the result from this modal control? Please help.
I know that asp has onClientClick but how to apply this script to it?

its easy man,
Just do this
<asp:Button Id="aa" runat="server" onClientClick="function1();"/>
//and it Javascript turn it into function:
<script>
function1()
{
bootbox.confirm("Are you sure?", function(result)
{
$.gritter.add({
title: 'Callback!',
text: "BootBox Confirm Callback with result: "+ result
});
});
}
</script>

This is how to use OnClientClick:
<asp:Button OnClientClick="doSomething()" runat="server" />
Source: http://www.w3schools.com/aspnet/prop_webcontrol_button_onclientclick.asp

Very Short and Simple:
<asp:Button ID="Button1" runat="server" OnClientClick='return confirm("Are You Sure?")' />

asp linkbutton cssclass selecting using javascript

I have three linkbuttons when the user selects the current link it should be red.but at present it even makes the visited link also red which should not be the case.can any one help regarding this?
<li>
<asp:LinkButton ID="lnkCat1" runat="server"
OnClick="lnkCat1_Click" CssClass="mylink"
OnClientClick="return changeColor();"></asp:LinkButton></li>
<script type="text/javascript">
function changeColor(e) {
e.style.color = "red";
}
}
</script>

try this code:
Please include jquery first
css
.red {
color: red;
}
javascript:
<script type="text/javascript">
function changeColor(e) {
$('.red').removeClass('red');
$(e).addClass("red");
}
</script>

this is raw javascript code, i.e. you don't need libraries like jQuery.
<li>
<asp:LinkButton ID="lnkCat1" runat="server"
OnClick="lnkCat1_Click" CssClass="mylink"
OnClientClick="return changeColor(this); return false;"></asp:LinkButton></li>
<script type="text/javascript">
function changeColor(e) {
e.style.color = "red";
}
</script>
this line
OnClientClick="return changeColor(this); return false;"
will pass the link element to the javascript function changeColor, and immediately return false, so the link's default action (visiting another page) never happens. (this may be different for IE)
your actual function also had an extra } in it.
I'd use something like Firebug or Chrome's developer tools, so you can view javascript errors as they appear

c# how to enable button ontextchange without posting back

so i have a lightbox in which pops up an aspx page with textboxes and two buttons (submit - disabled and cancel - enabled). I wanted to enable my submit button ontextchange. it works fine when opened separately (not as a lightbox) but when i let it run normally with the lightbox function everytime ontextchange gets triggered the whole page refreshes disabling the lightbox.
<asp:TextBox ID="textBox1" runat="server" OnTextChanged="OnTextChanged_AttributesEdited" autopostback="true">
protected void OnTextChanged_AttributesEdited(object sender, EventArgs e)
{
btnSubmit.Enabled = true;
}
now if i take out the "autopostback=true" it then will not trigger the the ontextchanged. was wondering if is it better if javascript will be the way to go for enabling the button or is there a way where i can prevent the postback when ontextchanged is triggered?
thanks a lot!

I think this would be a prime use for some jQuery in your application. Without posting back to the server for enabling / disabling a button, this would look a lot smoother, load faster and keep your current page state intact. An example might be as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#textBox1").change(function() {
$("#btnSubmit").removeAttr("disabled");
});
});
</script>
Just put the above script tag in your HTML, just before closing the body tag.
An even better solution, however, would be to assign a specific CSS class to all the textboxes that should inherit that behaviour. Assuming that you assign a CSS class called "someCssClass" to all those textboxes, your script would then look something like this:
<script type="text/javascript">
$(document).ready(function() {
$("input.someCssClass").change(function() {
$("#btnSubmit").removeAttr("disabled");
});
});
</script>

I'd use jQuery as mentioned by #FarligOpptrenden, but if you don't have it and just want plain javascript, this should work.
Input within your lightbox:
<input type="text" id="textbox" onKeyUp="enableSubmitButton()" />
<input type="button" id="submitButton" value="Submit" />
<input type="button" id="cancelButton" value="Cancel" />
Javascript:
<script type="text/javascript">
function enableSubmitButton()
{
document.getElementById('submitButton').disabled = false;
document.getElementById('cancelButton').disabled = true;
}
</script>
You could also do your enabling/disabling buttons on load in javascript:
<script type="text/javascript">
window.onload = function () {
document.getElementById('submitButton').disabled = true;
document.getElementById('cancelButton').disabled = false;
}
</script>

Click ASP.NET button from jQuery dialog button event

I have the following ASP.NET markup:
<div id="myForm" title="My Form" style="display: none">
<span>You can see me!</span>
<div style="display: none">
<asp:Button ID="btnSave" runat="server" Text="Button"
OnClick="btnSave_Click" />
</div>
</div>
<!-- called by an element click event elsewhere -->
<script type="text/javascript" language="javascript">
$("#myForm").dialog({
modal: true,
width: 500,
height: 200,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Save": function () {
$(this).dialog("close");
// I want to call btnSave_Click (by DOM-clicking the button?)
}
}
});
$("#myForm").parent().appendTo("form:first");
</script>
I'm trying to get the jQuery.dialog generated buttons to perform the postback in place of the ASP.NET button. What should I do to make the button do a submit and call the btnSave_Click method?
EDIT
"Save": function () {
$(this).dialog("close");
document.getElementById("<%=btnSave.ClientID %>").click();
}
... works but is this the best solution?

$("#<%=btnSave.ClientID %>").click();

You can use the btnSave.ClientId property to emit to the javascript the ID of the control you are looking for, then you can do something like this. This is if you want the btnSave control to register as a postback control, triggering the "Click" event in the code behind.
var myControl = document.getElementById('theclientidgoeshere')
myControl.click();
That will do it!
If you want to do a simple postback you can do
this.document.form.submit();
but that will NOT register any events for the button.
Is This Best?
For .NET 3.5 and earlier it is the only "truly" safe ways to get the client ID. With jQuery you could do a partial id match on _btnSave, but I find that that is too risky for future modifications.
.NET 4.0 does introduce an option that might help.
.NET 4.0 ClientIDMode Property
In .NET 4.0 you have an optional ClientIDMode Property that will allow you to choose how the client id is created. You can use Predictable or Static options to allow you to hard-code the id of the button into your JavaScript.

Simulate a another button postback inside a jQuery dialog

I have the following ASPX page:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
$(this).dialog('close');
__doPostBack('TreeNew', '');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
;
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="Nuevo" OnClientClick="ShowDialog(); return false;"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Text</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
When the user click on TreeNew button appears the modal dialog, then he/she choose an option an click Ok button to do a postback.
I need that the server side execute TreeNew_Click method: How can I do that?
If I use __doPostBack('TreeNew', '') it throws me the following error: "Object expected".
UPDATE:
I found the origin for the error: the function __doPostBack is not defined. I'm not going to delete the question because I think Chris Clark's answer is so interesting.

As a rule, if you find yourself ever typing the text "__doPostBack(...", you should re-evaluate your approach.
In this case, you should just put a server-side asp.net button inside the div that you are turning into the dialog and use that instead of the generates jQuery button. That way the postback code will get wired up for you. There is one caveat however - when jQuery turns your div (I'm going to assuming it's a div) into a dialog, it rips the div out of the form element. That means you have to attach it BACK to the form BEFORE the postback occurs. You can do that in the close function of the dialog. The postback will then occur properly.
If you really want to use the generated jQuery OK button, you have a couple of options. First, you can slap a server-side asp.net button on the page and hide it, then call the asp.net button's click event from the OK button's code. Second, you can emit a javascript function form the server using Page.ClientScript.GetPostBackEventReference that will contain the __doPostBack code that you were trying to hand-write above. Then call that emitted function from the OK button's JS code.