Develop Reference

Dialog appears on every refresh

I have to build a dialog in my entry site. The problem is, it appears every time and I can't close it (click on the button just refreshes the site, with the dialog appearing again). I also thing that I know the reason, but I'm able to fix it.
This is my dialog
<p:dialog id="ac-wrapper" widgetVar="test" style='display: none; background:white;' modal="true"
resizable="false" closeOnEscape="true" closable="true" visible="true">
<div id="popup">
<h2>Some Content</h2>
<input type="submit" name="submit" value="Submit"
onclick="DialogBox('hide')" />
</div>
</p:dialog>
Here is the javascript that should handle this:
<script type="text/javascript">
$ = jQuery;
function DialogBox(hideOrshow) {
if (hideOrshow == 'hide') {
localStorage.setItem("isShown",1);
document.getElementById('ac-wrapper').style.display = "none";
document.getElementById('ac-wrapper').visible="false";
$("#ac-wrapper").close();
}
else if(localStorage.getItem("isShown") == null) {
document.getElementById('ac-wrapper').removeAttribute('style');
localStorage.setItem("isShown",1);
}
}
window.onload = function () {
setTimeout(function () {
if(localStorage.getItem("isShown") != 1 ){
DialogBox('show');
}
else if(localStorage.getItem("isShown")){
$("#ac-wrapper").remove();
}}, 1000);
}
</script>
By rendering the site, the dialog always appeares because the visible attribute is set on "true". I guess the order is incorrect. It should frist check the local storage and then render the elements, I'm not getting it to work correctly. I also looked for answeres here with similar problems, but nothing helped.

The issue is this
<input type="submit" name="submit" value="Submit"
onclick="DialogBox('hide')" />
because its an input type submit, its defaulting to the form behavior... which is to redirect to the same url using GET. Change the type and value to "button" and "close" and your problem will be resolved

Force javascript to run on aspx page load

I have a aspx page with some databound controls. One of them is a checkbox. If this checkbox is checked then it should show a div, else hide it. It works great when I click/unclick the box. BUT, when the page loads initially the div ALWAYS shows up until I check/uncheck the checkbox. How can I fix this so that if the databound checkbox is not checked then when the page loads the div is hidden?
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
</script>
<asp:CheckBox ID="cbMycb" runat="server" ClientIDMode="Static" onClick="hideDiv(this);"
Checked='<%# Bind("MyField") %>' />
<br />
<div id='divHome'>
STUFF INSIDE THE DIV
</div>

You can either run the hideDiv function when the content is loaded as Amit Joki stated.
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
But, this solution might present a little issue, you might see the div flickers when the page loads if the div is visible. To solve it just make sure the div is not visible by default by adding some css style...
#divHome{
display: none;
}
Another approach would be using a conditional databinding expression to set the div's visibility...
<div id='divHome' style='<%# "display:" + ((bool)Eval("MyField") ? "block" : "none") %>'>
STUFF INSIDE THE DIV
</div>
Hope it helps

Just call your function once outside.
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
}
</script>

Custom jQuery show/hide div JS not working in ASP.Net

I have a master page that have script manager and Javascript/Jquery added in it. See below:
<asp:ScriptManager ID="SM" runat="server" EnablePartialRendering="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js" ScriptMode="Release" />
<asp:ScriptReference Path="~/Scripts/Custom.js" ScriptMode="Release" />
</Scripts>
</asp:ScriptManager>
Custom Js:
$(".section").click(function () {
if ($(this).next(".sectiondetail").is(":hidden")) {
$(this).next(".sectiondetail").slideDown("slow");
$(this).children('span').text('[-]');
} else {
$(this).next(".sectiondetail").slideUp("slow");
$(this).children('span').text('[+]');
}
});
I have placed following html in my ASCX control that is added in content page that uses my master page:
<div class="section">
<span>[+]</span> General Information
</div>
<div class="sectiondetail" style="display: none;">
Details go here.
</div>
The JS function does not work as expected. If i add JS function in my ASCX control page, it works as expected. What is wrong here?
Thanks.

The time you are binding click event you may not have html controls ready/rendered with css section. On will make sure to add click event even the elements are added or rendered after this script block bind click.
$(".section").on("click", function () {
if ($(this).next(".sectiondetail").is(":hidden")) {
$(this).next(".sectiondetail").slideDown("slow");
$(this).children('span').text('[-]');
} else {
$(this).next(".sectiondetail").slideUp("slow");
$(this).children('span').text('[+]');
}
});
Or You can bind event when document is ready.
$(function(){
$(".section").click(function () {
if ($(this).next(".sectiondetail").is(":hidden")) {
$(this).next(".sectiondetail").slideDown("slow");
$(this).children('span').text('[-]');
} else {
$(this).next(".sectiondetail").slideUp("slow");
$(this).children('span').text('[+]');
}
});
});

