I'm using an out of the box implementation of JQuery UI Dialog on a .net form:
<form id="form1" runat="server">
<asp:Button ID="btnTest" runat="server" Text="Open Me"
onclick="btnTest_Click" />
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$("#dialog").dialog(
{ autoOpen: false });
$("#btnTest").click(function () {
$("#dialog").dialog("open");
});
</script>
</form>
I have two questions. First, I want the content of the dialog to be dependent on some logic that happens after the button click event is processed in the codebehind. How can I do that?
Second, just testing it above in demo mode, fires the dialogue but immediately closes it. I'm assuming it has something to do with e.preventDefault(), or thats what I've read, but I'm not sure how that will factor in if I tie it to run after the postback of the form.
To call the server you will need to make an Ajax call to get the data you need to display:
$('#dialog').dialog({
autoOpen : false,
width : 500,
height : 400,
resizable : true,
modal : true,
open : function()
{
jQuery.ajax({
type : "POST",
url : //"post Url ex. Default.aspx/OpenDialog",
data ://data to send to the server,
dataType://the data type,
success : function(response)
{
$('#dialog').html(response);
},
error : function(xhr, ajaxOptions, thrownError)
{
alert("Error: " + thrownError + "Status: " + xhr.status);
}
});
},
buttons : {
"Close" : function()
{
$(this).dialog("close");
}
}
});
and in your button click you will do :
$("#btnTest").click(function () {
$("#dialog").dialog("open");
});
We can use ScriptManager.RegisterStartupScript in the code behind button click event. Then we can have a javascript function in the aspx page which actually has the dialog logic.
ScriptManager.RegisterStartupScript(this, GetType(), "myFunction", "myFunction();", true); //in code behind file
function myFunction(){
// update something to dialog div
$("#dialog").dialog(
{ autoOpen: false }
);
$("#dialog").dialog("open");
}
You want some value from code behind to front end?
if yes:
then at code behind :
protected void Button1_Click(object sender, EventArgs e)
{
HiddenField1.Value = " from code behind";
ScriptManager.RegisterStartupScript(this, GetType(), "myFunction", "myFunction('Hello');", true);
}
and at aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
</style>
<script>
function myFunction(a) {
$("#dialog").text(a+$("[id$=HiddenField1]").val());
$("#dialog").dialog();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialog" title="Basic dialog">
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
Hope it may help you.
Related
i do have a linkbutton that do some codebehind on c#.
and i want that, after the codebehind is done, and the result comes back to the page, the scroll moves to a certain div.
<html>
<head>
</head>
<body>
<asp:LinkButton ID="lb1" runat="server" OnClick="lb1_Click"> Click Aqui </asp:LinkButton>
<div id=myDiv> Hi! </div>
</body>
</html>
code behind:
protected void lb1_Click(object sender, EventArgs e)
{
//do something in database
// then back to the page, and scroll to MyDiv
}
This could help you, just change in the javascript the file that have the code and it will output the things in the file called
<script type="text/javascript">
function lb1_Clicks() {
$.ajax({
url: "getInfo.php",//set the file that will do the magic output
success: function(response) {
$('.myDiv').html(response).fadeIn();
}
});
}
</script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<asp:LinkButton ID="lb1" runat="server" OnClick="lb1_Click()"> Click Aqui </asp:LinkButton>
<div class="myDiv"><!-- your code will update here || example hello World--></div>
</body>
</html>
<!-- getInfo.php -->
<?PHP
echo "hello world";
?>
I am new to C# and JQuery. I try to add jquery to a C# WebForm project.
What I want to do is this:
Add a button to a webform.
If that button is clicked serverside then display a JQuery dialogbox
This is the code that I have - if I click the button nothing happens.
I wonder where the problem is....
.aspx file:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="frmMain.aspx.cs" Inherits="Dialog_YES_NO_mit_JQuery.frmMain" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
</div>
</form>
</body>
</html>
.aspx.cs file :
public partial class frmMain : System.Web.UI.Page
{
protected void btnDemo1_Click(object sender, EventArgs e)
{
string message = "Message from server side";
//ClientScript.RegisterStartupScript (this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
ClientScript.RegisterClientScriptBlock(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}
}
}
Here's a complete example that works:
You need to add a reference to jQuery UI library after the reference to jQuery as this is where the dialog logic is defined
You need to add a reference to the jQuery UI CSS file to enable the modal popup styling.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
<div id="dialog"></div>
</div>
</form>
</body>
Output:
here an example that works for me :
code behind :
protected void ShowDialogClick(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), Guid.NewGuid().ToString(), "ShowDialogJS();", true);
}
aspx :
<script type="text/javascript">
function ShowDialogJS() {
jQuery("#dialog").dialog();
}
</script>
<asp:Button runat="server" ID="btnShowDialog" Text="Show Dialog"
OnClick="ShowDialogClick"></asp:Button>
EDIT :
I have two js files for jQuery :
<script src="ressources/jQuery/scripts/jquery-1.11.4.js" type="text/javascript"></script>
<script src="ressources/jQuery/scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
try this
aspx
`
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<div id="dialog"></div>
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
</div>
</form>
`
added
<div id="dialog"></div>
i also added javascirpt files
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
i have created "ButtonClick" function in ASP.NET as following:
<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button" CausesValidation="true" onclick="btnLogin_Click"/>
i want to know, is it possible to call a javascript function before and after calling asp.net button click function...???
Thanks.
Yes it's possible, here is quick example:
Java script function to call.
<script type="text/javascript">
function clientValidate() {
alert("execute before");
return true;
}
function executeAfter() {
alert("execute after");
}
</script>
Here is snapshoot for button
<asp:Button ID="btnLogin" runat="server" Text="Login" CausesValidation="true" OnClientClick="clientValidate()" onclick="btnLogin_Click"/>
Notice property onClientClick="clientValidate()", it will be trigger script before button click on the server.
On the server side:
protected void btnLogin_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", "<script>executeAfter();</script>", false);
}
Notice executeAfter();, it will trigger javascript execution after server event.
Don't forget to place <asp:ScriptManager runat="server"></asp:ScriptManager> in your aspx file.
Hope it help
put this on your page and make sure you have a scriptmanager. these codes will handle your pre & post postbacks.
var prm, postBackElement;
if (typeof Sys != "undefined") {
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
}
function InitializeRequest(sender, e) {
postBackElement = e.get_postBackElement();
if (postBackElement.id == "btnLogin") {
// before click codes
}
}
function EndRequest(sender, e) {
if (postBackElement.id == "btnLogin") {
// after click codes
}
}
Before:
<script type="text/javascript">
function executeBefore() {
alert("execute before");
}
</script>
<asp:Button ID="btnLogin" runat="server" Text="Login" CausesValidation="true" OnClientClick="executeBefore()" onclick="btnLogin_Click"/>
After:
<script type="text/javascript">
function executeAfter() {
alert("execute after ");
}
</script>
Add this code to your server side event:
Page.ClientScript.RegisterStartupScript(GetType(), "none", "<script>executeAfter();</script>", false);
If you don't have a master page, or are not using ajax, there is no need to add ScriptManager.
You can call Java scrip function before server side click using OnClientClick():
aspx(design)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Test() {
alert('client click');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button Text="btn" runat="server" ID="btn"
OnClick="btn_Click" OnClientClick="Test()" />
</div>
</form>
</body>
</html>
.cs
protected void btn_Click(object sender, EventArgs e)
{
Response.Write("Server Click");
}
First time you can call your javascript function in Button's OnClientClick event passing your function name.
<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button" CausesValidation="true" onclick="btnLogin_Click" OnClientClick="return functionNAME();"/>
Second time, in your button click event btnLogin_Click call js as follow
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>functionNA();</script>", false);
For calling it before, you could consider using onload function, like this example:
<body onload="myFunction()">
For calling it afterwards, just link the button to execute JS onClick?
I don't think I quite understand your intentions.
I am trying to create an alert as described in this site http://needim.github.com/noty/
and here is the code
<head runat="server">
<title>Test</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<link rel="stylesheet" type="text/css" href="buttons.css" />
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<body>
<div class="container">
<div id="customContainer">
</div>
</div>
<script type="text/javascript">
function generate(type, layout) {
var n = noty({
theme: 'defaultTheme',
text: 'Do you want to continue?',
buttons: [
{
addClass: 'btn btn-primary',
text: 'Ok',
onClick: function ($noty) {
// this = button element
// $noty = $noty element
$noty.close();
noty(
{
text: 'Record deleted !',
type: 'success',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(true); },
onClose: function () { },
afterClose: function () { }
}
});
}
},
{
addClass: 'btn btn-danger',
text: 'Cancel',
onClick: function ($noty) {
$noty.close();
noty(
{
text: 'Record not deleted !',
type: 'warning',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(false); },
onClose: function () { },
afterClose: function () { }
}
});
}
}
]
});
}
function TakeValue(result) {
if (result == true) {
document.getElementById("Hidden1").value = "true";
alert(document.getElementById("Hidden1").value);
} else {
document.getElementById("Hidden1").value = "false";
alert(document.getElementById("Hidden1").value);
}
}
function generateAll() {
generate('information', 'top');
}
</script>
<form id="form" runat="server">
<input id="Hidden1" type="hidden" value="false"/>
<asp:Button ID="Button2" runat="server" Text="Press" OnClientClick="return generateAll();" />
<input id="Button1" type="button" value="button" onclick="return generateAll();" />
</form>
</body>
I have placed two buttons ,one is HTML button while the other is of asp:Button,
The whole scenario just works fine when I use the HTML button ,but the page is not displaying the similar behavior in case of asp:Button click, I have placed a test function in JavaScript to test the OnClientClick event of the asp:Button and that worked fine,but I don't know why this alert is not getting called, I think there is some problem with the Noty JS.
Kindly give feed back
thanks.
As jbabey said in the comments:
an asp:button will cause a postback when clicked by default. you need to return false from the onclientclick, right now you are returning undefined since generateAll has no return.
Since you're using jQuery, I'd go one step further and not directly set the click attribute. Instead, set it using jQuery:
<script>
$(document).ready(function() {
$('#Button1').click(generateAll);
});
...
function generateAll(e) {
generate('information', 'top');
// This will prevent the default action of submitting the form.
e.preventDefault();
}
</script>
Could you please add UseSubmitBehavior="false" attribute to the asp:button.
<asp:Button ID="Button2" runat="server" Text="Press" UseSubmitBehavior="false" OnClientClick="return generateAll();" />
I hope this will resolve your issue. Please let me know whether it helped you or not.
I'm trying to show a modal dialog when the user click on an ASP.Net button. This is my 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');
},
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="New" OnClientClick="ShowDialog();"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Select content type">
<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 I click on TreeNew button appears modal popup but inmediately the page do postback.
What's happening?
While adding a return false; will fix your problem (as suggested by other answers), I think the best thing for you to do is use a standard HTML button. There is no reason to use an ASP.NET control in this case since you do not intend to postback.
If you insist to use a ASP.NET button, however, at least set UseSubmitBehavior="False" so that the button is rendered as <input type="button"/> instead of <input type="submit"/>.
Try
OnClientClick="return ShowDialog();"
AND
function ShowDialog() {
$('#dialog').dialog('open');
return false;
}
This will prevent the postback.
Your OnClientClick needs to return false like so:
OnClientClick="ShowDialog(); return false;"
Buttons by default postback but return false prevents the default behavior
You're not returning false from your OnClientClick. When you don't explicitly return false, "true" in this situation is assumed. A return value of true from your OnClientClick indicates it's fine to do a postback. Try changing OnClientClick to the following (adding "return false" after your call to ShowDialog())
OnClientClick="ShowDialog();return false;"
This article maybe of some value to you: using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control.
Hope this helps some.
Use preventDefault() jQuery function to prevent button postback
Try this:
function ShowDialog(evt) {
evt.preventDefault();
$('#dialog').dialog('open');
}