I'm recreating a multi-Part form, but this question pertains specifically to a page where someone signing up can mark what (if any) commodities they may have or grow. You can see in my ASPX and ASPX.CS , how we have accomplished it thus far (mainly utilizing classes and some ajax/javascript). Now that we are recreating the system in PHP, I'm mulling over better (maybe simpler is a better word) ways to do this. Currently, the list of commodities is pulled from a SQL table, and a drop down is displayed next to each one (depending on it's unit of measurement - EX: Acre, Flock, Head, etc). After the joining member selects his crops, they are committed to a different table with his/her member ID and quantity of said commodity. See Below:
Question:
What, if there is one, is a better way to do this in PHP?
Thanks for your time =)
commodities.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="commodities.aspx.cs" Inherits="Secure_commodities" MasterPageFile="~/secure/joinfb.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server">
<style type="text/css">
collapsePanel {
background-color:white;
overflow:hidden;
}
collapsePanelHeader{
width:100%;
height:30px;
border-color: Red;
color:#FFF;
font-weight:bold;
}
.panelImage{
vertical-align:baseline;
}
</style>
<ajaxToolkit:ToolkitScriptManager ID="tk1" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<p class="formHeading"><b>Member Commodities</b></p>
<p>
<label>
Do you include any of the following production practices in your operation?
</label>
</p>
<table width="50%" cellpadding="2" cellspacing="2">
<tr>
<td>
<asp:CheckBox ID="chkOCC" runat="server" Text="Organic Crop Certification" />
</td>
<td>
<asp:CheckBox ID="chkUSDA" runat="server" Text="USDA Conservation Program" />
</td>
</tr>
</table>
<br/>
<p class="formHeading">
<asp:Panel ID="pnl1" runat="server">
<asp:Image ID="img1" runat="server" CssClass="panelImage" /> <asp:LinkButton ID="lnk1" runat="server" Text="Dairy/Livestock/Poultry" Font-Size="Medium" /> <asp:Label ID="lbl1" runat="server" />
</asp:Panel>
<%--<asp:ImageButton ID="Image1" runat="server" ImageUrl="~/images/bg-menu-main.png" AlternateText="(Show Details...)"/> --%>
<%--<asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label></p>--%>
<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
<asp:datalist id="dtlList1" DataKeyField="CMDY_Code" Width="100%" RepeatColumns="3" runat="server" OnItemDataBound="Bind_Unit_1"
CellPadding="1" CellSpacing="1" >
<ItemTemplate>
<table width="100%">
<tr>
<td style="width: auto" align="left" >
<asp:CheckBox Runat="server" ID="chk1" AutoPostBack="true"/>
</td>
<td style="width: 45%" align="left">
<asp:Label ID="lblTitle1" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Commodity") %>' />
</td>
<td style="width: 50%" align="left">
<asp:DropDownList ID="ddl1" Runat="server" CssClass="input" AutoPostBack="true" OnSelectedIndexChanged="dlQuantityChanged1" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender0" runat="Server"
TargetControlID="Panel1"
ExpandControlID="pnl1"
CollapseControlID="pnl1"
Collapsed="True"
SuppressPostBack="false"
ImageControlID="img1" CollapsedImage="http://test.com/images/expand_blue.jpg" ExpandedImage="../images/collapse_blue.jpg"
TextLabelID="lbl1" CollapsedText=" " ExpandedText=" "
/>
<p class="formHeading">
<asp:Panel ID="pnl2" runat="server">
<asp:Image ID="img2" runat="server" CssClass="panelImage" /> <asp:LinkButton ID="lnk2" runat="server" Text="Field Crops" Font-Size="Medium" /> <asp:Label ID="lbl2" runat="server" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanel" Height="0">
<asp:datalist id="dtlList2" DataKeyField="CMDY_Code" Width="100%" RepeatColumns="3" runat="server" OnItemDataBound="Bind_Unit_2"
CellPadding="1" CellSpacing="1" >
<ItemTemplate>
<table width="100%">
<tr>
<td style="width: auto" align="left" >
<asp:CheckBox Runat="server" ID="chk1" AutoPostBack="true"/>
</td>
<td style="width: 45%" align="left">
<asp:Label ID="lblTitle1" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Commodity") %>' />
</td>
<td style="width: 50%" align="left">
<asp:DropDownList ID="ddl1" Runat="server" CssClass="input" AutoPostBack="true" OnSelectedIndexChanged="dlQuantityChanged2" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server"
TargetControlID="Panel2"
ExpandControlID="pnl2"
CollapseControlID="pnl2"
Collapsed="True"
SuppressPostBack="false"
ImageControlID="img2" CollapsedImage="http://test.com/images/expand_blue.jpg" ExpandedImage="../images/collapse_blue.jpg"
TextLabelID="lbl2" CollapsedText=" " ExpandedText=" "
/>
<p class="formHeading">
<asp:Panel ID="pnl3" runat="server">
<asp:Image ID="img3" runat="server" CssClass="panelImage"/> <asp:LinkButton ID="lnk3" runat="server" Text="Horticulture/Forestry" Font-Size="Medium" /> <asp:Label ID="lbl3" runat="server" />
</asp:Panel>
<asp:Panel ID="Panel3" runat="server" CssClass="collapsePanel" Height="0">
<asp:datalist id="dtlList3" DataKeyField="CMDY_Code" Width="100%" RepeatColumns="3" runat="server" OnItemDataBound="Bind_Unit_3"
CellPadding="1" CellSpacing="1" >
<ItemTemplate>
<table width="100%">
<tr>
<td style="width: auto" align="left" >
<asp:CheckBox Runat="server" ID="chk1" AutoPostBack="true" />
</td>
<td style="width: 45%" align="left">
<asp:Label ID="lblTitle1" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Commodity") %>' />
</td>
<td style="width: 50%" align="left">
<asp:DropDownList ID="ddl1" Runat="server" CssClass="input" AutoPostBack="true" OnSelectedIndexChanged="dlQuantityChanged3" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="Server"
TargetControlID="Panel3"
ExpandControlID="pnl3"
CollapseControlID="pnl3"
Collapsed="True"
SuppressPostBack="false"
ImageControlID="img3" CollapsedImage="http://test.com/images/expand_blue.jpg" ExpandedImage="../images/collapse_blue.jpg"
TextLabelID="lbl3" CollapsedText=" " ExpandedText=" "
/>
<p class="formHeading">
<asp:Panel ID="pnl4" runat="server">
<asp:Image ID="img4" runat="server" CssClass="panelImage"/> <asp:LinkButton ID="lnk4" runat="server" Text="Trees/Vines" Font-Size="Medium" /> <asp:Label ID="lbl4" runat="server" />
</asp:Panel>
<asp:Panel ID="Panel4" runat="server" CssClass="collapsePanel" Height="0">
<asp:datalist id="dtlList4" DataKeyField="CMDY_Code" Width="100%" RepeatColumns="3" runat="server" OnItemDataBound="Bind_Unit_4"
CellPadding="1" CellSpacing="1" >
<ItemTemplate>
<table width="100%">
<tr>
<td style="width: auto" align="left" >
<asp:CheckBox Runat="server" ID="chk1" AutoPostBack="true" />
</td>
<td style="width: 45%" align="left">
<asp:Label ID="lblTitle1" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Commodity") %>' />
</td>
<td style="width: 50%" align="left">
<asp:DropDownList ID="ddl1" Runat="server" CssClass="input" AutoPostBack="true" OnSelectedIndexChanged="dlQuantityChanged4" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender3" runat="Server"
TargetControlID="Panel4"
ExpandControlID="pnl4"
CollapseControlID="pnl4"
Collapsed="True"
SuppressPostBack="false"
ImageControlID="img4" CollapsedImage="http://test.com/images/expand_blue.jpg" ExpandedImage="../images/collapse_blue.jpg"
TextLabelID="lbl4" CollapsedText=" " ExpandedText=" "
/>
<p class="formHeading">
<asp:Panel ID="pnl5" runat="server">
<asp:Image ID="img5" runat="server" CssClass="panelImage"/> <asp:LinkButton ID="lnk5" runat="server" Text="Vegetables" Font-Size="Medium" /> <asp:Label ID="lbl5" runat="server" />
</asp:Panel>
<asp:Panel ID="Panel5" runat="server" CssClass="collapsePanel" Height="0">
<asp:datalist id="dtlList5" DataKeyField="CMDY_Code" Width="100%" RepeatColumns="3" runat="server" OnItemDataBound="Bind_Unit_5"
CellPadding="1" CellSpacing="1" >
<ItemTemplate>
<table width="100%">
<tr>
<td style="width: auto" align="left" >
<asp:CheckBox Runat="server" ID="chk1" AutoPostBack="true" />
</td>
<td style="width: 45%" align="left">
<asp:Label ID="lblTitle1" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Commodity") %>' />
</td>
<td style="width: 50%" align="left">
<asp:DropDownList ID="ddl1" Runat="server" CssClass="input" AutoPostBack="true" OnSelectedIndexChanged="dlQuantityChanged5" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender4" runat="Server"
TargetControlID="Panel5"
ExpandControlID="pnl5"
CollapseControlID="pnl5"
Collapsed="True"
SuppressPostBack="false"
ImageControlID="img5" CollapsedImage="http://test.com/images/expand_blue.jpg" ExpandedImage="../images/collapse_blue.jpg"
TextLabelID="lbl5" CollapsedText=" " ExpandedText=" "
/>
<p>
<asp:Button ID="btnNext" runat="server" Text="Next" OnClick="btnNext_OnClick" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
commodities.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using TESTReg;
public partial class Secure_commodities : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Load_DList();
if (Request.QueryString["Mode"] == "Edit")
{
// populate each CMDY
Membership Member = new Membership();
Member = (Membership)Session.Contents["Membership"];
Load_CMDY(dtlList1, Member, CollapsiblePanelExtender0);
Load_CMDY(dtlList2, Member, CollapsiblePanelExtender1);
Load_CMDY(dtlList3, Member, CollapsiblePanelExtender2);
Load_CMDY(dtlList4, Member, CollapsiblePanelExtender3);
Load_CMDY(dtlList5, Member, CollapsiblePanelExtender4);
//List<Commodity> list = new List<Commodity>();
//for (int i = 0; i < Member.Commodities.Count; i++)
//{
// list.Add(Member.Commodities[i]);
//}
//dlChildren.DataSource = list;
////dlChildren.DataBind();
//foreach (DataListItem li in dlChildren.Items)
//{
// TextBox tFname = (TextBox)(li.FindControl("txtChildFName"));
// TextBox tLname = (TextBox)(li.FindControl("txtChildLName"));
// TextBox tDOB = (TextBox)(li.FindControl("txtChildDOB"));
// tFname.Text = Member.Dependent[li.ItemIndex].FirstName;
// tLname.Text = Member.Dependent[li.ItemIndex].LastName;
// tDOB.Text = Member.Dependent[li.ItemIndex].DOB;
//}
//ddlNumChild.ClearSelection();
//ddlNumChild.Items.FindByValue(Member.Dependent.Count.ToString()).Selected = true;
}
}
}
private void Load_CMDY(DataList dl, Membership Member, AjaxControlToolkit.CollapsiblePanelExtender cp)
{
for (int i = 0; i < Member.Commodities.Count; i++)
{
foreach (DataListItem li in dl.Items)
{
CheckBox _chk = (CheckBox)(li.FindControl("chk1"));
DropDownList _ddl = (DropDownList)(li.FindControl("ddl1"));
if (Member.Commodities[i].Cmdy_Code == dl.DataKeys[li.ItemIndex].ToString())
{
_chk.Checked = Member.Commodities[i].SelectedItem;
_ddl.ClearSelection();
_ddl.Items.FindByValue(Member.Commodities[i].Unit_Value).Selected = true;
cp.Collapsed = false;
break;
}
}
}
}
private void Load_DList()
{
string sSQL;
sSQL = "SELECT CMDY_CODE, Commodity, Category FROM _WJ_TBL_Commodity WHERE Category='Dairy/Livestock/Poultry' ORDER BY Commodity";
System.Data.DataSet ds = new System.Data.DataSet();
ds = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(System.Configuration.ConfigurationManager.ConnectionStrings["JoinFB_Conn"].ConnectionString,
System.Data.CommandType.Text, sSQL);
dtlList1.DataSource = ds;
dtlList1.DataBind();
sSQL = "SELECT CMDY_CODE, Commodity, Category FROM _WJ_TBL_Commodity WHERE Category='Field Crops' ORDER BY Commodity";
ds = new System.Data.DataSet();
ds = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(System.Configuration.ConfigurationManager.ConnectionStrings["JoinFB_Conn"].ConnectionString,
System.Data.CommandType.Text, sSQL);
dtlList2.DataSource = ds;
dtlList2.DataBind();
sSQL = "SELECT CMDY_CODE, Commodity, Category FROM _WJ_TBL_Commodity WHERE Category='Horticulture/Forestry' ORDER BY Commodity";
ds = new System.Data.DataSet();
ds = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(System.Configuration.ConfigurationManager.ConnectionStrings["JoinFB_Conn"].ConnectionString,
System.Data.CommandType.Text, sSQL);
dtlList3.DataSource = ds;
dtlList3.DataBind();
sSQL = "SELECT CMDY_CODE, Commodity, Category FROM _WJ_TBL_Commodity WHERE Category='Trees/Vines' ORDER BY Commodity";
ds = new System.Data.DataSet();
ds = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(System.Configuration.ConfigurationManager.ConnectionStrings["JoinFB_Conn"].ConnectionString,
System.Data.CommandType.Text, sSQL);
dtlList4.DataSource = ds;
dtlList4.DataBind();
sSQL = "SELECT CMDY_CODE, Commodity, Category FROM _WJ_TBL_Commodity WHERE Category='Vegetables' ORDER BY Commodity";
ds = new System.Data.DataSet();
ds = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(System.Configuration.ConfigurationManager.ConnectionStrings["JoinFB_Conn"].ConnectionString,
System.Data.CommandType.Text, sSQL);
dtlList5.DataSource = ds;
dtlList5.DataBind();
}
protected void dlQuantityChanged1(object sender, EventArgs e)
{
DropDownList _dl = (DropDownList)sender;
DataListItem _dlItem = (DataListItem)_dl.NamingContainer;
// get id of row
CheckBox _chk = (CheckBox)_dlItem.FindControl("chk1");
CheckCMDY(_chk, _dl);
}
protected void dlQuantityChanged2(object sender, EventArgs e)
{
DropDownList _dl = (DropDownList)sender;
DataListItem _dlItem = (DataListItem)_dl.NamingContainer;
// get id of row
CheckBox _chk = (CheckBox)_dlItem.FindControl("chk1");
CheckCMDY(_chk, _dl);
}
protected void dlQuantityChanged3(object sender, EventArgs e)
{
DropDownList _dl = (DropDownList)sender;
DataListItem _dlItem = (DataListItem)_dl.NamingContainer;
// get id of row
CheckBox _chk = (CheckBox)_dlItem.FindControl("chk1");
CheckCMDY(_chk, _dl);
}
protected void dlQuantityChanged4(object sender, EventArgs e)
{
DropDownList _dl = (DropDownList)sender;
DataListItem _dlItem = (DataListItem)_dl.NamingContainer;
// get id of row
CheckBox _chk = (CheckBox)_dlItem.FindControl("chk1");
CheckCMDY(_chk, _dl);
}
protected void dlQuantityChanged5(object sender, EventArgs e)
{
DropDownList _dl = (DropDownList)sender;
DataListItem _dlItem = (DataListItem)_dl.NamingContainer;
// get id of row
CheckBox _chk = (CheckBox)_dlItem.FindControl("chk1");
CheckCMDY(_chk, _dl);
}
private void CheckCMDY(CheckBox chk, DropDownList dl)
{
if (dl.SelectedIndex > 0)
chk.Checked = true;
}
protected void Bind_Unit_1(object sender, DataListItemEventArgs e)
{
Bind_DDL_Unit(e, dtlList1, "ddl1");
}
protected void Bind_Unit_2(object sender, DataListItemEventArgs e)
{
Bind_DDL_Unit(e, dtlList2, "ddl1");
}
protected void Bind_Unit_3(object sender, DataListItemEventArgs e)
{
Bind_DDL_Unit(e, dtlList3, "ddl1");
}
protected void Bind_Unit_4(object sender, DataListItemEventArgs e)
{
Bind_DDL_Unit(e, dtlList4, "ddl1");
}
protected void Bind_Unit_5(object sender, DataListItemEventArgs e)
{
Bind_DDL_Unit(e, dtlList5, "ddl1");
}
protected void Bind_DDL_Unit(DataListItemEventArgs e, DataList dtlList, string cmdy_ddl)
{
string sSQL;
DropDownList ddl;
int x;
sSQL = "select DISTINCT m.Unit_CODE FROM _WJ_TBL_Unit m, _WJ_TBL_Commodity s WHERE s.CMDY_CODE=#CMDY_CODE and m.unit_Code=s.unit_Code";
// Retrieve Unit Code first
x = Convert.ToInt32(Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteScalar(ConfigurationManager.ConnectionStrings["JoinFB_Conn"].ConnectionString,
System.Data.CommandType.Text, sSQL, new SqlParameter("#CMDY_CODE", dtlList.DataKeys[dtlList.Items.Count])));
if (x > 0)
{
sSQL = "SELECT Unit, Unit_Value FROM _WJ_TBL_Unit WHERE Unit_Code=#Unit_Code";
DataSet ds = new DataSet();
ds = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(ConfigurationManager.ConnectionStrings["JoinFB_Conn"].ConnectionString,
System.Data.CommandType.Text, sSQL, new SqlParameter("#Unit_Code", x));
ddl = (DropDownList)(e.Item.FindControl(cmdy_ddl));
ddl.DataSource = ds;
ddl.DataTextField = "Unit";
ddl.DataValueField = "Unit_Value";
ddl.DataBind();
}
}
protected void btnNext_OnClick(object sender, EventArgs e)
{
TESTReg.Membership MemberInfo = new TESTReg.Membership();
MemberInfo = (TESTReg.Membership)Session.Contents["Membership"];
//MemberInfo.CMDY.Clear();
//MemberInfo.Produce.Clear();
MemberInfo.Commodities.Clear();
// Process Datalist
ProcessCMDY(dtlList1, MemberInfo, "ddl1", "chk1", "lblTitle1");
ProcessCMDY(dtlList2, MemberInfo, "ddl1", "chk1", "lblTitle1");
ProcessCMDY(dtlList3, MemberInfo, "ddl1", "chk1", "lblTitle1");
ProcessCMDY(dtlList4, MemberInfo, "ddl1", "chk1", "lblTitle1");
ProcessCMDY(dtlList5, MemberInfo, "ddl1", "chk1", "lblTitle1");
if (chkOCC.Checked)
MemberInfo.Organic_Crop_Cert = true;
else
MemberInfo.Organic_Crop_Cert = false;
if (chkUSDA.Checked)
MemberInfo.USDA_Cons_Prog = true;
else
MemberInfo.USDA_Cons_Prog = false;
Session.Contents["Membership"] = MemberInfo;
if (Request.QueryString["Mode"] == "Edit")
Response.Redirect("confirmation.aspx");
else
Response.Redirect("Payment.aspx");
}
private void ProcessCMDY(DataList dl, TESTReg.Membership MemberInfo, string ddlist, string chkbox, string lbel)
{
// Saves commodity checked
foreach (DataListItem di in dl.Items)
{
DropDownList ddl;
CheckBox chk;
Label lbl;
ddl = (DropDownList)(di.FindControl(ddlist));
chk = (CheckBox)(di.FindControl(chkbox));
lbl = (Label)(di.FindControl(lbel));
if (chk.Checked)
{
TESTReg.Commodity Commodities = new TESTReg.Commodity();
//MemberInfo.CMDY.Add(dl.DataKeys[di.ItemIndex]);
//MemberInfo.Produce.Add(ddl.SelectedItem.Value);
Commodities.Cmdy_Code = dl.DataKeys[di.ItemIndex].ToString();
Commodities.Unit_Value = Convert.ToString(ddl.SelectedItem.Value);
Commodities.Unit_Amt = ddl.SelectedItem.Text;
Commodities.Cmdy = lbl.Text;
Commodities.SelectedItem = chk.Checked;
MemberInfo.Commodities.Add(Commodities);
}
}
//string t1;
//string t2;
//for (int i = 0; i < MemberInfo.Commodities.Count; i++)
//{
// t1 = MemberInfo.Commodities[i].Cmdy;
// t2 = MemberInfo.Commodities[i].Unit_Amt;
//}
//return MemberInfo;
}
}
I am creating a dijit Dialog and then hiding it with a OK/Cancel button. As the dialog hides, I always get the follow errors in the javascript console:
exception in animation handler for: onEnd
TypeError: Cannot read property 'remove' of undefined(…)
See here: https://www.youtube.com/watch?v=QcEUsllrRGs
The error doesn't seem to affect anything, but I'd sure love to resolve it so I don't confuse that error for a real functional issue while debugging.
I've read many suggestions regarding similar errors... using lang.hitch, disconnecting from events, but nothing seems to work/be applicable. Help?!
Here's a snippet of my Dialog code:
function showMessageDialog(title, message, width) {
var content,
focusOnOkButton = function () {
dojo.byId('messageDialogOk').focus();
};
if (!dijit.byId("messageDialog")) {
new dijit.Dialog({}, "messageDialog").startup();
new dijit.form.Button({
onClick: function() {
dijit.byId('messageDialog').hide();
}
}, "messageDialogOk").startup();
}
if (width) {
dojo.byId('messageDialogTable').style.width = width + "px";
} else {
dojo.byId('messageDialogTable').style.width = "450px";
}
dijit.byId('messageDialog').resize();
dijit.byId('messageDialog').set("title", title);
content = dojo.byId("messageDialogMessage");
dojo.empty(content);
content.innerHTML = message;
dijit.byId('messageDialog').show();
setTimeout(focusOnOkButton, 50);
}
....and the associated HTML:
<div id="messageDialog" style="display:none;">
<table id="messageDialogTable" style="width:450px;table-layout: fixed;">
<tr>
<td colspan="2" style="padding: 0 0px 0px 5px;">
<table style="width: 100%;">
<tr>
<td id="messageDialogMessage" style="font-size: 10pt;"></td>
</tr>
<tr>
<td style="padding: 5px;text-align: center;">
<div id="messageDialogOk">OK</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I tried to duplicate the problem with a simple JSFiddle example, but could not... so there's something going in in my app... but not sure what it could be.
I have a strange issue in a datalist
<asp:DataList ID="dl" RepeatColumns="8" runat="server" GridLines="None" OnItemDataBound="dl_idb"
OnItemCommand="dl_ic" RepeatDirection="Horizontal">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="margin-left: 15px; margin-right: 15px;">
<tr>
<td>
<li>
<asp:ImageButton ID="imgMat" runat="server" Width="100" Height="100" ImageUrl='<%# DataBinder.Eval(Container, "DataItem.imgMat")%>'
CommandArgument='<%# DataBinder.Eval(Container, "DataItem.Matid")%>' ToolTip='<%# DataBinder.Eval(Container, "DataItem.ImgMat")%>'
CommandName="gallery" />
</li>
and on server side
protected void dl_IC(object source, DataListCommandEventArgs e)
{
try
{
if (e.CommandName.ToString() == "gallery")
{
but when the page is load I am not able to click the image, i.e. it is not in clickable mode while when I open the same page in Firefox or Chrome I can click the image and Item command event is also firing.
Additional Info
I am binding the datalist in > If(!ispostback) event
on Row Databound I am doing this
ImageButton imgM = (ImageButton)e.Item.FindControl("imgMat");
imgM .Attributes.Add("onload", "DoSomething('" + string value + "'," + 0 + ")");
Any help ?
Not positive if this is your problem or not, but you're server side method is "dl_IC" while the client side OnItemCommand is set to "dl_ic". Try making them match case and see if it's more reliable.
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.
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