We Keep Coding

Pure CSS popup WITHOUT Javascript on DropDownList Change

I have users whose group policies block Javascript; so any use of that is out of the question.
I have found a page that performs the function that I need:
Pure CSS Popup Box
However, the popup is triggered after an anchor is clicked.
My issue issue is that I want the popup to trigger on the event change in an asp:DropDownList. My intent is that if an item is not listed in the DDL, then the user will be able to select the first item "Not Listed". After this selection I need to have the popup open with elements that will allow them to add the items to the database which populates the DDL.
I have attempted to use the following in the DDL OnSelectedIndexChanged event:
Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri.ToString() + "#popup1");
This idea has failed. I believe it is because I have it inside an Update Panel. The setup is as follows:
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<!-- Main Wrapper -->
<div class="wrapper wrapper-style2">
<div class="container">
<!-- breadcrumbs -->
<br />
<div class="row 200%">
<div class="12u">
<!-- Content -->
<div id="maincontent" runat="server">
<asp:UpdatePanel ID="upInputarea" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<%-- Equipment Data --%>
<section class="box post">
<h3 class="bold">Equipment Data</h3>
<asp:UpdatePanel ID="upEquipmentData" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<div id="EquipmentDataDiv2" runat="server" style="float: left; border-left: 2px solid rgba(144, 144, 144, 0.25); margin-right: auto; margin-left: auto;">
<asp:Panel ID="Pnl1" runat="server" CssClass="inputSet2">
<span>Model:</span>
<asp:DropDownList ID="ddlEquipmentDataModel" runat="server" AppendDataBoundItems="true" AutoPostBack="false" CssClass="round-corners " DataSourceID="SqlModel" DataTextField="Model" DataValueField="ID" />
</asp:Panel>
<asp:Panel ID="Pnl2" runat="server" CssClass="inputSet2">
<span>Item:</span>
<asp:DropDownList ID="ddlEquipmentDataItem" runat="server" AppendDataBoundItems="true" AutoPostBack="true" CssClass="round-corners width1" DataSourceID="SqlItem" DataTextField="Component" DataValueField="ID" OnSelectedIndexChanged="ddl_SelectedIndexChanged" />
</asp:Panel>
<asp:Panel ID="Pnl5" runat="server" CssClass="inputSet2">
<span>S/N:</span>
<asp:TextBox ID="txtEquipmentDataSN" runat="server" CssClass="round-corners " />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</section>
<%-- Submit Button --%>
<section class="box post">
<div class="inputSet">
<asp:UpdatePanel ID="upSubmit" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<asp:LinkButton ID="lbSubmit" runat="server" class="button icon fa-info-sign" Style="cursor: pointer;" OnClick="btn_Click" Text="Submit" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</section>
<div id="popup1" runat="server" class="overlay">
<div class="css_popup">
<h2>Add Component to Database</h2>
<a class="close" href="#">×</a>
<div class="content">
<asp:Panel ID="Panel13" runat="server" CssClass="inputSet2">
<span>Item:</span>
<asp:TextBox ID="txtNewItem" runat="server" CssClass="round-corners " />
</asp:Panel>
<asp:Panel ID="Panel14" runat="server" CssClass="inputSet2">
<span>NSN:</span>
<asp:TextBox ID="txtNewNSN" runat="server" CssClass="round-corners " />
</asp:Panel>
<asp:Panel ID="Panel15" runat="server" CssClass="inputSet2">
<asp:LinkButton ID="lbAddItem" runat="server" class="button icon fa-info-sign" Style="cursor: pointer;" OnClick="btn_Click" Text="Add Item" />
</asp:Panel>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
<asp:UpdateProgress ID="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<div class="fancybox-loading">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/fancybox/fancybox_loading.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="margin-top: -22px; margin-left: -22px; position: fixed; top: 51%; left: 51%; background: url('/fancybox/fancybox_sprite2.png'); background-position: 2 -2px;" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The CSS for these elements mirror that of the link provided above.

