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();
});
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)
Hello i am failing to pass the value from dropdownlist in the parent aspx form to textbox in the child aspx form
Parent javascript
: The First script is to open the popup window
<script type="text/javascript">
var popup;
function NewCustOpn() {
popup = window.open("NewCustomer.aspx","Popup",toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=520,height=350,left = 250,top = 50");
}
</script>
This is the second script on the parent page to get the value of the dropdownlist
<script type = "text/javascript">
function parentFunc()
{
return document.getElementById ("<%=DropDownList1.ClientID%>").value;
}
</script>
The child page javascript:
<script type = "text/javascript">
window.onload = function ()
{
if(window.opener != null && !window.opener.closed)
{
var val = window.opener.parentFunc();
var textbox = document.getElementById("<%=TextBox1.ClientID%>");
textbox.Value = val;
}
}
</script>
When the popup opens TextBox1 is empty.
Your problem is simple. Just replace the below line from your child page's js function
textbox.Value = val;
to
textbox.value = val; // lowercase "v"
or justdo a direct assignment like this
document.getElementById("<%=TextBox1.ClientID%>").value = val;
Or another possible solution would be to directly pass the required value from the parent page as a querystring value and you don't need the js function in the popup page. The querystring value you can access it in child pages's page load event and assign it directly to the textbox.
Your Parent js
function NewCustOpn() {
var ddlvalue = document.getElementById("<%=DropDownList1.ClientID%>").value;
var popup = window.open("Popup.aspx?dropdownval=" + ddlvalue, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=520,height=350,left = 250,top = 50");
}
And from you child page's code behind
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request.QueryString["dropdownval"])) {
TextBox1.Text = Request.QueryString["dropdownval"];
}
}
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.
I have the following site structure. This is a .net 3.5.
Master Page -> Content Page -> Modal Pop up extender -> User control -> Panel -> Update Panel -> div
The div is where all the form elements are. Now, when I click a checkbox or any button that results a postback, the usercontrol starts from the top. It does not maintain the scrollback. I ran across a post about implementing the script below but this doesn't help me any. Is there a fix for this?
Below is the script I used.
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('div').scrollLeft;
yPos = $get('div').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('div').scrollLeft = xPos;
$get('div').scrollTop = yPos;
}
Try adding this to the pageLoad section in Javascript, ModalPopupExtenders have a "add_shown" function that can be used for scroll position.
function pageLoad() {
var popup = $find('<%=MODALPOPUPEXTENDER.ClientID%>');
popup.add_shown(SetScrollPositionFunction);
}
In your case the SetScrollPositionFunction would be EndRequestHandler.
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