Develop Reference

Multiple jquery dialogue for each click in asp.net

I have gridview where i am editing row in a separate popup window by using a jquery ui dialogue.My question is Can we have a seperate window for each row edit in gridview.I am using a usercontrol for adding data and same user control is used in popup window by using different DIV
i am posting code what i have done
This is where i am entering data in to database,DIV is addID user control is TestUserControl
<div id="addID" class="divTable">
<div class="divRow">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<uc1:TestUserControl runat="server" ID="idAdd" />
<div>
</div>
This is the div ,idMain responsible for editing which i will popup in jquery dialgue
<div id="idMain" style="display: none; background-color: #EEEEEE" class="divTable">
<div class="divRow">
<asp:UpdatePanel ID="updatePnlEdit" runat="server">
<ContentTemplate>
<div id="iForm" class="divRow">
<div class="divRow">
<uc1:TestUserControl runat="server" ID="IdUserControl" />
<div>
following is the jquery i am using to popup
function showIdDetails(divobj, pagetitle, width, height) {
$("#" + divobj)
.dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
},
title: pagetitle,
appendTo: "form",
modal: false,
draggable: true,
resizable: true,
width: width
})
Finally i will call showIdDetails function in gridview row command as like shown below
ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "alert", "showIdDetails('idMain','ID DETAILS','600','400');", true);
As of now what is happening is foreach edit click i am popping up single window which contains the row i clicked.And what i want is foreach click i want to popup seperate window contains corresponding row,how to do it?

Dynamically change cursor style for certain databound datalist items?

I have a datalist that is bound to a datatable that looks like this:
EmpId RoomNum
A230 201
A235 202
null 203
F520 204
null 205
As you can see some RoomNums don't have an EmpId. These are the items that will have the cursor style changed to the "hand". The datalist items with an EmpId will have the "No" cursor style. This only applies to the datalist.
And here's my datalist:
<asp:DataList ID="DataListThumb" runat="server" RepeatColumns="5" >
<ItemTemplate>
<div style="padding: 8px;width:72px;height:72px">
<asp:LinkButton id="LinkButton1" runat="server" OnClientClick='<%# "return ShowRoom(" + Eval("RoomNum") + ");" %>'>
<div style='width:72px;height:72px; background-image:url(<%# Eval("image_path") %>)'>
<div style="width: 72px; padding-top: 3px; overflow: hidden;">
<div style="text-align: left; width:72px; float:left;">
<asp:Label ID="Label1" CommandName="cmd_RoomNum" CommandArgument='<%# Eval("RoomNum")%>'
runat="server" Text='<%# Eval("RoomNum")%>' Font-Size="11pt"></asp:Label>
</div>
</div>
</div>
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
So how can I change the cursor style dynamically in the datalist items?
Thanks.

I would do a couple things here:
Add the following CSS classes:
.noEmpId {
cursor: not-allowed;
}
.validEmpId {
cursor: pointer;
}
Then, I assume you want the cursor style on your LinkButton, so do something like this in your LinkButton:
<asp:LinkButton CssClass='<%# Eval("EmpId") == null ? "noEmpId" : "validEmpId" %>' id="LinkButton1"></asp:LinkButton>
This doesn't keep anyone from clicking the button though. If you want to do that then you'd need to something like..
<asp:LinkButton OnClientClick='<%# Eval("EmpId") == null ? "return false;" : "return ShowRoom(" + Eval("RoomNum") + ");" %>' id="LinkButton1"></asp:LinkButton>

You can control what the cursor looks like through css. You could define the following two classes in your css.
.cursor-hand { cursor: pointer }
.cursor-no { cursor: not-allowed }
And then you could conditionally apply the class to your item. It's a bit convoluted. But you could define a method in your code behind like so:
public string GetStyle(string empId)
{
return empId == null ? "cursor-hand" : "cursor-no";
}
And then in your ItemTemplate somewhere, not sure for which element.
<div class='<%# GetStyle(Eval("empId")) %>' ...> ... </div>
I hope this answers your question.
That being said, I am not sure if this will exactly accomplish the desired result. Just because a cursor is 'NO' does not mean you can't click on an item.

