We Keep Coding

jquery span button saying "Button1_Click is not defined"

using Visual.Web.Developer.2010.Express;
using SQL.Server.Management.Studios.R2.Express;
What I'm trying to do, is get a button to run some C# when a button is clicked.. Sounds simple, right?.. I'm stuck at this part.
I have a span (Jquery UI button) being created when the user keypress's in an HTML input. As soon as they click the span, it saves what the user inputed and sends it to the database... Well, not quite yet. I'm building this and I'm stuck at this part.
One would attach the button click via attribute in the span tag, correct?
<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="float:left" onclick="Button1_Click"></span>
C#
protected void Button1_Click(object sender, EventArgs e)
{
Console.WriteLine("Hello World");
}
Looks pretty simple, right? When I run this in debug, Firebug reads "Button1_Click is not defined"
...
Give me some insight here please!
My HTML/Javascript code
<script type="text/javascript">
$(document).ready(function () {
$('.hexen').after('<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="float:left" onclick="Button1_Click"></span>')// ui icon
.keypress(function () {
$(this).next('.saveButton').show();
}); //adds ui icon
$('.ui-state-default').hover(
function () {
$(this).addClass('ui-state-hover');
}, function () {
$(this).removeClass('ui-state-hover');
}); //ui icon hover
$('.saveButton').click(function () {
var id = $(this).prev().attr('id'); //used in the "data" attribute of the ajax call
var value = $(this).prev().val(); //used in the "data" attribute of the ajax call
$.ajax({
type: "POST",
url: "Default.aspx",
data: "{Id: " + id + ", Value: " + value + "}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
}
});
$(this).hide();
}); //runs ajax call and removes ui-icon after .saveButton is clicked
}); //end .ready
</script>
<input type="text" class="hexen" id="investigate1"/><br />
<input type="text" class="hexen" id="investigate2"/><br />
<input type="text" class="hexen" id="investigate3"/><br />
<input type="text" class="hexen" id="investigate4"/><br />
<input type="text" class="hexen" id="investigate5"/>
Thanks in advance!

Button1_Click is a server side button click handler which you cannot call it from client side using onclick attribute.
onclick will always look for handler or method on the client side JavaScript code.
You have to use Asp.Net button control which will render the necessary method on the page to perform postback to the server.
Once you click on Asp.Net button it will submit the current page to the server with necessary details to asp.net framework so that it will execute the required button click handler.
E.g. You can use LinkButton control like this and specify OnClick property to Button1_Click and OnClientClick property to call any client side javascript method.
<asp:LinkButton Text="Click me!"
OnClick="Button1_Click" runat="server"
OnClientClick="clientSideJavaScriptFunction()" />

From the look of it you don't need the 'onclick' handler for the span since you're binding to it in the javascript anyway:
$('.saveButton').click(....);
Also the onclick handler that you've got on the space is referencing a server side handler for C# events, not a client side handler for javascript events. The value of onclick must be a function available to the client side code in javascript. If you want to post data to the server on a button click then you need to do an AJAX request (like you are) in the javascript.
Finally the event handler you've trying to bind to .saveButton in the javascript won't work as you're trying to bind it (probably) before the document has finished loading. Move the event binding into the document.ready block after you've called after on .hexen.

I'm not sure exactly how it works in C#, but I think you need to reference the function in the URL of the ajax call.
url: "Default.aspx/Button1_Click",
Button1_Click may have to be a public function for this to work.
EDIT: Check out the "Calling the page method with jQuery instead" section of this page: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Pop up warning message

I would like to have a nice pop up warning that says "Are you sure you want to overwrite this file? Yes No. Is there any way to do this with telerik or Ajax Tool Kit?. I want to be able to control it on the server side too with c#
Thank you

one way could be
1) create a div like a popup
2) display the popup when some events occurs (like button click)
3) if users click ok then doing somethings on server side
4) if users click no then hide the div
Here some code, sorry if there is some error but i don't have the environment on my hands.
<head>
<script type="text/javascript">
function showConfirm()
{
var popup = document.getElementbyId('popup');
popup.style.display = '';
}
function hide()
{
var popup = document.getElementbyId('popup');
popup.style.display = 'none';
}
</script>
</head>
<body>
<form runat="server" id="form1">
<div id="popup" style="display:none">
<p>bla bla bla</p>
<asp:button id="btn_ok" runat="server" OnClick="ServerRountine_Click"/>
<asp:button id="btn_ko" runat="server" onclientclick="hide();"/>
</div>
<asp:button id="btn_overwrite" runat="server" onclientclick="showConfirm();"/>
</form>
</body>

