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.
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.
Does anyone know if there is a way to prevent the Ajax CalendarExtender from displaying recently selected dates (like the 2018-03-05, etc. in below screenshot)? I also wasn't sure if this was a browser feature, but I have unselected all of the predictive options in my Chrome browser, cleared all history/cache, shut the browser down completely and it's still showing the dates. This is an ASP.NET, C# application.
I've never had much success with getting jQuery to work, but here is what I have so far:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$('tbStartDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
$('tbEndDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
</script>
<asp:TextBox ID="tbStartDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbStartDate"></asp:CalendarExtender>
<asp:TextBox ID="tbEndDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbEndDate"></asp:CalendarExtender>
But I'm getting the "Uncaught TypeError: $(...).on is not a function at VendorFreightCalc.aspx:16, which points at the first jQuery line above.
Please have a look at this question:
Disable autocomplete for all jquery datepicker inputs
Basically, you want to turn off autocomplete for that field.
(UPDATE)
Maybe try the non-jquery options for turning off autocomplete.
<input type="text" name="field1" value="" autocomplete="off" />
I am using jquery UI modal popup to show user login form.
The script adds html elements around the form to build the popup.
When i submit the login form - the textboxes appear to be empty in the code behind, even though I have entered the value in it.
I think it is because the input is moved from the original position it was rendered, thus the code somehow validates the request.
Question is: Is there a way to make the values pass thru any way? Or to disable this validation?
Example of code:
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="UI-login.aspx.cs" Inherits="tests_UI_login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<link href="/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.Application.add_load(function (sender, args) {
// Dialog
$('#loginDialog').dialog({
autoOpen: true,
width: 600,
resizable: false,
modal: true,
show: 'slide',
hide: 'slide'
});})
</script>
<div id="loginDialog">
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:LinkButton ID="btnLogin" runat="server" onclick="btnLogin_Click1">Login</asp:LinkButton>
</div>
</form>
</body>
</html>
C# :
public partial class tests_UI_login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnLogin_Click1(object sender, EventArgs e)
{
string email = txtEmail.Text; //Here the value is empty
}
}
To get the values of the inputs in the code behind and access them through the server controls mechanism (textBox.Text), their state (and presence) needs to be persisted in the ViewState. Since you are building them with javascript, their state is not persisted, the only way you can get their values is using the Request.Form collection.
As usual, posting the relevant code, may produce more specific answers.
<body>
<div id="loginDialog">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:LinkButton ID="btnLogin" runat="server" onclick="btnLogin_Click1">Login</asp:LinkButton>
</form>
<script type="text/javascript">
Sys.Application.add_load(function (sender, args) {
// Dialog
$('#loginDialog').dialog({
autoOpen: true,
width: 600,
resizable: false,
modal: true,
show: 'slide',
hide: 'slide'
});
})
</script>
</div>
</body>
I did something like above it works. I kept form1 inside dialog.
Actually there are several issues, quickest solution would be to use an existing plugin, like the jQuery Form Plugin.
I found the solution. Just add the dialog to the form.
See http://labs.kaliko.com/2011/08/jquery-ui-dialog-aspnet-postback.html
Update 1:
To make all happy, the solution is to register the modal into the form:
var myDialog = jQuery("#myDialog").dialog({ width: 480, height: 400 });
myDialog.parent().appendTo(jQuery("form:first"));
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
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.