How to access the TextArea value from a content page

I have a TextArea control in my content page which is inside an UpdatePanel:
<asp:UpdatePanel runat="server" ClientIDMode="Static" ID="upTaskDetailRight" UpdateMode="Conditional">
<ContentTemplate>
<div style="width: 98%; padding-bottom: 10px;" class="brClear">
<div style="width: 98%; height: 120px;">
<textarea id="taskNotes" runat="server" class="taskNotes" style="width: 100%; height: 100%; scrollbar-base-color: #A0A0A0; scrollbar-base-color: #A0A0A0; scrollbar-3dlight-color: #A0A0A0; scrollbar-highlight-color: #A0A0A0; scrollbar-track-color: #EBEBEB; scrollbar-arrow-color: #FFFFFF; scrollbar-shadow-color: #A0A0A0; scrollbar-darkshadow-color: #A0A0A0;"></textarea>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I have a button in my MasterPage which is accessing the TextArea value from the content page and updating the SQL Database:
<asp:Panel ID="Panel93" runat="server" CssClass="navInnerDivContentsTopSubTwo">
<asp:ImageButton ID="ibSave" ImageUrl="~/theImages/Save.png" runat="server" CssClass="navImages" OnClick="btnSave_Click" />
<br />
<asp:LinkButton ID="btnSave" runat="server" Text="Save" ClientIDMode="Static" OnClick="btnSave_Click" CssClass="linkOff" />
</asp:Panel>
Code-behind:
System.Web.UI.HtmlControls.HtmlTextArea lblTDNotes;
lblTDNotes = (System.Web.UI.HtmlControls.HtmlTextArea)ContentMain.FindControl("taskNotes");
protected void btnSave_Click(object sender, EventArgs e)
{
string strSaveQuery = #"UPDATE HSI.RMMEMO SET MEMO = '" + lblTDNotes.Value + "' WHERE MEMOID = '" + hfMemoIDYT.Value + "'";
//MessageBox.Show(strSaveQuery);
using (SqlConnection scConn = new SqlConnection(strMainConn))
{
try
{
scConn.Open();
SqlCommand cmd = new SqlCommand(strSaveQuery, scConn);
cmd.ExecuteNonQuery();
Response.Redirect("YourTasks.aspx");
}
catch (Exception ce)
{
}
}
}
When the page loads, the TextArea has some pre populated data. If I make any changes to the TextArea data (add or remove text) and hit the SAVE button in the Master page, the lblTDNoted.Value from the strSaveQuery is using the pre populated data and not the updated entry.
How do I get the updated entry from the textarea?

Add <triggers> to your UpdatePanel.
<asp:UpdatePanel runat="server" ...>
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Repeater content not visible after UpdatePanel PreRender

