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>
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'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.
I am trying to get this javascript function to fire every time there is a postback in my ASP.net project using c#. I read online that if you create a pageLoad() function in Javascript, it will fire every time on a postback. I can't get it to fire. Here is all the code in my Site.Master file.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Weights.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<script type="text/javascript" src="<%=ResolveUrl("~/Scripts/jquery-1.4.1.min.js")%>"></script>
<script type="text/javascript">
function pageLoad() {
if ($('#MainContent_ckbIncludeWeight').checked) {
$('#MainContent_txtPalletWeight').show();
console.log('it is checked!');
alert('it is checked!');
}
if (true) {
console.log('fire!');
alert('fire!');
}
}
</script>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
<script type="text/javascript">
function pageLoad() {
if ($('#MainContent_ckbIncludeWeight').checked) {
$('#MainContent_txtPalletWeight').show();
console.log('it is checked!');
alert('it is checked!');
}
if (true) {
console.log('fire!');
alert('fire!');
}
}
$(document).ready(function () {
$('#MainContent_ckbIncludeWeight').click(function () {
if (this.checked) {
$('#MainContent_txtPalletWeight').show();
$('#MainContent_txtPalletWeight').val('40');
$('#MainContent_txtPalletWeight').after("<span id='pound'>#</span>");
}
else {
$('#MainContent_txtPalletWeight').hide();
$('#MainContent_txtPalletWeight').val('');
$('#pound').remove();
}
});
});
</script>
</html>
I would appreciate any help.
Thanks
Mike
You're already using jQuery's $(document).ready, just add your code there as well. It will run every time page reloads:
$(document).ready(function () {
$('#MainContent_ckbIncludeWeight').click(function () {
if (this.checked) {
$('#MainContent_txtPalletWeight').show();
$('#MainContent_txtPalletWeight').val('40');
$('#MainContent_txtPalletWeight').after("<span id='pound'>#</span>");
}
else {
$('#MainContent_txtPalletWeight').hide();
$('#MainContent_txtPalletWeight').val('');
$('#pound').remove();
}
});
// Originally from function pageLoad()
if ($('#MainContent_ckbIncludeWeight').checked) {
$('#MainContent_txtPalletWeight').show();
console.log('it is checked!');
alert('it is checked!');
}
if (true) {
console.log('fire!');
alert('fire!');
}
});
You have to have ScriptManager on page in order for pageLoad() to work.
There is however no need for adding it, if you just want to run some script on every postback.
You can do something like putting this:
<asp:PlaceHolder ID="phPageLoad" runat="server">
<script type="text/javascript">
if ($('#MainContent_ckbIncludeWeight').checked) {
$('#MainContent_txtPalletWeight').show();
console.log('it is checked!');
alert('it is checked!');
}
if (true) {
console.log('fire!');
alert('fire!');
}
</script>
</asp:PlaceHolder>
into your master page and in codebehind of master page add this to Page_Load:
phPageLoad.Visible = Page.IsPostback;
I am using jQuery to set some values in hidden fields, which are being set perfectly.
But the problem is hidden fields don't show me the values until I submit the form.
Is there away to get at the values before the form is submitted.
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#hdnCountryCode").val(geoip_country_code());
$("#hdnCountyName").val(geoip_country_name());
$("#hdnCity").val(geoip_city());
$("#hdnRegionCode").val(geoip_region());
$("#hdnRegion").val(geoip_region_name());
$("#hdnLatitude").val(geoip_latitude());
$("#hdnLongitude").val(geoip_longitude());
});
</script>
<body>
<form id="form1" runat="server">
<asp:HiddenField runat="server" ID="hdnCountryCode" />
<asp:HiddenField runat="server" ID="hdnCountyName" />
<asp:HiddenField runat="server" ID="hdnCity" />
<asp:HiddenField runat="server" ID="hdnRegionCode" />
<asp:HiddenField runat="server" ID="hdnRegion" />
<asp:HiddenField runat="server" ID="hdnLatitude" />
<asp:HiddenField runat="server" ID="hdnLongitude" />
<asp:Button runat="server" ID="btnV" Text="s" onclick="btnV_Click" />
<%
Google.Values Send = new Google.Values();
Send.CountryName = hdnCountyName.Value;
Send.CountryCode = hdnCountryCode.Value;
Send.RegionName = hdnRegion.Value;
Send.RegionCode = hdnRegionCode.Value;
Send.City = hdnCity.Value;
Send.Latitude = hdnLatitude.Value;
Send.Longitude = hdnLongitude.Value;
%>
</form>
</body>
With the code above the values of the hidden fields when passing to the properties of my class is giving me "". But when I use button click event same code returns me all the values which i need
To get the values you need to get the rendered id, and this is done like:
$("#<%=hdnCountryCode.ClientID%>").val(geoip_country_code());
You can see this code:
<head>
<title>Test</title>
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var countryCode = geoip_country_code();
var countryName = geoip_country_name();
$('#countryCode').html(countryCode);
$('#countryName').html(countryName);
});
</script>
</head>
<body>
<p>
CountryCode: <span id="countryCode">countryCode</span>
<p>
<p>
CountyName: <span id="countryName">CountyName</span>
<p>
</form>
</body>
</html>
I want to call jQuery function from server.
The server side button that calls function is inside an UpdatePanel.
this is server side function :
//Button Click handler (It is inside Updatepanel)
string ScriptName = null;
ScriptName = "function pageLoad(sender, args) { if (args.get_isPartialLoad()) {DisplayMessage(); }}";
ScriptManager.RegisterStartupScript(this, GetType(), "DisplayMessage", ScriptName, true);
and this is client side function :
<script type="text/javascript">
function DisplayMessage() {
//Alert("Called");
}
</script>
It doesn't work.
What's wrong ? (Is my question and problem clear?)
That's weird, as the following works perfectly fine for me:
<%# Page Language="C#" %>
<script type="text/c#" runat="server">
protected void BtnTrigger_Click(object sender, EventArgs e)
{
string script = "function pageLoad(sender, args) { if (args.get_isPartialLoad()) {DisplayMessage(); }}";
ScriptManager.RegisterStartupScript(
this,
GetType(),
"DisplayMEssage",
script,
true
);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function DisplayMessage() {
alert('called');
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="scm" runat="server" />
<asp:LinkButton
ID="BtnTrigger"
runat="server"
Text="Trigger"
OnClick="BtnTrigger_Click"
/>
<asp:UpdatePanel ID="up" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="BtnTrigger"
EventName="Click"
/>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
Also do you really need all the complex script, why not simply use string script = "DisplayMessage();";?
create a display:none div in the page. Put it in update panel. This will not disturb your design. to execute every sclient side script in page
<div id="scriptContainer" runat="server" style="display:none;"></div>
then paste your js in it on an event.
scriptContainer.innerHTML = "<script type=text/javascript>DisplayMessage();</script>";
hope it helps.