I using this code below, and its operation is normal but when using with MasterPage its behavior has serious problems thecode not function.
/// script /////
$(".cssopen").click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
//var id = $(this).attr('href');
//alterado
var id = '.window';
var body = $("html");
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//inserido
href = $(this).attr("href");
$('.window').load(href);
//transition effect
$(id).fadeIn(2000);
//$(id).show();
$(id).show().position({ my: "center", at: "center", of: "html" });
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
/////////////// code .aspx //////////////////
<div>
<asp:ImageButton ID="imgBtCmd" runat="server" ImageUrl="~/Image/edit.png" href="frmIndexII.aspx" CssClass="cssopen"/>
</div>
I am not sure you have posted all the info required but i'm making an educated guess that you are grabbing controls by ID using jQuery and this has broken since introducing a master page. This is because the master page will change the client side id of the rendered HTML element.
If you are on .net4 and above you can use
<asp:SomeControl ClientIdMode="static">
And the controls will retain their Id client side. Alternatively you can add a class to your controls and jQuery them by class rather than ID.
Related
ASP.NET C# JQueryUI How to save index of accordion in a dynamically created user control?
I have a JQueryUI accordion inside a user control , which is dynamically created n times (based on a chosen number inside a ComboBox) from the main aspx page.
I have been using the following javascript code to save the index of accordions that occur once in the main aspx page, I have this once per accordion Control:
var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>");
var activeAccordion1 = 0;
if (activeAccordion1Item) {
activeAccordion1 = parseInt(activeAccordion1Item.value);
}
$("#accordion1").accordion({
collapsible: true,
heightStyle: "content",
active: activeAccordion1,
activate: function (event, ui) {
var i = $("#accordion1").accordion("option", "active");
var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>");
activeAccordion1Item.value = i;
}
});
And in aspx file:
<asp:HiddenField ID="HFaccordion1" runat="server" Value="0" />
I used this same approach for the one inside the user_control that can happen many times, and it also works, BUT the saved index is always the one from the first accordion, and that is shared among the rest.
So, if I have index 2 in accordion1, and index 1 in accordion2, and a control causes postback, after the postback, both accordion1 and accordion2 appear with index 2 active.
How can I modify the above code to work for the dynamically created accordions independently of each other?
You should change $("#accordion1").accordion to $(".acc").accordion. .acc is class of accordions for this example. You used $("#accordion1") that this worked with active accordion1.
Edit
You need save active accordions in a array (accordionsActivate) when click on each accordion and for getting this array, store array in hidden field (HFaccordions) like this:
<script>
var accordionsActivate = [];
$(document).ready(function () {
var $accordions = $(".acc").accordion({
collapsible: true
, active: false
, icons: false
}).on('click', function () {
if ($.inArray($(this).attr('id'), accordionsActivate) < 0) {
accordionsActivate.push($(this).attr('id'));
$('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join());
}
else {
accordionsActivate.splice($.inArray($(this).attr('id'), accordionsActivate), 1);
$('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join());
}
});
activeAccodions(); // Active accodions after postback
});
function activeAccodions() {
if ($('#<%=this.HFaccordions.ClientID%>').val() === "")
return;
activeAccardions = $('#<%=this.HFaccordions.ClientID%>').val().split(',');
for (var i = 0; i < activeAccardions.length; i++) {
accordionsActivate.push(activeAccardions[i]);
}
for (var i = 0; i < accordionsActivate.length; i++) {
$('#' + accordionsActivate[i]).accordion("option", "active", 0);
}
}
</script>
Online demo (fiddle)
I used the following piece of code in the web.config in order to maintain the scrollbar position after a server postback:
<pages maintainScrollPositionOnPostBack="true" >
</pages>
All is working fine, but now i have a gridview encapsuled within a div with a scrollbar in the div (internal scrollbar).
When an event occur on one of the rows inside the gridview, the internal scrollbar doesn't maintain its original position unlike the outer one.
Any ideas?
For future reference:
The normal procedure is to write the following in the web.config file:
<system.web>
<pages maintainScrollPositionOnPostBack="true" >
</pages>
</system.web>
This will preserve the scroll bar position of all web pages.
If you have a scroll bar within a gridview (or div) then use the following script:
<script type="text/javascript">
window.onload = function () {
var strCook = document.cookie;
if (strCook.indexOf("!~") != 0) {
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS + 2, intE);
document.getElementById("grdWithScroll").scrollTop = strPos;
}
}
function SetDivPosition() {
var intY = document.getElementById("grdWithScroll").scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
And the div must be as follows:
<div id="grdWithScroll" ………… onscroll="SetDivPosition()">
http://michaelsync.net/2006/06/30/maintain-scroll-position-of-div-using-javascript-aspnet-20
Try this,
<script type="text/javascript">
window.onload = function () {
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
}
function SetDivPosition() {
var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
h.value = intY;
}
function afterpostback() {
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
}
</script>
<asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
<div id="scrollArea" onscroll="SetDivPosition()" runat="server" style="height:225px;overflow:auto;overflow-x:hidden;">
In the Page_Load
if (Page.IsPostBack) {
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
}
I dont have a long long explanation and any explanation, the most important part is these codes work on my project.
<script type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position
function BeginRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
}
</script>
this is from http://www.codeproject.com/Articles/30235/Maintain-GridView-Scroll-Position-and-Header-Insid
You can do what you want, but it will need to be done client-side with something like jQuery. The following tutorial uses jQuery to determine the value of the scrollbar within your GridView control and then restore that value every time the $(document).ready function is called. In this manner your scroll bar will be reset to it's position before the postback as you wish.
Easily maintaining scroll position in GridView using jQuery
I have a GridView that give some cells specific back color which is Green. Now, I am using a JQuery for fixing the Header and the Columns. This JQuery has a highlighter. The problem now is when the highlighter goes on the top of those cells that have green back color, the green back color will be disappeared and the cell will has no color after the highlighter leave this cell.
The following image shows you the problem:
<script type="text/javascript">
$(document).ready(function () {
sh_highlightDocument();
$(".tableDiv").each(function () {
var Id = $(this).get(0).id;
var maintbheight = 555;
var maintbwidth = 900;
$("#" + Id + " .FixedTables").fixedTable({
width: maintbwidth,
height: maintbheight,
fixedColumns: 4,
classHeader: "fixedHead",
classFooter: "fixedFoot",
classColumn: "fixedColumn",
fixedColumnWidth: 500,
outerId: Id,
Contentbackcolor: "#FFFFFF",
Contenthovercolor: "#99CCFF",
fixedColumnbackcolor: "#187BAF",
fixedColumnhovercolor: "#99CCFF"
});
});
});
</script>
I am using this JQuery FixedTable
You need to store the existing property of the cell in a variable before you change it.
I am not 100% with JQuery syntax, but if you can do something like:
(onHover)
var oldColor = cell.Style["background-color"];
cell.Style["background-color"] = Green;
(onMouseOut)
cell.Style["background-color"] = oldColor;
That should give you the required functionality
I have session variable called page views. When my page is loaded I have a Check to see if it equals 2. IF it does i want to execute code to open a window. Right now i can click a link to open that window and it works fine. How can i get it to automatically open when the page is loaded.
Jquery and Session Checkc code in my page
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<% if (Session["PagesViewed"].ToString() == "2")
{ %>
<script type="text/javascript">
$(document).ready(function () {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<% } %>
THis link is used to open the page. But i want to do this automatically when the page is loaded.
Simple Window Modal
change
$('a[name=modal]').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
to
//Get the A tag
var id = $('a[name=modal]').attr('href');
and remove the }); after
$(id).fadeIn(2000);
});
Here's how you can automatically trigger that anchor's click event:
$("a[name='modal']").click();
Put code to load modal window inside $(document).ready(function () {})
Something like:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<% if (Session["PagesViewed"].ToString() == "2")
{ %>
<script type="text/javascript">
$(document).ready(function () {
//Get the A tag
var id = $('a[name=modal]').attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
$(document).ready(function () {
var openModal = function (e) {
// Cancel the link behavior if click event
e && e.preventDefault();
// Get the A tag or default to modal link href
var id = $(this).attr('href') || $('a[name=modal]').attr('href');
// ...REST OF CODE FROM FUNCTION...
};
$('a[name=modal]').click(openModal);
openModal();
});
I am using ASP.Net and jQuery/jQuery UI and I am trying to use the datepicker control. It works fine on every page, except when I have to use the popup (to add new data into the database and then i refresh the current page to reflect the new data being entered). It seems that document.ready() is failing when I use the popup. I can invoke the datepicker control manually with adding a click event to fire off the showcalendar function, however I want to try and make it work. Does anyone have any ideas of why a popup would fail document.ready() ?
Thanks!
Code in UserInterfaces.js Script File:
$(document).ready(function(){
$(".calendarTrigger").datepicker({showOn:'focus', showAnim: 'fadeIn', changeMonth: true, showOn:'both', buttonImage: '/images/calendar.gif', buttonImageOnly: true, changeYear: true, yearRange: '1950:2010'});
});
Code Calling Popup Functionality:
<a href="#" onclick='javascript:openWindow("/modules/prh/AI.aspx","PH","480","650","","");'
Code For Modal Popup That we use:
function openWindow(url,name,height,width,left,top)
{
if(!width) {width = 625};
if(!height){height = 625};
if(!left) {left = 60};
if(!top){top = 60};
if (!name) {name='mk'};
name = name.replace(" ","");
if ((window.showModalDialog) && (navigator.appName!="Microsoft Internet Explorer"))
{
grayOut(true);
newWindow = window.showModalDialog(url,"name","dialogWidth: " + width + "px;dialogHeight: " + height + "px;resizable: 1;status: 0;scrollbars: 1;dialogLeft: " + left +"px;dialogTop: " + top + "px");
if (newWindow)
newWindow.focus();
grayOut(false);
}
else
{
newWindow = window.open(url,name,'width=' + width + ',height='+ height +
',resizable=1,status=0,scrollbars=1,left=' + left +',top=' + top);
if (newWindow)
newWindow.focus();
else
window.Name.focus();
}
}
function grayOut(vis, options) {
// Pass true to gray out screen, false to ungray
// options are optional. This is a JSON object with the following (optional) properties
// opacity:0-100 // Lower number = less grayout higher = more of a blackout
// zindex: # // HTML elements with a higher zindex appear on top of the gray out
// bgcolor: (#xxxxxx) // Standard RGB Hex color code
// grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
// Because options is JSON opacity/zindex/bgcolor are all optional and can appear
// in any order. Pass only the properties you need to set.
var options = options || {};
var zindex = options.zindex || 50;
var opacity = options.opacity || 70;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#000000';
var dark=document.getElementById('darkenScreenObject');
var tbody = document.getElementsByTagName("body")[0];
if (!dark)
{
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
// If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
var tnode = document.createElement('div'); // Create the layer.
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to avoid making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById('darkenScreenObject'); // Get the object.
}
if (vis)
{
var pageWidth="100%";
var pageHeight=getPageHeightWithScroll();
if (window.innerHeight>pageHeight)
pageHeight = window.innerHeight;
pageHeight = pageHeight + "px";
//set the shader to cover the entire page and make it visible.
dark.style.opacity=opaque;
dark.style.MozOpacity=opaque;
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= pageWidth;
dark.style.height= pageHeight;
dark.style.display='block';
}
else
{
dark.style.display='none';
}
}
What is the markup for your popup and do you have any other javascript that could possibly cause an error before datepicker fires inside the popup?