Use style="visibility: hidden;" instead of style="display: none;"
<div class="sectiondetail" style="visibility: hidden;">
Details go here.
</div>
If you are using following code,
$(this).next(".sectiondetail").is(":hidden")
OR You may Use;
$(this).next(".sectiondetail").css('display') == 'none'
In your current scenario i.e. style="display: none;"

Set jQuery Toggle to be open on ASP.Net Gridview Postback

I have a jQuery 'toggle' function on a table that I am using in conjunction with an asp.net gridview. I have pagination on my gridview and when I click on the next page, it posts back and therefore closes the Toggle/Table - I need a way of keeping it open. I have had a similar issue in the past with the Accordion function but resolved it via this method and wondered if one of you jQuery/Javascript geniuses could help:
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
autoHeight: false,
event: "mousedown",
active: activeIndex,
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
</script>
<div id="accordion">
<h3>Table Header 1 here</h3>
<div>
Some text here
</div>
<h3>Table Header 2 here</h3>
<div>
Here is my current code that I have the issue with:
<div class="box grid_16 round_all">
<h2 class="box_head grad_colour round_top">Client List</h2>
<div class="toggle_container" style="display:none;">
<asp:Label ID="LBLMessage" runat="server" />
<asp:GridView ID="gvClients" runat="server" CssClass="static" AutoGenerateColumns="true" AllowPaging="true" Visible="true" />
</div>
</div>
and here is the jQuery:
// Content Box Toggle Config
$("a.toggle").click(function(){
$(this).toggleClass("toggle_closed").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
Thanks in advance!

Try this:
$(function () {
$("a.toggle").click(function () {
$(this).toggleClass("toggle_closed").next().slideToggle("slow", function () {
if($(this).is(':visible')){
$('#<%=hidAccordionIndex.ClientID %>').val("1");
}
else{
$('#<%=hidAccordionIndex.ClientID %>').val("0");
}
});
return false; //Prevent the browser jump to the link anchor
});
var val = $('#<%=hidAccordionIndex.ClientID %>').val();
if (val == "1") {
$("a.toggle").click();
}
});
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
Update 1:
Check this test page. GV paging isn't functional but it does simulate the scenario. Let me know in terms of this example how it differs from what you are expecting.
Wondering if you want to use UpdatePanel and see if that helps.

Can't find form on returned HTML

I have a main page consisting of a link and a div with id 'containerDiv'.
When you press the link it loads some HTML from another page using Ajax into this div.
The HTML that is returned contains a form. When the form is submitted, I wish to stay on the same page and display the resulting content in the div.
Please see a picture showing what I wish to accomplish by clicking this link.
The script on the main page:
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
$('#containerDiv').load(this.href + ' #contentDiv', function () {
alert($('#page2Form').id);
$('#page2Form').submit(function () {
$.post(
pageName,
this.serialize(),
function (data) {
if (data.success)
alert('done');
else
alert('error');
$('#containerDiv').html(data);
}
);
return false;
});
});
return false;
});
});
</script>
The relevant HTML on the main page:
<a id="link1" href="page1.aspx">Page 1</a>
<br />
<div id='console' style="border: 2px solid red; width: 1000px">
when the link is clicked this content is replaced with new html.
</div>
The relevant HTML on the content page:
<div id="contentDiv">
<form id="page2Form" runat="server">
<div>
<h1>
Page 2</h1>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="submit" OnClick="Submit_OnClick" />
</div>
</form>
</div>
The problem is that I can't find the form 'page2Form' on the returned HTML.
Alert ($('#page2Form'). id); returns 'undefined'
Perhaps it has something to do with that element is not loaded in the DOM.

A few things here, jQuery objects won't have a .id property, you want the id of the first element in the matched set, like this:
alert($('#page2Form')[0].id);
//or without jquery:
alert(document.getElementById('page2Form').id);
Also, make sure you're looking for it after the $('#containerDiv').html(data); call, so it's added to the DOM. If you're looking for it before it's added, then use the returning data as the context to look in, like this:
alert($('#page2Form', data)[0].id);