FileUpload HasFile returns false

I know that this issue is common however in my case, I'm involving a javascript so that could be the problem. Here's what I'm doing. I'm calling the asp FileUpload to allow the user to select an image. Then by calling the onchange event, I'm firing a javascript which in turn makes a hidden div become visible. The div contains a Confirm button, which then fires the upload function:
<div class="profile-page-owner-profile-pic">
<asp:FileUpload ID="profile_pic_input" onchange="profilenewimageinput(this)" runat="server"></asp:FileUpload>
</div>
Hidden Div:
<div id="profile-change-profile-pic-bg-overlay-div">
<div class="profile-change-profile-pic-bottom-bar">
<asp:Button ID="picApply" class="cropButton" runat="server" OnClick="picApply_Click" Text="Button" />
<span class="profile-page-cancel-crop-button" onclick="hideprofilepicwindow()">Cancel</span>
</div>
</div>
JS:
function profilenewimageinput() {
document.getElementById("profile-change-profile-pic-bg-overlay-div").style.display = "block";
setTimeout(function () {
document.getElementById("profile-change-profile-pic-bg-overlay-div").style.opacity = 1;
}, 100);
}
Code behind:
protected void picApply_Click(object sender, EventArgs e)
{
if (profile_pic_input.HasFile) //always returns false when debugged
{
//Code
}
}
Why is my HasFile always returning False even when an Image is selected?

Try putting it in an <asp:UpdatePanel> with an appropriate Trigger setup. The following may work, but I'm not in a place to test:
<div class="profile-page-owner-profile-pic">
<asp:UpdatePanel ID="UploadPanel" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="picApply" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="profile_pic_input" onchange="profilenewimageinput(this)" runat="server" />
</ContentTemplate>
</UpdatePanel>
</div>

PageMethod issue with C# and uilang javascript to make placeholder Visible

I have a div box that slides into view when one of three buttons are clicked: undergrad, masters and certificates. This animation is done with uilang code (for those that don't know what uilang is you can go to uilang.com). When the button is clicked We want a list to dynamically display into the div. The list will be undergrad degrees, masters or certificates.
So the uilang slide animation is working fine. I created a separate button to test if the asp placeholder is working and it is. The list displays fine so I know there is nothing wrong with the sql or anything like that.
Here is code
// index top of page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="online_programs" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
// form and code on index page
<form id="myform" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<script>
function ugradList() {
PageMethods.underGradList();
}
function mList() {
PageMethods.masterList();
}
function cList() {
PageMethods.certificateList();
}
</script>
<label id="underGradButton" onclick="ugradList()" class="toggle-btn"><input type="radio" name="group3" /><i class="fa fa-circle darkgreen"> </i> Undergraduate</label>
<label id="masterButton" onclick="mList()" class="toggle-btn"><input type="radio" name="group3"/><i class="fa fa-circle darkgreen"> </i> Graduate </label>
<label id="certificateButton" onclick="cList()" class="toggle-btn"><input type="radio" name="group3"/><i class="fa fa-circle darkgreen"> </i> Certificate </label>
<asp:Label ID="PrevParentIDLabel" runat="server" Text="0" />
<div id="degree-list">
<ul><asp:PlaceHolder ID="BachelorsPlaceHolder" runat="server" Visible="false" /></ul>
<ul><asp:PlaceHolder ID="MastersPlaceHolder" runat="server" Visible="false" /></ul>
<ul><asp:PlaceHolder ID="CertificatePlaceHolder" runat="server" Visible="false" /></ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
// uilang code
<code>
clicking on ".toggle-btn" adds class "show-degree-results" on "#degree-results"
clicking on ".close-results" removes class "show-degree-results" on "#degree-results"
</code>
The problem I have is that when the buttons are clicked it does not display the list! I get the following logs when I inspect:
The server method 'underGradList' failed with the following error: System.NullReferenceException-- Object reference not set to an instance of an object.
The server method 'masterList' failed with the following error: System.NullReferenceException-- Object reference not set to an instance of an object.
The server method 'certificateList' failed with the following error: System.NullReferenceException-- Object reference not set to an instance of an object.
Like I said before I created a test button and pulled out one of the placeholders to test and make sure my other code is working. It worked fine. So I know I do not need help with that, but I am doing something wrong or I am missing something and I am jsut not sure what it is. Below is the C#:
public partial class online_programs : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Our sql and other code that is working fine
}
// bachelor function
[System.Web.Services.WebMethod]
public static void underGradList()
{
online_programs currentclass = new online_programs();
currentclass.MastersPlaceHolder.Visible = false;
currentclass.CertificatePlaceHolder.Visible = false;
currentclass.BachelorsPlaceHolder.Visible = true;
}
// Master function
[System.Web.Services.WebMethod]
public static void masterList()
{
online_programs currentclass = new online_programs();
currentclass.BachelorsPlaceHolder.Visible = false;
currentclass.CertificatePlaceHolder.Visible = false;
currentclass.MastersPlaceHolder.Visible = true;
}
// Certificate function
[System.Web.Services.WebMethod]
public static void certificateList()
{
online_programs currentclass = new online_programs();
currentclass.BachelorsPlaceHolder.Visible = false;
currentclass.MastersPlaceHolder.Visible = false;
currentclass.CertificatePlaceHolder.Visible = true;
}
}
I am very new to C# so if there is something missing or if you need more information please just ask. Like I said the other code is working fine. What I have provided is where the issue is. Please help!

