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>
Related
I have the following code to submit a form with a hidden value.
The problem is - I can't set the value of MyNewValue before the form is submitted to the remote address https://some-remote-site/Form.aspx.
Does anybody know how I can set the hidden value when the user clicks the button and then submit the form to the same address?
MyFile.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="height: 370px">
<form id="myForm" method="post" runat="server" action="https://some-remote-site/Form.aspx">
<fieldset>
<asp:HiddenField id="MyNewValue" Value="X" runat="server" />
<p>
<label for="Username">Username:</label>
<asp:TextBox id="Username" Text="Username" runat="server" />
</p>
<asp:Button ID="SubmitForm" runat="server" onclick="SubmitForm_Click" Text="Button" />
</fieldset>
</form>
</body>
MyFile.aspx.cs
// Not executed because action="https://some-remote-site/Form.aspx" is set
protected void SubmitForm_Click(object sender, EventArgs e)
{
MyNewValue.Value = DateTime.Now.ToString();
}
You can do it client-side using jQuery. So when the user clicks submit, and before submitting the form, you can update your hidden input and then return true to proceed the submission of your form.
This is it could be done:
$(document).ready(function(){
$('#myForm').on('submit', function(){
$('#MyNewValue').val('YOUR_VALUE');
return true;
})
});
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 need to Stop Button1_Click fire after Jquery function return false..This is my Code ...
<%# Page Language="C#" %>
<!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 id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
<script src="Scripts/a.js" type="text/javascript"></script>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return x();" OnClick="Button1_Click" />
OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
js File
function x() {
alert('');
return false;
}
this is my HTML generated File
<!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 id="Head1">
<script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
<script src="Scripts/a.js" type="text/javascript"></script>
<title>
</title></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNTM0OTE4ODNkZI8CSkltDp/afauc6DGl2D8JvNnVI1ffgzykF0L2alVM" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAOSROoMi8eHXeBzZ77oKwMrESCFkFW/RuhzY1oLb/NUVM34O/GfAV4V4n0wgFZHr3eJjGQabRwzK4TIMzE2tX2gN9468Yg/u6i/oj/9EvNo1w==" />
</div>
<div>
<input name="TextBox1" type="text" id="TextBox1" />
<input type="submit" name="Button1" value="Button" onclick="return x();" id="Button1" />
</div>
</form>
</body>
</html>
I also tried Similar links :
Why doesn't returning false from OnClientClick cancel the postback
In this case a handler for the one more click event was registered via jquery ..I think it is not in my case
ASP.NET OnClientClick="return false;" doesn't work
there should not be a click event handler (registered via jquery) which returns true .whats mean by that ?Does it mean that i need to remove onClick function ... i dont wanna do it
I also tried other suggested Code :
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="if (!x()) return
false;" OnClick="Button1_Click" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:return
x();"OnClick="Button1_Click" />
they are also not working
Plese suggest
This worked for me...
.aspx page
<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
<script type="text/javascript">
function x() {
return false;
}
</script>
Reference Help
Update from an external javascript file working code
external.js
function x() {
var result = confirm("Sure");
if (result)
return true;
else
return false;
}
.aspx page
<form id="form1" runat="server">
<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
</form>
<script src="external.js" type="text/javascript"></script>
Hope it helps..!!
You can also put all the code in single file. Attaching handler directly from jQuery
jQuery(document).ready(function () {
AttachDeleteButtonHandler();
});
function AttachDeleteButtonHandler() {
var btnDelete = $("div[class='page']").find("table[id$='tblButtons']").find("input[id$='btnDelete']");
btnDelete.click(
function () {
return ConfirmDelete();
}
);
}
function ConfirmDelete() {
var msg = $('div[id="hdnElements"]').find('span[onclick*="translatedMsgText"]').text();
if (confirm(msg)) {
return true;
}
else {
return false;
}
}
I have a main page which has some pagemethod called to perform some activities. A popuppanel(popuppanel content page also have pagemethods) is used within this main page to show some details. If the same is executed multiple times (i.e., opening the popup panel many times), it is working in all other browsers other than IE9 (working even in IE8). However, first time execution is successful. The code that is being used is provided below.
Scriptmanager used as follow:
<ajaxToolkit:ToolkitScriptManager runat="server" ID="TSCM1" EnablePageMethods="true" />
Script In Main Page:
function Clkd(){
var ppnl=document.getElementById("if1");
ppnl.src="Test1.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('<%= MPE.ClientID %>').hide();
}
$(document).ready(function(){
PageMethods.mainPageMethod("MainTest",cbackfn);
});
function cbackfn(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string mainPageMethod(String mainStr)
{
return mainStr + " Ok";
}
Test1.aspx page Details (this is the page loaded inside the popup panel):
Script code below :
$(document).ready(function(){
PageMethods.Testpm("Test",fnd);
});
function fnd(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
The following error is thrown if the same is executed the second time (in IE9 only)
SCRIPT5007: Unable to set value of the property '_UpdateProgress': object is null or undefined
ScriptResource.axd?........
SCRIPT5007: Unable to get value of the property 'WebServiceProxy': object is null or undefined
Test1.aspx, line 66 character 1
SCRIPT5007: Unable to get value of the property 'DomElement': object is null or undefined
ScriptResource.axd?......, line 2 character 18851
SCRIPT5007: Unable to get value of the property 'add_init': object is null or undefined
Test1.aspx, line 97 character 122
SCRIPT438: Object doesn't support property or method 'Testpm'
Test1.aspx, line 11 character 4
Important Note: if main page does not have any pagemethods then its working fine.
please help me out from this issue..
You should have added relevant HTML, that might have helped others to help you out.
Well I used your code and added missing code and when I runt it, it is working fine in all browsers including IE9.
Please find below code:
Main Page (Default.aspx):
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
function Clkd() {
var ppnl = document.getElementById("if1");
ppnl.src = "test.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2() {
var ppnl = document.getElementById("if1");
ppnl.src = "";
$find('<%= MPE.ClientID %>').hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager runat="server" ID="scriptmanager1">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnl1" runat="server">
<iframe id="if1"></iframe>
<asp:Button ID="btnHidePopup" runat="server" Text="Hide" />
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Text="Show" OnClientClick="Clkd();" />
<cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnl1"
DropShadow="true" OkControlID="btnHidePopup" OnOkScript="Clkd2()" CancelControlID="btnHidePopup">
</cc1:ModalPopupExtender>
</form>
</body>
Test.aspx:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
PageMethods.Testpm("Test", fnd);
});
function fnd(str) {
alert(str);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager runat="server" ID="scriptmanageriframe" EnablePageMethods="true">
</cc1:ToolkitScriptManager>
Hello World this is game.
</div>
</form>
</body>
Test.aspx.ce (Webmethod):
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
I hope it helps!
U can try with different popUp
for Example:
asp:ModalPopupExtender also available in ajaxtoolkit
jquery dialog popup.
I will prefer you to go with jquery dialog popup instead of ajaxpopup panel using the same web method in c# and jquery code you have written.
Use ClientIdMode="Static" on the MPE and use MPE id directly in $find().
ASPX Code:
<asp:ModalPopupExtender ID="modalpopup" ClientIDMode="Static" runat="server" CancelControlID="btnCancel"
OkControlID="btnOkay" TargetControlID="Button1" PopupControlID="Panel1"
Drag="true" >
</asp:ModalPopupExtender>
Javscript code:
$find('modalpopup').show(); // to show popup
$find('modalpopup').hide(); // to hide popup
IE9 has problem with pagemethods while having pagemethods in bothpage (mainpage,popuppanelpage).
you can use pagemethods in webservice(.asmx) file
i tried like below:
defaultpage.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function fnd123(str){
alert(str);
}
function objFailed1(data) {
fnd123(data);
}
function objGot1(data) {
fnd123(data.d);
}
function Clkd(){
var ppnl=document.getElementById("if1");
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from default page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
ppnl.src="Test1.aspx";
$find('MPE').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('MPE').hide();
//PageMethods.clearPageData("/Test1.aspx",fnd1);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" EnablePartialRendering="false"/>
<div>
<input type="button" onclick="javascript:Clkd();return false;" value="Click" />
<div>
<asp:ModalPopupExtender ID="MPE" PopupControlID="popupPanel" PopupDragHandleControlID="popupPanel"
runat="server" Enabled="True" TargetControlID="btnOk" CancelControlID="BtnCancel"
BackgroundCssClass="PopupBackground" Drag="True" EnableViewState=true >
</asp:ModalPopupExtender>
<asp:Button Style="display: none" ID="BtnOk" runat="server"></asp:Button>
<asp:Button Style="display: none" ID="BtnCancel" runat="server"></asp:Button>
</div>
<div>
<asp:Panel ID="popupPanel" runat="server" Style="overflow: hidden; z-index: 100000;
display: none; background-color: White; filter: alpha(opacity=100); opacity: 1.0;
height: auto;">
<asp:Panel ID="pnlLoginHeader" runat="server" CssClass="" Style="display: none;">
<table width="100%">
<tr style="text-align: center">
<td style="width: 97%;">
<p class="popupTitle">
<asp:Label runat="server" ID="lblTitle" Text=""></asp:Label>
</p>
</td>
<td style="width: 3%;">
<p style="text-align: right;">
<span id="lblPopupClose" style="cursor: pointer; color: White">Close</span>
</p>
</td>
</tr>
</table>
</asp:Panel>
<iframe id="if1" src="" class="" style=""></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Redirect" />
</div>
</div>
</form>
</body>
Test1.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
function fnd(str){
alert(str);
}
function objFailed1(data) {
fnd(data);
}
function objGot1(data) {
fnd(data.d);
}
function Clkdwebservice(){
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from test page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
}
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="false">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" />
<div>
<input type="button" onclick="javascript:Clkdwebservice();return false;" value="Click" />
<input type="button" onclick="javascript:parent.Clkd2();return false;" value="Close" />
</div>
</form>
</body>
Testser.asmx.cs
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
[ToolboxItem(false)]
public class Testser : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public String GetData(String FileName)
{
string msg = FileName;
return msg;
}
}
its working fine for me.please check it
Is there a way to send data to an aspcontrol say a label called label1? Via jquery?
I know jquery only likes html but is there a way to just send the raw text to an asp control using a similar method below:
<script type="text/javascript">
$(function () {
$('button').click(function () {
$(document).ready(function () {
var x = $('textarea').val();
$('textarea').val('');
var label = $("#<%= Label1.ClientID %>");
var newdiv = $("<div></div>").html(x).attr('id', 'test');
$('#test1').append(newdiv);
var serializer = new XMLSerializer();
label.text(serializer.serializeToString(newdiv));
return false;
});
});
});
</script>
I think the bigger issue is asp.net changes the id and trying to get that in the code isn't that easy.
Can you use the name attribute? If so you can just look for the name attribute containing your name using the jquery selector '[ name *="YourName"]'
EDIT: I meant to add firebug is a great help for examining page elements and figuring exactly what you can use (Ex: asp.net adds a name attribute to a button by default) and whats going on (like your return false failing) then tweaking your jquery from the watch window.
Sample asp.net form content:
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" /></p>
<p>
<asp:Label ID="Label1" name="Label1" runat="server" Text="Label"></asp:Label>
</p>
<div id="test1"></div>
jquery:
$(function () {
$('[name*= "Button1"]').click(function () {
var x = $('[name*= "TextBox1"]').val();
var newdiv = $("<div></div>").html(x).attr('id', 'test');
$('#test1').append(newdiv);
$('[name*= "Label1"]').text($('#test1').html());
$('[name*= "TextBox1"]').val('');
return false;
});
});
Here's how to do it without jQuery:
<%# Page Inherits="System.Web.UI.Page" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="App_Resources/JavaScript/jquery-1.4.4.min.js"></script>
</head>
<body>
<form runat="server">
<asp:Label ID="testLabel" runat="server" Text="test" />
<script type="text/javascript">
$(document).ready(function ()
{
var label = document.getElementById("<%= testLabel.ClientID %>");
var div = document.createElement("div");
div.innerText = "content";
label.innerText = div.outerHTML;
});
</script>
</form>
</body>
</html>