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
Related
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;
}
}
Here is the server side c# code
protected void btnUpload_Click1(object sender, EventArgs e)
{
HttpPostedFile file = Request.Files["btnFileUpload"];
if (file != null && file.ContentLength > 0)
{
string fname = Path.GetFileName(file.FileName);
file.SaveAs(Server.MapPath(Path.Combine("~/App_Data/", fname)));
}
}
This code works good in Chrome and Mozilla but in ie 8,9 Request.Files["btnFileUpload"] gets null.
Here is the html ...
<form id="form1" runat="server" enctype="multipart/form-data">
<div class="fileName">
</div>
<div id="plus" class="uploadPlusBtn">
</div>
<input type="file" id="btnFileUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click1" Text="Upload" />
</form>
And the added jQuery
$(function () {
var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
var fileInput = $('#btnFileUpload').wrap(wrapper);
$('#plus').click(function () {
fileInput.click();
});
});
I have IE 8 and your code is working fine for me, Request.Files["btnFileUpload"] is returning HttpPostedFile. Here is the .aspx code:
!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>
<script>
$(function () {
var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
var fileInput = $('#btnFileUpload').wrap(wrapper);
$('#plus').click(function () {
fileInput.click();
});
});
</script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<div class="fileName">
</div>
<div id="plus" class="uploadPlusBtn">
</div>
<input type="file" id="btnFileUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click1" Text="Upload" />
</form>
</body>
</html>
If you can't solve this problem try to use http://www.uploadify.com/
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;
while attempting to learn PageMethods, I've come across a peculiar problem.
When running the program, the program enters the error function. Chrome developer tools shows the following error:
GET http://localhost:62316/Advertising/WebForm1.aspx/GetCurrentDate ScriptResource.axd:4844
Here is my asp code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type ="text/javascript" src="../Includes/jquery-1.4.2.js"></script>
<script type ="text/javascript">
function call() {
PageMethods.GetCurrentDate(success, fail);
return false;
}
function success(msg) {
alert("Success "+msg);
}
function fail(xhr, status) {
alert("Fail "+xhr.responseText+" "+status);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="Manager" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:Button ID="test" Text="Get Text" runat="server" OnClientClick="javascript: return call();" />
</form>
</body>
</html>
Here is the C# code:
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string GetCurrentDate()
{
return "foo";
}
The objects that are shown in the error box are undefined and null respectively. Furthermore, with a breakpoint in the function, it has been concluded that the function is never stepped into. What am I doing wrong?
Change the below line
<asp:Button ID="test" Text="Get Text" runat="server" OnClientClick="javascript: return call();" />
as
<asp:Button ID="test" Text="Get Text" runat="server" OnClientClick="call(); return false;" />
It should work
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>