On my aspx page I have two buttons. One calls some javascript and the other calls a C# function on the code-page. When I call the javascript file in the head of the document, the JavaScript function works well but the C# does not. Clicking on the button does not do anything. If I remove the javascript call then the C# function works normally.
How can I overcome this? It seems as if it is expecting to find the C# function within the JavaScript file.
ASP:
<head>
<script src="MyFunctions.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<asp:Button id="btn1" Text="Submit" runat="server" OnClick="buttonSumbit_Click" />
<asp:Button id="btn2" Text="Show" runat="server" OnClientClick="buttonShow_Click()" />
</body>
C#:
protected void buttonSumbit_Click(object sender, EventArgs e)
{
//SOME CODE HERE
}
JavaScript:
function buttonShow_Click()
{
//SOME CODE HERE
}
You need to put all Asp.Net server controls inside a <form runat="server"></form> tag
You need to modify your javascript function call to be like this
<asp:Button id="btn2" Text="Show" runat="server" OnClientClick="return buttonShow_Click()" />
and make sure that your javascript function returns true so postback (execute C# function) happens. If your javascript function return false, postback to server won't happen.
I Suggest you to use this for calling javascript functions:
OnClientClick="if(!hidepopup())return false;"
you can also call javascript functions from codebehind:
Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function", "jsfunction();", true);
Related
I have a simple web form with a single button:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWeb.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://unpkg.com/showmodaldialog"></script>
<script>
function showPopup() {
var ret = window.showModalDialog("Popup.aspx");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
How do I make that button open Popup.aspx with ShowModalDialog Polyfill from https://github.com/niutech/showModalDialog?
I tried Default.aspx.cs like this:
using System;
namespace DemoWeb
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("OnClick", "showPopup()");
}
protected void Button1_Click(object sender, EventArgs e)
{
}
}
}
It works in IE with old showModalDialog, but in Chrome popup appears and immediately disappears.
Well, if you button click is to run server side code, then you get a full page post back, and that will re-load the page.
But, you CAN have that asp.net button call 100% browser side code and NOT run the button click event stub on the server.
You can use this format:
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="showpopup()";return false;" />
</div>
<script>
function showpopup() {
var ret = window.showModalDialog("Popup.aspx");
}
</script>
</form>
So, when you click on the asp.net button, it will call the client side function. (you use OnClientClick(). Also, we added a return false to that click event, and this will prevent the server side Button1_Click event from running. However, you can have the js code return true or false, and if the routine returns true, then the button_click (server side) code will run, but if your js returns false, then the server side event code will not run.
Also, showModalDialog has been REMOVED from most browsers. So it will not work. I suggest you adopt jQuery and also adopt jQuery.ui, and use that to pop up a dialog.
Also if a browser STILL DOES support showModalDialgo (and it HAS been removed), even if it worked, then 99% of popup blocks which now even browsers have turned on by default will block anyway.
So, to run the above with jQuery and also jQuery.ui, then your code to pop up the dialog will become this:
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" Width="94px" OnClientClick="showpage();return false;" />
<br />
<br />
<div id="poppagearea">
</div>
<br />
<script>
function showpage() {
var mydiv = $('#poppagearea');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': function () {
mydiv.dialog('close');
// code here for ok click alert('user click ok');
},
'cancel': function () {
mydiv.dialog('close');
// code here for a cancel click alert('user click cancel');
}
}
});
}
</script>
</form>
So you CAN use a alert(); in pure js, or you can prompt the user with a confirm('do you want to do this'). But if you want to pop up a dialog - especially another page, then I would quite much suggest that jQuery and jQuery.UI are the way to go here.
Polyfill won't work with a server side control. Replace your asp button with an input type="button" and add the click event using addEventhandler with async and await. Control flow should stop on ShowModelDialog call then and will resume when you close the popup.
I have this javascript function inside a .aspx page.
<script type="text/javascript">
function somefun(value) {
document.getElementById("myFlash").SetVariable("player:jsUrl", value);
document.getElementById("myFlash").SetVariable("player:jsPlay", "");
}
It works perfectly when I call it inside the body of the .aspx page like this.
<button onclick="somefun('Audio/filename.mp3')">English</button>
But if I call it in the code behind inside a click event it gives an error.
protected void theClickEvent(object sender, EventArgs e)
{
string filePath1 = "Audio/filename.mp3";
ScriptManager.RegisterClientScriptBlock(this, typeof(string), "Registering", String.Format("somefun('{0}');", filePath1), true);
}
When I click the button I'm getting this error: 'Unable to get property 'SetVariable' of undefined or null reference'
The object I call by "myflash" is
<object id="myFlash" type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="1093" height="52" >
What would be the issue?
Edited:
<head runat="server">
<script type="text/javascript">
function somefun(value) {
alert(document.getElementById("myFlash"));
document.getElementById("myFlash").SetVariable("player:jsUrl", value);
document.getElementById("myFlash").SetVariable("player:jsPlay", "");
}
<form id="form1" runat="server">
<asp:LinkButton ID="LinkButton1" Text = "Download" runat="server" OnClick = "theClickEvent"></asp:LinkButton>
</form>
<object id="myFlash" type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="1093" height="52" style="margin-left:0%">
</object>
You are registering the JavaScript code in your Button's click event, it doesn't execute the code at that time.
Your client side code onclick="somefun('Audio/filename.mp3')" executes before you register the script with script manager.
Use your code block within Page_Load instead of button click event.
UPDATE
It seems that the Flash object takes time to load or you click before it loads. To avoid this you could do the following.
Disable the link button until the DOM (or Document in JavaScript) is ready
When DOM/ Document is ready enable the button using JavaScript.
Also it's a good practice to do a Null check before accessing any of the properties of elements
Hope this helps
On my ASPX page, there is a button with this code:
OnClick="save_Click"
Is it possible to execute Javascript before postback and if the result is true, then do the postback and go to method save_click?
There is a property called "OnClientClick" as well. Here you can specify a function that will validate (I'm guessing), or just run regular javascript.
If your data is not valid you can just return false; from the method. That should cancel your postback
you should use the very well known way: return confirm('bla bla bla')
adding this snippet to the onclick attribute of the button in the page or button prerender method, server side...
http://msdn.microsoft.com/en-us/library/7ytf5t7k.aspx
<%# Page Language="C#" %>
<script runat="server">
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Server click handler called.";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" Runat="server"
OnClick="Button1_Click"
OnClientClick="return confirm('Ready to submit.');"
Text="Test Client Click" />
<br />
<asp:Label ID="Label1" Runat="server" text="" />
</form>
</body>
</html>
Possible duplicate of : Execute ClientSide before ServerSide in ASP.NET
I changed the definition of the __doPostback function to accomplish this:
<script type="text/javascript">
var originalDoPostback = __doPostBack;
__doPostBack = function (p1, p2) {
doSomethingCustomHere();
originalDoPostback(p1, p2);
};
</script>
I have the following:
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<script> alert("execute again"); </script>
<asp:LinkButton ID="go" runat="server" Text="Exec JS" />
</ContentTemplate>
</asp:UpdatePanel>
The first time the page renders the script is executed. If I click the button to cause a postback it doesn't execute again.
Is there a way to make it execute the scripts again?
Yo! There's an easy way to get the JavaScript to run again. Put the javascript on the HeadContent portion of your page:
<script>
function BindIt()
{
alert("execute again");
}
</script>
then on your page inside the update panel add portion with a call up to the function that you created for your javascript:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(BindIt);
</script>
...
In a project that I was working on, I wanted all of the javascript on the page to run again, so I just put it all into a massive BindIt style function. It took me a while to figure it out and I tried many methods to get this to work but this was the only way I was ever able to get jquery to work with updatepanels
Since ASP is just pushing the raw data, not actually executing it you'll need to probably use the RegisterStartupScript method of the ScriptManager to programmatically inject the script to load after a partial postback.
EDIT
More directly, try looking in to ScriptManager.RegisterStartupScript() for UpdatePanels. e.g.
If the JavaScript is jQuery related, following link would definitely help:
http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx
I have personally used the 2nd method mentioned in this article, and it worked for me properly.
I am using ASP.NET 3.5.
When the user click on say btnSubmit I want to first execute some JavaScript code and then execute some C#/VB.NET code.
Is this possible? If so how would one do it?
Thanks in advance!
This is very simple:
http://msdn.microsoft.com/en-us/library/7ytf5t7k.aspx
<%# Page Language="C#" %>
<script runat="server">
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Server click handler called.";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" Runat="server"
OnClick="Button1_Click"
OnClientClick="return confirm('Ready to submit.');"
Text="Test Client Click" />
<br />
<asp:Label ID="Label1" Runat="server" text="" />
</form>
</body>
</html>
Have the JavaScript execute and then call a web service with xmlhttprequest from the javascript
There is onClientClick property - check this out http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx
Of course, you simply add an onClick event all JS code is executed before the postback.
If the code is for validation and you decide you don't want to submit you can return false and it won't post.
<asp:Button OnClientClick="" />
Thanks for the answer guys!
To execute a function from code behind one would do this in VB.NET
Protected Sub btnSubmit_Click(blah blah) Handles btnSubmit.Click
ClientScript.RegisterStartupScript(Me.GetType(), "hiya", "Message()", True)
lblLabel.Text = "Hello my name is Etienne!"
End Sub