I am using this code to show a dialog box that will confirm for a delete button, it works fine, but when it pops up it doesn't disable any controls of ASP.Net page, so I can click on any of the controls or text boxes,
First thing I wanna do is fade out the page when Jquery opens my Div tag BOX and second to disable all the controls.
here's the code
Div (Custom Dialouge box)
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
Script (jquery)
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='btDelete']").click(function()
{
$("#divConfMessage").fadeIn();
});
});
</script>
Button
<td>
<asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click"
OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px" />
</td>
Css for Dialog Box
#divConfMessage
{
position: absolute;
width: 500px;
height: 200px;
top: 50%;
left: 30%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 2px solid #000;
DISPLAY:none;
background-color:White;
line-height:20px;
text-align:center;
}
Note
All of the code is in ASP content place holder for the page except CSS, I have 2 another Contents with different controls + a Master Page defining all these Content Place holders.
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<%# Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e" meta:resourcekey="PageResource1" %>
set Modal=true; for dilogbox there is modal property, you can set it as True.
try using Jquery dialogue box ( it comes with JqueryUI plugin).
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
EDIt: if you don't want to use buttons, then use like this
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true
});
or if you want to use CSS then you can try
#YourDivorContainerToShowAsDialog
{
position: absolute;
Z-index: withMaxValue
}
Give a higher Z-index for #divConfMessage and then the modal dalog will be on top everything.
When you add a dialog append it to body as this way:
add_block_page();
add_modal_box();
function add_block_page(){
var block_page = $('<div class="page"></div>');
$(block_page).appendTo('body');
}
function add_modal_box(){
var pop_up = $('<div id="divConfMessage"></div>');
$(pop_up).appendTo('.page');
}
Use one transperant image to fadeout the page.
Add one outerDiv and apply the image to the div.
<div id="outerDiv" style="display:none;">
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
</div>
CSS for outerDiv
# outerDiv
{
top:0%;
left:0%;
position:absolute;
background-image:url('../img/FloatingPanel.png');//transperant image
color:White;
z-index: 1102;
Height:100%;
width:100%;
}
Give a higher Z-index for #divConfMessage than the Z-index of outerDiv(ie:1103).
Show the outerDiv onclick of btDelete
Related
I have two controls in my web form. One is combo box control, and the other is text box. What I want to do is when user selects another item in combo box, the new item is added to text box and shown to user automatically.
For example:
1. When user select '001' item in combo box, text box shows '001' in text area.
2. When user select '002' item in combo box, text box shows like this: '001','002'
Here is my code:
class webform : System.Web.UI.Page{
private StringBuilder sb = new StringBuilder();
protected void ComboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
//Todos: Add the selection of combo box to text box2.
this.localsb.Append(this.ComboBox1.Text);
this.localsb.Append(",");
this.Text2.Text = this.localsb.ToString();
}
......
}
Here is my front end code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="PCA_Form.aspx.cs" Inherits="WebApplication2.PCA_Form" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PCA_Form</title>
<style type="text/css">
#Text1 {
width: 147px;
margin-top: 0px;
}
#form1 {
height: 718px;
width: 963px;
}
.auto-style1 {
font-size: large;
}
#Checkbox1 {
width: 112px;
}
#Select1 {
width: 162px;
}
</style>
<script>
$(document).ready(function () {
$('.ComboBox1').on('blur', function () {
if ($(this).prop('checked')) {
var initial = $('#Text2').val();
var checkbox = $(this).text();
$('#Text2').val(initial + ',' + checkbox).change();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height: 51px; width: 906px;" aria-atomic="False" draggable="auto">
<span class="auto-style1">New Price</span>
<asp:TextBox ID="Text1"
runat="server"
class="Text"
onkeypress="if (event.keyCode!=46 && (event.keyCode < 48 || event.keyCode >57)) event.returnValue = false;"
TextMode ="MultiLine">
</asp:TextBox>
<span class="auto-style1">Item Number</span>
<ajaxToolkit:ComboBox ID="ComboBox1"
TextMode="MultiLine"
runat="server"
AutoPostBack="True"
DataSourceID="SqlDataSource1"
DataTextField="Code"
DataValueField="Code"
Style="display: inline;"
AutoCompleteMode="Suggest"
DropDownStyle="DropDown"
OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
</ajaxToolkit:ComboBox>
<asp:Button ID="Button1"
Text="submit"
OnClick="SubmitButton_Click"
runat="server" />
<asp:Button ID="Button2" runat="server" Text="Excel" OnClick="Button2_Click" />
<asp:TextBox ID="Text2" runat="server" TextMode="MultiLine"></asp:TextBox>
</div>
<div style="height: 466px; width: 943px; margin-top: 35px">
<span class="auto-style1"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=XXX;Initial Catalog=XXXXX;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [Code] FROM [Item]"></asp:SqlDataSource>
<br />
<asp:GridView ID="PCADataGrid" runat="server" Width="938px" OnSelectedIndexChanged="PCADataGrid_SelectedIndexChanged" AutoGenerateColumns ="true">
</asp:GridView>
</span>
</div>
</form>
<p> </p>
</body>
</html>
In combo box tag, I trigger a function called ComboBox1_SelectedIndexChanged() when user changes selection in this box.
Well, that is indeed possible. However, your approach will require an Update Panel and all the agony that follows if you intend to avoid the lovely screen-flicker from those pesky Postback's. I would recommend doing this client side with JavaScript:
$(document).ready(function() {
$('.Checkbox').on('blur', function() {
if($(this).prop('checked')) {
var initial = $('#txtField').val();
var checkbox = $(this).text();
$('#txtField').val(initial + ', ' + checkbox).change();
}
});
});
That is a bit crude and rough, but it should meet your needs. This will avoid the issues your bound to introduce by using the Asp.Net Page Life Cycle. Hopefully this points you in good direction.
As I said above your approach will:
Require Postback or Update Panel
Problem:
Postback - Screen will flicker, plus can make managing View State quite difficult.
Update Panel - A pain to work with, also will hinder performance. As each 'Postback' becomes an Ajax call of the page. Which is stored in memory, so every Postback becomes stored in memory during the life-cycle. So it isn't very efficient.
Update:
You asked a question about:
.Checkbox
#txtField
On your front-end, in source code your elements are created like:
<asp:TextBox
id="txtField" runat="server"
placeholder="Initial Content..." />
There are more you can place on the control, but to answer your question they correlate to the Id or Class name for the given element your manipulating. An Id can only be bound to a single element, where a class can be used on several elements. For example-
<asp:Checkbox
id="chkField" runat="server"
CssClass="Checkbox" />
So in this instance the . is an anchor on this case, .Checkbox. The next would be # which is to anchor to the Id, #chkField. So when you use JavaScript they use the $('.Checkbox') or $('#chkField') as the Selector to elements on your page. Does that clarify for you?
I have a asp.net web application. In my .aspx page I have a small jQuery dialog with two textboxes for which I am using a datepicker. How can I remove the focus of them when the dialog pops up. I've tried so many solutions posted on the internet and still they continue to be focused, therefore the datepicker shows and hides my whole dialog.
Here is the code I have for popping the dialog:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
maxWidth: 330,
maxHeight: 315,
width: 330,
height: 315,
autoOpen: false
};
$('#borrow_dialog_form').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#borrow_dialog_form").dialog({
});
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
return false;
});
});
</script>
And here is the aspx:
<div id="borrow_dialog_form" title="Borrow" style="display: none;">
<asp:Label CssClass="labelStyle" ID="Label10" runat="server" Text="From"></asp:Label>
<asp:TextBox ID="datepicker2" runat="server"></asp:TextBox>
<asp:Label CssClass="labelStyle" ID="Label11" runat="server" Text="To"></asp:Label>
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button Style="margin-left: 90px;" ID="borrow_item_button" runat="server" Text="Borrow item" OnClick="borrow_item_Click" />
</div>
Can someone please help me with that?
Did you try that?
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
$("#datepicker").blur();
$("#datepicker2").blur();
return false;
});
or that?
$("#Button1").click(function () {
$("#borrow_dialog_form").dialog("open");
$("#borrow_item_button").focus();
return false;
});
How do you do a simple popup window in Telerik?
What would be the code-behig C# code in aspx:
===========
<telerik:RadWindow ID="modalPopup" runat="server" Width="360px" Height="360px">
<ContentTemplate>
<div style="padding: 10px; text-align: center;">
<telerik:RadButton ID="rbToggleModality" Text="Toggle modality" OnClientClicked="togglePopupModality"
AutoPostBack="false" runat="server" Height="65px" />
</div>
<p style="text-align: center;">
The format of the dates are incorrect. Please use two digit month and
a four digit year for proper formatting.
</p>
</ContentTemplate>
</telerik:RadWindow>
var composeScreenWindowName = "composeScreen";
var communicationTypeId = 'CT01';
var url = $page.url.create("You page url that you want to display");
var win = $window.createPopup(url, { size: "800,600", behaviors: Telerik.Web.UI.WindowBehaviors.Close | Telerik.Web.UI.WindowBehaviors.Maximize | Telerik.Web.UI.WindowBehaviors.Move | Telerik.Web.UI.WindowBehaviors.Resize, name: composeScreenWindowName });
try telerik popup using jquery
Try it ,
<asp:Button ID="Button3" Text="open the window" runat="server"
OnClientClick="openWinContentTemplate(); return false;" />
<script type="text/javascript">
function openWinContentTemplate() {
$find("modalPopup").show();
}
</script>
I have the following source in a user control:
<asp:Panel runat="server" ID="PanelParametersList" CssClass="AccessReportParameterControls"></asp:Panel>
<div class = "buttonpanel">
<asp:Button ID="Button1" runat="server" Text="View Report"
onclick="Button1_Click"></asp:Button>
<asp:Button ID="Button2" runat="server" Text="Back"
onclick="Button2_Click"></asp:Button>
</div>
In the header of the containing aspx page I am adding css styles:
<style type="text/css">
.ReportViewer_AccessReportViewer { position:absolute; top:50px; }
.ReportViewer_AccessReportViewer_noparams { position:absolute; top:0px; }
.AccessReportParameterControls {width: 100%; background-color: #E4E4EC; padding: 5px; }
.ParameterContainer {width: 100%;}
.ParameterControlLabel {padding:0, 10, 0, 10;}
.AccessReportParameters {width: 100%;}
.buttonpanel {margin:0 auto; }
</style>
I am trying to center the contents of the button panel div but am having no luck.....any ideas?
For centering content in a div
text-align:center;
<div class = "parent">
<button />
</div>
Style:
.parent{
text-align:center;
}
This is all you need to do. Set the text-align to center in any parent container and the inline elements will follow the rule.
As a good practice I would advice you to place your styles in a different style.css file and place this in your .asp files:
<link href="style.css" rel="stylesheet" type="text/css" />
Hi I am working with a JQuery expand image function and I needed the expanded image to be on the front overlapping others but somehow I couldn't find a way to do it, I have tried to place the z-index on multiple locations but no help, please kindly advice, thanks!:
<style type="text/css">
.growImage {position:inherit ;width:80%;left:15px;top:15px; z-index:1;}
.growDiv { left: 60px; top: 60px;width:130px;height:130px;position:inherit ; z-index:-1; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.growImage').mouseover(function () {
$(this).stop().animate({ "width": "100%", "right": "10px", "top": "20px" }, 200, 'swing');
}).mouseout(function () {
$(this).stop().animate({ "width": "80%", "right": "15px", "top": "15px" }, 400, 'swing');
}); ;
});
</script>
My DataList:
<div style="width: 414px; height: 114px;">
<div class="MostPopularHead">
<asp:Label ID="LabelTitle" runat="server" Text=" Customers who bought this also bought:"></asp:Label></div>
<div id="Div1"
style="padding: 10px; background-color:#EDECB3; height: 322px; width: 372px;"
runat="server">
<asp:DataList ID="DataItemsList" runat="server" RepeatColumns ="3" Width="16px"
Height="108px" >
<HeaderTemplate></HeaderTemplate>
<ItemTemplate>
<a class='MostPopularItemText' href='ProductDetails.aspx?productID=<%# Eval("ProductId") %>&&CategoryId=<%# Eval("CategoryId") %>'
style="padding-right: 3px; padding-left: 3px">
<div class="growDiv">
<img class="growImage" alt="image" src='Styles/CatalogImages/Images/Thumbs/<%# Eval("ProductImage") %>'/>
</div></a>
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:DataList>
</div>
</div>
can you make with this
.css('z-index', parseInt( new Date().getTime()/1000 ));
Two things:
z-index will always be 'auto' unless using position of relative, absolute or fixed. Therefore, position:inherit will not work.
Update your css:
.growImage { position:relative; width:80%;left:15px;}
.growDiv {
position:relative; left: 60px; top: 60px;width:130px;height:130px;
}
Now, I made a JSFiddle to show that I got it working but I had to modify the HTML structure a bit: http://jsfiddle.net/Dpzur/4/
You will need to view the source created by your .aspx page to see how many divs, starting from any div with class: 'growDiv', that you must traverse upwards through until you are at the div element that represents its parent "ItemTemplate".. so you will need to modify my jQuery:
$(this).closest('.growDiv').first().css('z-index', 2);
to:
$(this).closest('.growDiv').first().closest('div').closest('div').css('z-index', 2);
, where you add in a .closest('div) for each div element that you need to traverse upwards through the DOM. Make sense?