I have a repeater which i am trying to load after the page has loaded and have stumbled across the PreRender event. I have everything set up but the content of the repeater is not showing - the weird thing is that when i inspect the html, the code is there, just not displaying in the browser.
<asp:updatepanel id="panel1" runat="server" updatemode="Conditional" onprerender="upUpdatePanel_PreRender">
<contenttemplate>
<asp:repeater runat="server" id="mainContentRptr" onitemdatabound="bindDepts">
<headertemplate>
<div id="products-tabs-content" class="row tab-content">
</headertemplate>
<itemtemplate>
<div class="tab-pane" id='<%# eval("dept_id") %>
'> <asp:repeater runat="server" id="prodRepeater" onitemcommand="itemToCart">
<headertemplate>
.... </headertemplate>
<itemtemplate>
.... <asp:repeater runat="server" id="condRptr">
<headertemplate>
.... </headertemplate>
<itemtemplate>
.... </itemtemplate>
<footertemplate></footertemplate>
</asp:repeater>
</itemtemplate>
<footertemplate>
</div>
</footertemplate>
</asp:repeater>
</div>
<!-- End .tab-pane -->
</itemtemplate>
<footertemplate>
</footertemplate>
</asp:repeater>
</contenttemplate>
</asp:updatepanel>
As you can see a few nested repeaters... i also have my UpdateProgress control
<asp:UpdateProgress id="updateProgress" runat="server" AssociatedUpdatePanelID="panel1">
<ProgressTemplate>
<div style="position: relative; text-align: center; height: 100%; width: 100%; background-color: white; opacity: 0.7;margin:0 auto">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="images/loader.GIF" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px; position: relative; top: 45%;margin: 0 auto" />
<br/>
<span style="font-size: 16pt;font-weight: bold">Bulding your menu</span>
<br/>
<span>Please wait</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
and then the following to trigger the delayed load
<script language="javascript" type="text/javascript">
function pageLoad(sender, e) {
if (!e.get_isPartialLoad()) {
__doPostBack('<%= panel1.ClientID %>', 'aaaa');
}
}
</script>
and server side...
protected void upUpdatePanel_PreRender(object sender, EventArgs e)
{
if (Request["__EVENTTARGET"] == panel1.ClientID &&
Request.Form["__EVENTARGUMENT"] == "aaaa")
{
populateRepeaters(); //This has databind for each repeater
}
}
This works without the prerender but loading speeding will vary depending on data etc so i wanted to have it load after the page loaded.
Any help would be appreciated guys! :)

a repeater was sitting out of the updatepanel that controlled the visibility of everything above. it was populated in the prerender event but did not display. Ive moved it inside the panel and everyhting is now working

Error on Jquery on webpage

In my webpage I have two controls that are bind to jquery.
One is a button to copy the Textbox value to clipboard and other is textbox to enter date.
But the problem is when I debug this web application, it throws the jquery error.
And when I comment out one javascript method and debug, it works (tried with both javascript method).
But when I dont't comment out, it doesn't work.
Aspx code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchSerialResult.aspx.cs" Inherits="Locker.searchSerialResult" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.auto-style3 {
color: #CC3300;
font-size: x-large;
}
.auto-style1 {
color: #FFFFFF;
font-size: large;
}
.auto-style2 {
color: #000000;
}
</style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<p>
<p>
<p>
<strong> <span class="auto-style3"> Recorded Information</span><span class="auto-style1"> </span></strong>
<div style="width:70%; margin: auto auto; text-align:left; ">
<asp:Panel ID="Panel1" runat="server" BorderStyle="None">
<asp:Label ID="Label4" runat="server" CssClass="auto-style2" style="font-weight: 700; font-size: large" Text="Details for :"></asp:Label>
<asp:Label ID="Label5" runat="server" style="font-weight: 700; font-size: large; color: #0000FF"></asp:Label>
<br />
<br />
<asp:Label ID="Label1" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial :"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="Copy Me!"/>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.zclip.js" type="text/javascript"></script>
<script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#<%=Button3.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
});
});
</script>
<br />
<br />
<asp:Label ID="Label13" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial Type :"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" Height="26px" Width="181px" AutoPostBack="True" Enabled="False" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Never Expire</asp:ListItem>
<asp:ListItem>Expire</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label14" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Expiry Date :" Visible="False"></asp:Label>
<asp:TextBox ID="TextBox6" runat="server" BorderStyle="Solid" Enabled="False" Height="16px" Visible="False" Width="136px"></asp:TextBox>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$("#<%=TextBox6.ClientID%>").datepicker({
});
});
</script> <br />
<br />
<asp:Label ID="Label6" runat="server" style="font-weight: 700; font-size: large" Text="Description :" CssClass="auto-style2"></asp:Label>
<asp:TextBox ID="TextBox5" runat="server" BorderStyle="Solid" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="217px" Enabled="False"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label7" runat="server" style="font-weight: 700; font-size: small" Text="Last Editor was " CssClass="auto-style2"></asp:Label>
<asp:Label ID="Label8" runat="server" style="font-weight: 700; font-size: small" CssClass="auto-style2"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" Width="97px" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Update" Visible="False" Width="97px" />
<br />
<br />
<asp:Label ID="Label12" runat="server" style="font-weight: 700; font-size: large; color: #0000FF" Visible="False"></asp:Label>
<br />
<br />
</asp:Panel>
</div>
</asp:Content
Works if i comment out anyone of the javascript method..