Asp.net UserControls in datagrid using AJAX and __doPostBack

I'm using ASP.NET w/ AJAX to build a site that's similar to
http://sanjosepizzaexpress.com/order-online/
If you scroll down to the food menu, and click on a food item in the middle collumn, you see that the item expands downward to let the user to provide menu item details for ordering. There is no page reload.
I am trying to get this effect using ASP.NET w/ AJAX using Javaccript in C#. I'm having some problems.
I want to expand each individual food menu item and display item detail data from a database without a complete page reload. In my attempt (code below), the whole page is always re-loaded and every menu item is expanded every time I chick on an individual item.
My food menu is comprised of a single-collumn databound asp:datagird. Each
datagird item is a user control (OM:MnuItem) :
<asp:datagrid Runat="server">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<OM:MenuItem ID="MenuItem1" ... runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
MenuItem.ascx has2 divs. One div (menuItemDisplay) has the MenuItem's name, etc..
It is initially displayed in the food menu datagrid. When the user clicks on the menuItemDisplay div in the menu, the javascript DisplayItem function displays the
second div (itemDetails). MenuItem.ascx contains the UpdatePanel and ContentTemplate :
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<div id="menuItemDisplay" onclick="DisplayDetails();">
<table >
<tr>
<td align="left" style="width:90%;">
<table >
<tr>
<td >
<asp:Label ID="nameLbl" runat="server" />
</td>
... etc ...
</tr>
</table>
<div id="itemDetails" style="visibility:hidden;" runat="server">
... item details ...
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Javascript DisplayDetails function:
function DisplayDetails()
{
__doPostBack("DisplayDetails", "");
}
MenuItem.ascx.cs Page_Load:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (Request.Form["__EVENTTARGET"] == "DisplayDetails")
{
itemDetails.Style.Value = "visibility:visible";
}
}
}
MenuItem.ascx.cs Page_Load:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (Request.Form["__EVENTTARGET"] == "DisplayDetails")
{
itemDetails.Style.Value = "visibility:visible";
}
}
}
The ScriptManager is in default.aspx:
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
Again, my problem:
The whole page is always re-loaded and every menu item is expanded every time I chick on an individual item.
Does anybody have any thoughts? Thanks for the band with.

You can use __doPostBack() to refresh an UpdatePanel, if you target the UpdatePanel itself.
This is how Dave Ward does it:
<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">