I am using the ModalPopupExtender control to display a modal popup dialog when a button is click. The problem is that dragging the dialog results in an 'scrollleft is null or not an object' error.
Here's a video demo
..and here is ALL the code:
If possible, I'd like to resolve this problem w/o resorting to modifying the AjaxToolkit scripts themselves.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
<link href="Default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function onOk() {
//form1.submit();
}
</script>
<script type="text/javascript">
var clientid;
function fnSetFocus(txtClientId) {
clientid = txtClientId;
setTimeout("fnFocus()", 1000);
}
function fnFocus() {
//debugger;
if (document.getElementById("pnlModal").style.display != "none")
eval("document.getElementById('" + clientid + "').focus()");
}
function fnClickOK(sender, e) {
__doPostBack(sender, e);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
Clicking the button will bring up the modal dialog<br />
<br />
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server" TargetControlID="Button1"
PopupDragHandleControlID="programmaticPopupDragHandle" PopupControlID="pnlModal"
OkControlID="btnOK" CancelControlID="btnCancel" DropShadow="true" OnOkScript="onOk();"
BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<br />
<asp:Panel ID="pnlModal" runat="server" Style="display: None" BackColor="#CCCCCC">
<asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black; text-align: center;">
Caption
</asp:Panel>
<br />
<table>
<tr>
<td>
<asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
<asp:Button ID="btnOK" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<br />
<br />
</div>
</form>
</body>
</html>
Partial Class MyModalSimple
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Button1.Attributes.Add("onclick", "fnSetFocus('" + txtFirst.ClientID + "');")
btnOK.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOK.UniqueID, "")
End If
End Sub
Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click
lblMessage.Text = "Hi, " & txtFirst.Text & " " & txtLast.Text
End Sub
End Class
Unfortunately this is a known bug in the DragPanelExtender. I would recommend dropping the modal extender all together if it's an option and you're comfortable with javascript.
With jQuery/jQuery UI for example, your page would look like:
<form id="form1" runat="server">
<br />
Clicking the button will bring up the modal dialog<br />
<br />
<div>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<div id="myModal" Style="display: None" background="#CCCCCC" title="Caption/Dialog Title">
<table>
<tr>
<td>
<asp:Label ID="lblFirst" runat="server" Text="First" />
</td>
<td>
<asp:TextBox ID="txtFirst" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLast" runat="server" Text="Last" />
</td>
<td>
<asp:TextBox ID="txtLast" runat="server" />
</td>
</tr>
</table>
</div>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<br />
<br />
</div>
</form>
<script type="text/javascript">
$(function() {
$("#<%= Button1.ClientID %>").click() {
$("#myModal").dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
}
});
</script>
This is a whole different way of programming, but results in a much richer UI experience for the user. If you're willing to learn jQuery and how it hooks up, it's a really natural/fluid syntax that can add a great deal of power/flexibility to your web pages. Now keep in mind that I prefer jQuery but that there are many other javascript libraries available. You should at least browse around and see what looks the most comfortable if you're just getting started...it's possible since you're from a VB background (I'm from C#) that another libraries coding style/syntax is much more appealing.
Now if you're unwilling to go down that road and it's too unfamiliar, your only alternative as far as I can see is to do what you don't want to...compile the AJAX Control Toolkit yourself. If you want to go this route, grab the latest source from codeplex and modify the below section of Release\AjaxControlToolkit\Compat\DragDrop\DragDropScripts.js:
_drag: function(isInitialDrag) {
var ev = window._event;
var mousePosition = { x: ev.clientX, y: ev.clientY };
To this:
_drag: function(isInitialDrag) {
if (!this._activeDragVisual) return;
var ev = window._event;
var mousePosition = { x: ev.clientX, y: ev.clientY };
The _onScrollerTick operation in certain browsers bombs out and nulls the dragVisual function. Credit is due here: A post on the ASP.Net forums by freakyer led me down this debug path to figure out where it's breaking...but I see no other solution as there is an actual bug in certain browsers not-fixable without a script change and recompile.
I urge you to consider the jQuery/other framework path, there's a ton of community support and examples out there to help get you started. This question from a while back is worth a read if the framework options interest you at all.
Related
I have been given an "old-school" application that uses asp.net membership provider for logins. My aim is to redirect users to "ChangePassword.aspx" page when they try to login - if they have a dirty flag set in the db.
Dim hash As SecurePassword = New SecurePassword()
If Not hash.IsAccountSecurelyUpgraded(myLogin.UserName) Then
Response.Redirect("/aspnet_membership/ChangePassword.aspx")
End If
If Membership.ValidateUser(myLogin.UserName, myLogin.Password) Then
...some code...
End If
I get error
A page can have only one server-side form tag
ChangePassword.aspx
<%# Page Language="VB" AutoEventWireup="false" Inherits="VL.ChangePassword" Codebehind="ChangePassword.aspx.vb" %>
<%# Register TagPrefix="uc1" TagName="Header" Src="../UI/Template/Header.ascx" %>
<%# Register TagPrefix="uc1" TagName="Footer" Src="../UI/Template/Footer.ascx" %>
<uc1:header id="Header1" runat="server"></uc1:header>
<form id="ChangePassword" runat="server">
<h2>Change Your Password</h2>
...
</form>
<uc1:footer id="Footer1" runat="server"></uc1:footer>
Other Urls in the site don't give this error. (they give unauthenticated error)
Site.master
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">User Account </span><br />
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
</div>
<div id="content">
<asp:contentplaceholder id="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:contentplaceholder>
</div>
<div id="navigation">
<asp:ContentPlaceHolder ID="LoginContent" runat="server">
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
Welcome back,
<asp:LoginName ID="LoginName1" runat="server" />.
<br />
<asp:HyperLink ID="lnkUpdateSettings" runat="server" NavigateUrl="~/aspnet_membership/AdditionalUserInfo.aspx">Update Your Settings</asp:HyperLink>
</LoggedInTemplate>
<AnonymousTemplate>
Hello, stranger.
</AnonymousTemplate>
</asp:LoginView>
<br />
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" />
<br /><br />
</asp:ContentPlaceHolder>
<ul>...</ul>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</div>
</form>
</div>
</body>
It turned out the header UserControl had scripts added in codebehind.
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
LoginPanel.Visible = Not UserManager.IsLoggedIn()
If System.IO.Path.GetFileName(Request.ServerVariables("SCRIPT_NAME")) = "ChangePassword.aspx" Or
System.IO.Path.GetFileName(Request.ServerVariables("SCRIPT_NAME")) = "RecoverPassword.aspx"
(System.IO.Path.GetFileName(Request.ServerVariables("SCRIPT_NAME")) = "contact.aspx" And Not UserManager.IsLoggedIn()) Then
LoginPanel.Visible = False
End If
If Not Page.IsPostBack Then
Login_Check()
End If
End Sub
After adding, ChangePassword.aspx to the list, it started working
I found some other questions about this argument but I can't get anything to work.
I have a repeater with datasource, this is my repeater code:
<div class="container dafareoggi" id="divDaFareOggi">
<div runat="server" id="divSegnaposto"></div>
<asp:Repeater runat="server" ID="rptDaFareOggi" DataSourceID="SqlAttivitaDaFareOggi">
<ItemTemplate>
<div id="<%# Eval("id") %>">
<div class="div-titolo" title="<%# Eval("Titolo") %>"><%# Eval("Titolo") %></div>
<div class="div-testo" title="<%# Eval("Note") %>"><%# Eval("Note") %></div>
<div>
<table style="width: 100%;margin-top:0.5em;padding-right:0.2em;">
<tr>
<td style="width: 50%; text-align: left;">
<asp:ImageButton runat="server" ImageUrl="~/images/gabri.png" Width="2.3em" Height="2.3em" ToolTip='<%#Eval("tecnico")%>' Enabled="false" Visible='<%# IIf(Eval("idutente") = 8, True, False) %>'/>
<asp:ImageButton runat="server" ImageUrl="~/images/giuse.png" Width="2.3em" Height="2.3em" ToolTip='<%#Eval("tecnico")%>' Enabled="false" Visible='<%# IIf(Eval("idutente") = 2, True, False) %>'/>
<asp:ImageButton runat="server" ImageUrl="~/images/robi.png" Width="2.3em" Height="2.3em" ToolTip='<%#Eval("tecnico")%>' Enabled="false" Visible='<%# IIf(Eval("idutente") = 5, True, False) %>'/>
</td>
<td style="width: 50%; text-align: right; ">
<asp:LinkButton CommandName="delAttivita" CommandArgument='<%#Eval("ID")%>' runat="server" ID="lnkDelAtt" CausesValidation="False" OnClientClick="return confirm('Sei sicuro di voler eliminare questa attivita?');"><i class="fa fa-trash fa-lg" title="Elimina attività "></i></asp:LinkButton>
<asp:LinkButton CommandName="editAttivita" CommandArgument='<%#Eval("ID")%>' runat="server" ID="lnkEditAtt"><i class="fa fa-pencil-square fa-lg" title="Modifica attività "></i></asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
In the repeater there is a place card div with id divSegnaposto (2nd row) and then a bunch of div may be loaded accordingly to data read from the db.
What I want is that when there are no data to load, so divSegnaposto is the only item, to show it and, vice versa, when there are 1 ore more other divs, to hide it.
I figure that I should count the number of items inside the repeater or rows inside datasouce (I'm using EF), so I tried different approach in repeater_databound_event, but for example repeater.items.count is always 0.
How can I achieve the goal?
I ended up using a linq query that gets the same as the sqldatasource at itembound event and then I check if it's empty or not and show\hide the placecard accordingly. I don't like it too much because makes me mad: I already have all the information I need inside the repeater or the sql data source, so I guess I thought there was an easier, less code-consuming way to do it. But all the answers I found are more complicated than just re-do the query in code behind...
I have image links of a website's images stored in my DB but when I show them on my asp page using repeater or data list which im building, it shows some where pics and somewhere just boxes and no
image, can anyone help me?
here is my datalist code to show products but some images are being shown and some are like broken icons and empty box having no image, and i have image links of a website which i am displaying in
data list and i have checked all links as well on web they work perfectly fine but don't show anything in my data list web form,is this a styling issue or binding?
code of Data list is given below
<div style=" border:inset; margin-left:100px; display:inline-block;">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal">
<ItemTemplate>
<div class="span4" style="display:inline-block; border-top:1px; background-color:none;width:190px; height:440px; border:solid; border-width:1px; border-spacing:2px 4px; border-bottom:inset; border-top-width:1px;" runat="server"><br />
<div class="products" style="height:430px; width:189x; border:inset;border-style:none;border-spacing:2px 4px;">
<asp:Image ID="ImgId" runat="server" style=" height:160px; width:160px;" ImageUrl='<%#(DataBinder.Eval(Container.DataItem,"ImageLink")) %>' /> <br />
<h3 class="title" style="font-family:Pristina;font-size:medium;height:30px; margin-bottom:-15px;"> <b><%# Eval("Name") %></b><br /><br /><br /></h3>
<br />
<p class="price" style="font-family:Pristina;font-size:medium; height:30px;padding-top:40px; "><b>Price</b> <%# Eval("Price") %> <br /><br /><br /><br /><br /></p><br />
<br />
<b style="margin-bottom:-20px">www.shophive.com</b>
</div>
</div>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top"/>
</asp:DataList>
</div>
I have been using a javascript editor and it works fine in it's built-in browser but when I try it in IE and Firefox it loads but then doesn't function.
The HTML is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<noscript>
<p>This page requires JavaScript. Please turn on JavaScript if your browser supports it and reload the page.</p>
</noscript>
<script type = "text/javascript" src="jscripts/pvar.js">
</script>
<title></title>
</head>
<body>
<form name="form1">
Version 2012.10.1.1a
<h2>
Panasas Sizing Form
</h2>
<br>
<table colspan='3' border='0'>
<tr>
<td align="left"> <input type="text" name="textq1" id="dtextq1" readonly="readonly" value="How will this be sized?" style="border: 0"/>
<select name="question1" id="dquestion1" value="" onfocus="this.style.background='khaki'" onblur="this.style.background='white'" onchange="setOptions1(document.form1.question1.options[document.form1.question1.selectedIndex].value)">
<Option value=""></option>
<Option value="Capacity">Capacity</option>
<Option value="Bandwidth">Bandwidth</option>
<Option value="Both">Both</option>
</select></td>
<tr>
<td align="left" id="q1c1"> </td>
<tr>
<td align="left" id="q2c1"> </td>
<tr>
<td align="left" id="q3c1"> </td>
<tr>
<td align="left" id="q4c1"> </td>
<tr>
<td align="left" id="q5c1"> </td>
<tr>
<td align="left" id="q6c1"> </td>
<tr>
<td align="left" id="q7c1"> </td>
</table>
</form>
</body>
</html>
The Javascript is as follows:
function setOptions1(chosen)
{
var label=document.getElementById;
var textbox1="";
var textbox2="";
if (chosen == "") {
label('q1c1').innerHTML="";
label('q2c1').innerHTML="";
label('q3c1').innerHTML="";
label('q4c1').innerHTML="";
label('q5c1').innerHTML="";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Capacity") {
label('q1c1').innerHTML="How much capacity do you require?";
label('q1c1').appendChild(document.createTextNode(' '));
textbox1 = document.createElement('INPUT');
textbox1.type = 'text';
textbox1.value = 0;
textbox1.size = 2;
textbox1.maxLength = 4;
label('q1c1').appendChild(textbox1);
label('q1c1').appendChild(document.createTextNode(' '));
textbox2 = document.createElement('SELECT');
textbox2_option = document.createElement('option');
textbox2_option= new Option ('GB',1,true,false);
textbox2_option= new Option ('GiB',2,false,false);
textbox2.add(textbox2_option);
label('q1c1').appendChild(textbox2);
label('q2c1').innerHTML="Average File Size:";
label('q3c1').innerHTML="Network efficiency:";
label('q4c1').innerHTML="What price level?";
label('q5c1').innerHTML="Would you like to include an IB Router?";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Bandwidth") {
label('q1c1').innerHTML="What are the bandwidth requirements?";
label('q2c1').innerHTML="Network efficiency:";
label('q3c1').innerHTML="Average File Size:";
label('q4c1').innerHTML="What price level?";
label('q5c1').innerHTML="Would you like to include an IB Router?";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Both") {
label('q1c1').innerHTML="How much capacity do you require?";
label('q2c1').innerHTML="Average File Size:";
label('q3c1').innerHTML="What are the bandwidth requirements?";
label('q4c1').innerHTML="Network efficiency:";
label('q5c1').innerHTML="What price level?";
label('q6c1').innerHTML="Would you like to include an IB Router?";
label('q7c1').innerHTML="";
}
}//end function
The problem is this line:
var label=document.getElementById;
Replace it with
function label(s) {
return document.getElementById(s);
}
Host objects are picky -- they don't always like to be treated like regular function references.
BTW: I cut-and-pasted your code into a file than ran it through Google Chrome. The error message was an invalid invocation which let me down replacing the definition of label as my first debugging step.
my code gota datalist with radio button and iv made it single selectable onitemdatabound....now im trying to evaluate a hiddenfield on basis of selected radio button
my code goes like this
aspx code
<asp:DataList ID="DataList1" runat="server" RepeatColumns = "4" CssClass="datalist1"
RepeatLayout = "Table" OnItemDataBound="SOMENAMEItemBound"
CellSpacing="20" onselectedindexchanged="DataList1_SelectedIndexChanged">
<ItemTemplate>
<br />
<table cellpadding = "5px" cellspacing = "0" class="dlTable">
<tr>
<td align="center">
<a href="<%#Eval("FilePath")%>" target="_blank"><asp:Image ID="Image1" runat="server" CssClass="imu" ImageUrl = '<%# Eval("FilePath")%>'
Width = "100px" Height = "100px" style ="cursor:pointer" />
</td>
</tr>
<tr >
<td align="center">
<asp:RadioButton ID="rdb" runat="server" OnCheckedChanged="rdb_click" AutoPostBack="True" />
<asp:HiddenField ID="HiddenField1" runat="server" Value = '<%#Eval("ID")%>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
code behind
protected void SOMENAMEItemBound(object sender, DataListItemEventArgs e)
{
RadioButton rdb;
rdb = (RadioButton)e.Item.FindControl("rdb");
if (rdb != null)
rdb.Attributes.Add("onclick", "CheckOnes(this);");
}
protected void rdb_click(object sender, EventArgs e)
{
for (int i = 0; i < DataList1.Items.Count; i++)
{
RadioButton rdb;
rdb = (RadioButton)DataList1.Items[i].FindControl("rdb");
if (rdb != null)
{
if (rdb.Checked)
{
HiddenField hf = (HiddenField)DataList1.Items[i].FindControl("HiddenField1");
Response.Write(hf.Value);
}
}
}
}
the javascript im using...
function CheckOnes(spanChk){
var oItem = spanChk.children;
var theBox= (spanChk.type=="radio") ?
spanChk : spanChk.children.item[0];
xState=theBox.unchecked;
elm=theBox.form.elements;
for(i=0;i<elm.length;i++)
if(elm[i].type=="radio" &&
elm[i].id!=theBox.id)
{
elm[i].checked=xState;
}
}
iam getting an error like this
Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
Details: Error parsing near 'pload Demonstration|'.
is there any other way to do this or can nyone plz help to get rid of this problem
The problem is probably your Response.Write() call. Take a look at this blog post. It outlines the reasons why this particular exception shows up, and how to prevent it. Also take a look at this StackOverflow thread.
Okey lets just remove response write...now i have following in my codebehind...rest is same
label5.text=hf.value.ToString();
now i am able to evaluate Label when i use update panel nd nested updatepanel like this
<asp:UpdatePanel ID="UpdatePanel9" runat="server" >
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" RepeatColumns = "4"
CssClass="datalist1" OnItemDataBound="SOMENAMEItemBound"
CellSpacing="10" onselectedindexchanged="DataList1_SelectedIndexChanged"
HorizontalAlign="Center" Width="500px">
<ItemTemplate>
<br />
<table cellpadding = "5px" cellspacing = "0" class="dlTable">
<tr>
<td align="center">
<a href="<%#Eval("FilePath")%>" target="_blank"><asp:Image ID="Image1" runat="server" CssClass="imu" ImageUrl = '<%# Eval("FilePath")%>'
Width = "100px" Height = "100px" style ="cursor:pointer" />
</td>
</tr>
<tr >
<td align="center">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="rdb" />
</Triggers>
<ContentTemplate>
<asp:RadioButton ID="rdb" runat="server" OnCheckedChanged="rdb_click" AutoPostBack="true" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:HiddenField ID="HiddenField1" runat="server" Value = '<%#Eval("ID")%>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
is there a way to to get this done without full page postback....asyncpostback trigger doesnt seem to work