You're including more than one version of jQuery, and the second version overwrites the first version.
Therefore any plugins associated with the first version are removed. (ZClip in this case)

That´s right. You can´t use the same jquery plugin library (zclip) twice in order to append it to the $ sign. If you really need both (source and minified) you should use a different variable name for one of them. Otherwise it would cause conflicts.
So, I rather you to use this code:
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=Button3.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
});
});
</script>
If you are on production environment. If you are on development environment, then you should use the uncompressed version file of the jQuery plugin.

Two Model Popup's in a Same Page

I am working in C#.Net and Ajax Concepts. I am having 2 ModelPopup Extender in a page. I am also having 2 Buttons in that page. When i click the 1st Button 1 MP should be displayed and when i click the 2nd Button, 2nd MP should get displayed. This works fine for me for the first time. [i.e] When i click the 1st Button, 1st MP is displayed and When i click the 2nd Button, 2nd MP is displayed and once again if i click the 1st Button nothing happens.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<ajaxToolKit:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="Button2">
</ajaxToolKit:ModalPopupExtender>
<asp:Button ID="Button2" ToolTip="Location" runat="server" Text="Location(+)"
OnClientClick="LocClick();" />
<asp:Panel ID="Panel1" runat="server" Style="display: block; width: 600px; overflow: scroll;
height: 440px;" BackColor="White">
<table>
<tr valign="top">
<td width="650">
<ct:ASTreeView ID="astvMyTree" runat="server" BasePath="~/Scripts/astreeview/" DataTableRootNodeValue="0"
BackColor="White" EnableRoot="false" EnableNodeSelection="true" EnableCheckbox="false"
EnableDragDrop="false" EnableTreeLines="true" EnableNodeIcon="false" EnableCustomizedNodeIcon="false"
EnableDebugMode="false" EnableContextMenuAdd="false" EnableParentNodeExpand="false"
EnableAjaxOnEditDelete="false" AutoPostBack="true" OnOnSelectedNodeChanged="astvMyTree_OnSelectedNodeChanged" />
</td>
<td>
<div id="divConsole" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel2"
TargetControlID="Button1">
</ajaxToolKit:ModalPopupExtender>
<asp:Button ID="Button1" ToolTip="Product" runat="server" Text="Product(+)"
OnClientClick="ProdClick();" />
<asp:Panel ID="Panel2" runat="server" Style="display: block; width: 600px; overflow: scroll;
height: 440px;" BackColor="White">
<table>
<tr valign="top">
<td width="650">
<ct:ASTreeView ID="ASTreeView1" runat="server" BasePath="~/Scripts/astreeview/" DataTableRootNodeValue="0"
BackColor="White" EnableRoot="false" EnableNodeSelection="true" EnableCheckbox="false"
EnableDragDrop="false" EnableTreeLines="true" EnableNodeIcon="false" EnableCustomizedNodeIcon="false"
EnableDebugMode="false" EnableContextMenuAdd="false" EnableParentNodeExpand="false"
EnableAjaxOnEditDelete="false" AutoPostBack="true" OnOnSelectedNodeChanged="astvMyTree_OnSelectedNodeChanged" />
</td>
<td>
<div id="div4" runat="server">
</div>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I am just changing the back color of buttons in LocClick as well as ProdClick.
<script type="text/javascript">
function LocClick() {
var location = document.getElementById("<%= Button2.ClientID %>");
location.style.background = '#72BD66';
var product = document.getElementById("<%= Button1.ClientID %>");
product.style.background = '#065581';
var lastYear = document.getElementById('<%=chkLastYear.ClientID%>');
lastYear.checked = false;
}
How to fix this...