I have a web page that has a master file. The master file has an update panel that contains a timer, used for showing adds/images every so many seconds. However the page's content place holder is not contained within the update panel. This is the basic markup of the master page:
<head id="hdMain" runat="server">
<title>Main Master Page</title>
<link href="~/Style/custom-theme/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" />
<asp:ContentPlaceHolder
ID="cpHead"
runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px" scroll="no">
<form id="frmMain" runat="server">
<asp:ScriptManager
ID="smMain"
runat="server">
</asp:ScriptManager>
<div style="height: 671px; width: 1024px; z-index: 0;">
<asp:ContentPlaceHolder
ID="cpMain"
runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="background-color: #192646; height: 97px; width: 1024px">
<asp:UpdatePanel
ID="upMain"
runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmrMain" />
</Triggers>
<ContentTemplate>
<asp:Timer
ID="tmrMain"
runat="server"
Interval="10000"
OnTick="RotateImage">
</asp:Timer>
<img
id="imgMain"
runat="server"
height="97"
width="1024"
alt=""
src="" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Now, when my page loads, I need to do some server side processing before deciding if I want to fire up a jQuery dialog. I am using the code below in my code behind to do this:
if (NeedToRunStartupScript())
{
ClientScript.RegisterStartupScript(this.GetType(), "RedirectScript", "Sys.Application.add_load(function() { OpenDialog(); });", true);
}
The OpenDialog() is defined as following in the markup, withing the header content place holder:
<script type="text/javascript" src="../Scripts/JQuery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../Scripts/JQuery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript">
function OpenDialog() {
$(function () {
var redirectSomewhere = false;
var newDialog = $('<div title="Dialog">\
<p>Do you wish to redirect?</p>\
</div>');
newDialog.dialog({
height: 250,
width: 300,
modal: true,
buttons: {
Yes: function () {
redirectSomewhere = true;
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function () {
if (redirectSomewhere) {
window.location.href = "SomePage.aspx";
}
}
});
});
};
Pretty standard stuff really. And this code works. However, each time a timer clicks and updates the image, the dialog window shows up again, so if I let it just sit there for several minutes, I will have tens of dialog windows on top of one another. I basically need my dialog to be registered only once, and not be reinitialized on every partial postback. Any help would be appreciated.
Have you tried checking for async postback like this
bool isAsyncPostback = ScriptManager.GetCurrent(this).IsInAsyncPostBack;
if (NeedToRunStartupScript() && !isAsyncPostback)
{
ClientScript.RegisterStartupScript(this.GetType(), "RedirectScript", "Sys.Application.add_load(function() { OpenDialog(); });", true);
}
Related
When a user wants to upload a file (currently there are 4 places in the form that allow for this), they first have to “Choose File” and then they have to click on “Upload”. If they miss the 2nd "Upload" step, there is no indication to them or us.
Is there a way to combine the “two-step” process to a single step (select and upload).
Use this link to know more about it
http://www.c-sharpcorner.com/UploadFile/2b481f/uploading-a-file-in-Asp-Net-web-api/
And you can also use this code
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= fileupload1.ClientID %>').on('change', function (e) {
console.log('change triggered');
$('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
});
});
</script>
</form>
</body>
Code behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
I have a webform where I have a javascript function that evaluates whether or not it should display a div...
here's the function...
function viewCalendars()
{
if (document.getElementById('ddlDates').value == '5')
{
document.getElementById('divSpecificDates').style.display = 'inline';
}
else
{
document.getElementById('divSpecificDates').style.display = 'none';
}
return;
}
I also added this to my form
<body onload="viewCalendars();">
//Everything
</body>
So even if there was a postback, it will show the div if the dropdownlist has an specific value selected.
However, I recently added both an updatepanel and an updateprogress... and now I think that the will not work anymore since a postback will not occur.
Here's what I have now...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Consumptions.aspx.cs" Inherits="Station.Consumptions" %>
<%# Register TagPrefix="ew" Namespace="eWorld.UI" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" %>
<!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 id="Head1" runat="server">
<title>
Lista De Consumos
</title>
<link href="css/Style.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
#blur
{
width: 100%;
background-color: black;
moz-opacity: 0.5;
khtml-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
z-index: 120;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#progress
{
border: black 1px solid;
padding: 5px;
z-index: 100;
width: 250px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript">
function viewCalendars()
{
if (document.getElementById('ddlDates').value == '5')
{
document.getElementById('divSpecificDates').style.display = 'inline';
}
else
{
document.getElementById('divSpecificDates').style.display = 'none';
}
return;
}
</script>
</head>
<body onload="viewCalendars();">
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="blur">
</div>
<div id="progress">
<asp:Image ID="imgLoading" GenerateEmptyAlternateText="true" runat="server" ImageUrl="~/images/loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlDates" CssClass="tbox" runat="server">
</asp:DropDownList>
<div runat="server" id="divSpecificDates" style="display: none; width: 100%; z-index: 1000;">
</div>
<asp:Button Text="Filtrar" CssClass="btn" runat="server" ID="btnFilter" onclick="btnFilter_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFilter" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
So, I noticed that after you click the btnFilter button, it's function will be triggered, while the updateprogress is visible, but after it disappears (and the btnFilter function is completed) divSpecificDates is not visible when it should be visible. I suppose that I have to call viewCalendars() after everything is done...
How and where do I have to call for this function??
UPDATE:
I just got rid of the updateprogress... and it's still not working, so I guess the problem is not there... probably it's on the updatepanel
When the UpdatePanel is updated, the DOM is change, and you need to re-run the initialization's that you do when you load a page. This are done with javascript function that asp.net includes when you add the UpdatePanel. So remove the onload from the body and use the pageLoad.
So remove the onload from this line
<body onload="viewCalendars();">
and add this script
<script>
function pageLoad() {
viewCalendars();
}
</script>
Similar how to keep javascripts after UpdatePanel partial postback
Reference : Ajax Client Side Life Cycle Events
Thank you for taking the time to read and review my post. I've done a lot of Google searching but have yet to find the answer to my jquery/asp.net question. My issue is I'm trying to replace the standard check box with an on/off image. There is a neat tutorial about doing this here. My issue is that my asp OnCheckedChanged check box event is not being called when Jquery places a check in the check box.
ASP.NET Master Page Scripts that works
<link href="~/Styles/jquery.tzCheckbox.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/jquery.tzCheckbox.js") %>"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/script.js") %>"></script>
Aspx Page with Checkbox
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:DetailsView ID="DetailsView1" runat="server" Height="16px" Width="575px">
<Fields>
<asp:TemplateField>
<EditItemTemplate>
<asp:CheckBox ID="Edit_CheckBox1_CB" runat="server" AutoPostBack="true" OnCheckedChanged="Edit_CheckBox1_CB_Clicked" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
JQuery Script called script.js
(function ($) {
$.fn.tzCheckbox = function (options) {
// Default On / Off labels:
options = $.extend({
labels: ['ON', 'OFF']
}, options);
return this.each(function () {
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if (originalCheckBox.data('on')) {
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>', {
className: 'tzCheckBox ' + (this.checked ? 'checked' : ''),
html: '<span class="tzCBContent">' + labels[this.checked ? 0 : 1] +
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function () {
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked', isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked ? 0 : 1]);
if (isChecked) {
originalCheckBox.attr('checked', isChecked);
}
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change', function () {
checkBox.click();
});
});
};
})(jQuery);
CSS file
.tzCheckBox{
background:url("../Images/background01.png") no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}
.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}
.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}
.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}
.tzCBPart
{
background:url("../images/background01.png") no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}
.tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}
Last Note
Everything works as needed, I just can't seen to get the page to auto post when JQuery checks the check box. Thank you again for your help!
Changes made through javascript will not fire events such as onclick or onchange. What you will need to do is fire the event yourself once you change the value of checked. I am not familiar with the particulars of .net's OnCheckedChanged, but let's assume in the html it turns into onchange (you will need to verify this through viewing the source). You would do something like this:
originalCheckBox.attr('checked', isChecked);
originalCheckBox.change(); // will call the onchange code
I have an asp.net panel with a style which hides it and I'm using JQuery to slideToggle the panel using a hyperlink. This works fine. However, if I add a button on the page that causes a postback the panel will default back to hidden. I understand why this is happening but what is the best way to keep the panels visibility state when a postback occurs?
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server" CssClass="panel">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Here's how I solved my problem...
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
if ($('#panelText').hasClass('panel')) {
$('#PanelState').attr('value', 'true');
} else {
$('#PanelState').attr('value', 'false');
}
});
});
$(document).ready(function() {
if ($('#PanelState').attr('value') == 'false') {
$('#panelText').addClass('panel');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="PanelState" runat="server" Value="false" />
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Add a hidden field in form:
<asp:HiddenField id="hdnPanelState" runat="Server" value="false" />
and modify the JS function:
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
//YOU WILL ALSO NEED TO CALCULATE IF SHOWING PANEL OR HIDING
$("#hdnPanelState").attr("value","true");//Store Value
});
});
</script>
I have the following test ASPX page:
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var dlg = $("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
__doPostBack('TreeNew', '');
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
dlg.parent().appendTo(jQuery('form:first'));
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="New"
OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Select content type">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Texte</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
I use dlg.parent().appendTo(jQuery('form:first')); on close function to retreive the values from RadioButtonList.
It works well but before the page do the PostBack the div "Dialog" moves below the New button. Why?
I think that this is caused because you are calling:
dlg.parent().appendTo(jQuery('form:first'));
at the close callback. This will move the dialog. Why don't you call this immediately after creating the dialog?
try chaning
$(function() {
to
$(document).ready(function() {
also check where it fails with some sort of javascript debugger opera got builtin and FireFox got FireBug..