I am unable to get the AlertifyJS messagebox to work with my asp.net project.
I'm trying to make a reasonably simple website and would like to improve the default alert functionality.
I've viewed a number of other forums on this but unfortunately have not been able to figure out my issue.
Here is my .aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="Test.WebForm4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="Scripts/alertify.js" type="text/javascript"></script>
<link href="Content/alertifyjs/alertify.css" rel="stylesheet" />
<link href="Content/alertifyjs/themes/default.css" rel="stylesheet" />
<script type="text/javascript">
function Confirm() {
alert("here");
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
alert("here2");
alertify.confirm('Do it', function (e) {
if (e) {
$('#PrchBtnHiddenYes').click();
confirm_value.value = "Yes";
} else {
$('#PrchBtnHiddenNo').click();
confirm_value.value = "No";
}
}).set('labels', { ok: 'Yes', cancel: 'No' });
//alertify.confirm('Title', 'Message', function () { $('#PrchBtnHiddenYes').click(); confirm_value = "Yes"; }, function () { $('#PrchBtnHiddenNo').click(); confirm_value = "No"; }).set('labels', { ok: 'Yes', cancel: 'No' });
alert("here3");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="PrchBtn" runat="server" class="PrchBtn" Text="Click Here" OnClientClick="Confirm(); return false;" />
<asp:Button runat="server" ID="PrchBtnHiddenYes" ClientIDMode="Static" Style="display: none;" />
<asp:Button runat="server" ID="PrchBtnHiddenNo" ClientIDMode="Static" Style="display: none;" />
</form>
</body>
</html>
Here is my cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Test
{
public partial class WebForm4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
PrchBtnHiddenNo.Click += PrchBtnHiddenNo_Click;
PrchBtnHiddenYes.Click += PrchBtnHiddenYes_Click;
}
void PrchBtnHiddenYes_Click(object sender, EventArgs e)
{
string Success = "Success";
}
void PrchBtnHiddenNo_Click(object sender, EventArgs e)
{
string Failure = "Failure";
}
}
}
I'm not getting any error messages. For testing purposes, I have put 3 alerts in the javascript code. I get the first and second one but the alertify script doesn't fire and therefore neither does 3rd alert.
Thanks in advance.
seems your local alertify is not working. try this instead.
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/css/themes/default.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/css/themes/bootstrap.min.css"/>
Related
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 am developing a website using ASP.NET and used jQuery to implement the tabs in the page.
I got the design perfectly. but problem is I have a treeview on each tab. When user click a node the page should redirect to another page. Currently I am using response.redirect method which worked perfectly. But after I put the treeview control inside this jQuery tab post back occurs but instead of redirecting again it loads the same page with the tabs. I put a break point on SelectedNodeChanged event of the treeview but compiler even didn't reach to the breakpoint. What went wrong?
Here is the code
<link rel="stylesheet" href="Content/jquery-ui.css">
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li>Test1</li>
</ul>
<div id="tabs-1">
<asp:TreeView ID="tvTest" runat="server" OnSelectedNodeChanged="tvTest_SelectedNodeChanged">
<NodeStyle CssClass="tree" />
</asp:TreeView>
</div>
</div>
Here is the selectednodechanged event
protected void tvTest_SelectedNodeChanged(object sender, EventArgs e)
{
Response.Redirect("~/Display.aspx",true);
}
These are my Test pages. When the node changes, I.E. I click on a different node, it redirects me to the said page.
TreeView.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TreeTest.aspx.cs" Inherits="WebApplication.TreeTest" %>
<!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">
<title></title>
<link rel="stylesheet" href="Scripts/jquery-ui.css" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<form runat="server">
<div id="tabs">
<ul>
<li>Test1</li>
</ul>
<div id="tabs-1">
<asp:TreeView ID="tvTest" runat="server" OnSelectedNodeChanged="tvTest_SelectedNodeChanged">
<NodeStyle CssClass="tree" />
<Nodes>
<asp:TreeNode Text="Test1"></asp:TreeNode>
<asp:TreeNode Text="Test2"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</div>
</form>
</body>
</html>
TreeView.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication
{
public partial class TreeTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void tvTest_SelectedNodeChanged(object sender, EventArgs e)
{
Response.Redirect("~/Display.aspx", true);
}
}
}
I read some forums and found an easier way to call a C# Method from JavaScript but it's not working. I did it in my live app and it didn't work so I took a fresh project and used the code as below:
ASPX Mark-up
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div>
<asp:Button ID="btnMe" runat="server" OnClientClick="jsfun()" />
</div>
</form>
</body>
</html>
Javascript
<script type="text/javascript">
function jdfun() {
PageMethods.CSFun(onSucess, onError);
}
function onSucess(result) {
alert(result);
}
function onSucess(result) {
alert(result);
}
</script>
C#
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string CSFun()
{
string result = "Hey Yeah";
return result;
}
}
No Error No Exception. The Debugger is not even going into the C# code.
Can anyone help me out.
Thanks.
Edit
I didn't really know about this, but I read a little and fixed your code.
Here is the code that works:
js:
<script type="text/javascript">
function jsfun() {
PageMethods.CSFun(onSuccess, onError);
}
function onSuccess(result) {
alert(result);
}
function onError(result) {
alert(result);
}
</script>
aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" OnClientClick="jsfun()" />
</div>
</form>
</body>
</html>
Basic Example to do the same
aspx page
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"
EnablePageMethods="true" />
<fieldset id="ContactFieldset">
<label>
Your Name
<input type="text" id="NameTextBox" /></label>
<label>
Email Address
<input type="text" id="EmailTextBox" /></label>
<label>
Your Message
<textarea id="MessageTextBox"></textarea></label>
<button onclick="SendForm();">
Send</button>
</fieldset>
</form>
Page Method (.cs)
using System;
using System.Web.Services;
public partial class ContactUs : System.Web.UI.Page
{
[WebMethod]
public static void SendForm(string name, string email, string message)
{
if (string.IsNullOrEmpty(name))
{
throw new Exception("You must supply a name.");
}
if (string.IsNullOrEmpty(email))
{
throw new Exception("You must supply an email address.");
}
if (string.IsNullOrEmpty(message))
{
throw new Exception("Please provide a message to send.");
}
// If we get this far we know that they entered enough data, so
// here is where you would send the email or whatever you wanted
// to do :)
}
}
javascript function
function SendForm() {
var name = $get("NameTextBox").value;
var email = $get("EmailTextBox").value;
var message = $get("MessageTextBox").value;
PageMethods.SendForm(name, email, message,
OnSucceeded, OnFailed);
}
function OnSucceeded() {
// Dispaly "thank you."
$get("ContactFieldset").innerHTML = "<p>Thank you!</p>";
}
function OnFailed(error) {
// Alert user to the error.
alert(error.get_message());
}
I am posting this question again, maybe this time more accurate description.
The problem is , I am using jQuery to set the Label's text value and it works fine on browser, but when I want to save it to string, it does not save it. Here is the
front End Html Code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var myNewName = "Ronaldo";
$('#<%= Label1.ClientID %>').text(myNewName);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>
And here is the Back End C# Code On Page Load
using System;
using System.Web.UI;
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
string mynameCheck = Label1.Text;
if (mynameCheck=="Ronaldo")
{
Response.Write("Yes Name is Fine");
}
else
{
Response.Write("Name's not Fine");
}
}
}
The result displayed is
Name's not Fine
Ronaldo
Seems like the string is still Null. Is there any problem of rendering??
label is not input type so you can not get changed values through jquery on server side. You can use hidden field for this purpose.
Your server side code (c#) can not access the form data until your client side code (HTML/Javascript) posts it.
Why do you want to the name already at the PageLoad event?
You could add a asp:Button with an attached onClick event handler to read the value of your asp:Label.
Labels do not maintain viewstate. The server will not post that information back to the server. You can try explicitly enabling the ViewState on your Label, but if that doesn't work, you will have to store that value in a hidden field.
First Call Page Load event and after that call JQuery Window.Load event.
So if you want to set any content in Label then you can do using onClientClick of button.
For ex.
<asp:Button ID="btn" runat="server" Text="Click me" OnClientClick="SetClientValues();" />
<script type="text/javascript">
function SetClientValues() {
var myNewName = "Ronaldo";
$('#<%= Label1.ClientID %>').text(myNewName);
}
</script>
At server side button event you can get Label values that sets at client side.
protected void btn_Click(object sender, EventArgs e)
{
string mynameCheck = Label1.Text;
if (mynameCheck=="Ronaldo")
{
Response.Write("Yes Name is Fine");
}
else
{
Response.Write("Name's not Fine");
}
}
It will print Yes Name is Fine
This should do it:
<script type="text/javascript">
$(window).load(function () {
if($('#<%= Txt1.ClientID %>').val() != "Ronaldo"){
var myNewName = "Ronaldo";
$('#<%= Txt1.ClientID %>').val(myNewName);
$('#<%= Label1.ClientID %>').text(myNewName);
$('#<%= Btn1.ClientID %>').click();
}
});
</script>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="Txt1" runat="server" style="display:none"></asp:Label>
<asp:Button ID="Btn1" runat="server" style="display:none" Click="Btn1_Click"></asp:Label>
</form>
protected void Page_Load(object sender, EventArgs e)
{
if(IsPostBack)
{
Label1.Text=Txt1.Text;
string mynameCheck = Label1.Text;
if (mynameCheck=="Ronaldo")
{
Response.Write("Yes Name is Fine");
}
else
{
Response.Write("Name's not Fine");
}
}
}
protected void Btn1_Click(object sender, EventArgs e)
{ }
Hope it helps :)
RegistrationPage.aspx
function btnSearchClick()
{
if (window.showModalDialog)
{
window.showModalDialog(
"Search.aspx",
"Search Patient",
"dialogWidth:800px; dialogHeight:400px"
);
return false;
}
}
Search.aspx
$(document).ready(function ()
{
$("input[id$='btnAdd']").live('click', function (e) {
hidID.value = $.trim($('table td.csstablelisttdselected:first').text());
return true;
});
});
Seach.aspx.cs
protected void btnAdd_Click(object sender, EventArgs e)
{
Response.Redirect("RegistrationPage.aspx?ID=" + hidID.Value, true);
Page.ClientScript.RegisterStartupScript(
this.GetType(),
"CloseScript",
"window.close()",
true
);
}
In RegistrationPage.aspx page on click of button search pop up dialog box.
In Search page i am getting id in hiddenfield and redirect to registration page.
When I click on btn add then dialog not close and it redirect to registration page within dialog.
Please dont give answer like "use jquery dialog box","or use another dialog control"
This is a tested example :
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
function btnSearchClick()
{
window.returnValue = undefined;
var result = window.showModalDialog("Search.aspx", window, "dialogHeight:650px; dialogWidth:900px;");
if (result == undefined)
result = window.returnValue;
if (result != null && result != "undefined")
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btnOpen" onclick="btnSearchClick();" />
</div>
</form>
</body>
</html>
Search.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
function CloseModal() {
if (window.opener) {
window.opener.returnValue = 'your return value';
}
window.returnValue = 'your return value';
self.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
Search.aspx.cs
using System;
using System.Web;
using System.Web.UI;
public partial class Search : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CloseScript", "closescript()", true);
}
}
So instead of redirect your user you could pass a value from Modal to Opener.
Here another example : Modal Dialog ReturnValue
Hope can help.