You can try:
jConfirm(message, [title, callback])
http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

You can put an OnClick (or OnClientClick if it's a serverside control) event on your submit button like the following:
<input type="button" value="Submit new file" onclick="if(confirm('Are you sure you want to overwrite this file?')) return false;" />

I'd prolly use asp modalpopup for this ;p
... but yeah you want to do it with ajax etc.
I think you'd love jq-ui then.
It is almost the same as above , but it will style the popup at the same time;p
$("#modEdit").dialog({//modEdit is your Div with any controls.
autoOpen: false,//Properties
width: 600,
show: "fade",
hide: "fade",
modal: true,
buttons: {//Buttons
"Save Changes": function () {
ModSaveChanges();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
Syntax looks in short like this $(control).dialog({properties,buttons:{btn1,btn2}}); etc
really easy, I really recomend it ^^ :D
I have used it for my Mobile Apps;p
Oh and you might also then take a look into Sencha Ext ;p

javascript on asp button control

i am using asp button control to call a javascript function. but it is not working. it is showing an error
i am calling javascript function as:
<asp:button ID="Button1" runat="server" Text="Button" onclick="rock()" />
the javascript function is as:
function rock() {
var username = prompt("what is your name?", "please enter your name here");
if (username) {
alert("nice to meet you," + username + ".");
}
}
is there any way to call javascript function on asp button?

onclick links to a server method, you want onclientclick. If you had a simple HTML control which was not a server control, you can use onclick but it has a different meaning when it's an ASP.net control.
Fixed code:
<asp:button ID="Button1" runat="server" Text="Button" onclientclick="rock()" />

Change this:
onclick="rock()"
To:
onclientclick="rock()"
Depending on your code, you may need to set CausesPostback = false;

ASP.Net Submit Button Not Executing Inside jQueryUI Dialog-Content Loaded From Another Page

I am trying to add a few functions to a ASP.NET page using jQuery UI's dialog. I am attempting to display 3 separate dialogs which allow a user to add or edit a contact's address, phone, or email information.
I have a UserView page which contains the jQuery, a GridView, and the DIVs I load the controls into. I am using jQuery's .load(url + '#DIV', function... capability to load the 3 boxes from a second page called UserFunctions.
The boxes all load and are populated correctly with data, however, the save button does not submit the changes skipping the button's click command. Is there a way to do this? Can I manually call postback from the jQuery dialog? I would like to stay away from IFrames if at all possible.
UserView jQuery Code
$('#addPhone').load('/Administration/UserFunctions.aspx?Mode=edit&Record=1' + ' #PhoneAdd', function () {
$(this).dialog({
modal: true,
autoOpen: false,
draggable: true,
width: 600,
open: function (type, data) {
$(this).parent().appendTo("form:first");
},
buttons: {
"Close": function () { $(this).dialog("close"); }
}
});
});
UserView and Show Dialog Button
Add Phone<br /><br />
<div id="addPhone">
</div>
UserFunction DIV that is loaded
<div id="PhoneAdd">
<p><span class="Type">Phone Type
<asp:DropDownList ID="ddPhoneType" runat="server" Width="205px"
DataSourceID="odsPhoneType" DataTextField="PhoneName"
DataValueField="PhoneTypeID">
</asp:DropDownList>
<asp:ObjectDataSource ID="odsPhoneType">
</asp:ObjectDataSource>
</span></p>
<p><span class="Number">Number
<asp:TextBox ID="ttPhoneNumber" runat="server" Width="100" ></asp:TextBox></span>
<span class="Extension">Extension
<asp:TextBox ID="ttPhoneExtension" runat="server" Width="50" ></asp:TextBox></span></p>
<p><span class="PhoneSubmit"><asp:Button ID="btnPhoneSubmit" runat="server"
Text="Save" onclick="btnPhoneSubmit_Click" />
</span></p></div>
UserFunction Button Click Event (which does not fire)
protected void btnPhoneSubmit_Click(object sender, EventArgs e)
{
if (qString == "insert")
{ //insert to database. Code removed to save room. }
if (qString == "edit")
{ //update database}
}
The Code Behind above never runs (tested by attempted to debug the if statement).
Thank you in advance for your help. I appreciate it very much.

The problem here is, since you modal box are ajax requests they are not posting back to their respective pages but instead posting back to the parent page (UserView).
You could possibly handle this by putting a form in your modal and have it post to another page and handle the form inputs there.
<form action="/User/PostPhone.aspx" method="post">
//form elements in here
</form>
Then your PostPhone.aspx code behind will have do something like:
if (IsPostBack)
{
var phoneNumber = Request["phonenumber"];
//save phone number
}

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.