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;"
Related
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>
Read More<br>
I have this button on the website I don't know how to program the button that when I click Read more show me the information of the cd that I am selling.
Can you give me an idea how can I do that?
You can use JQuery which is a really nice framework to make the coding easy!
You want to use the .click() event and the .show() function
So you could have something like this
$("#clickme").click(function() {
$("#hidden").show();
});
and for your html
<html>
<body>
<p id="clickme">Read More</p>
<p id="hidden" hidden>COOL STORY BRO</p>
</body>
</html>
Example
Suppose you have,
<div id="dvInfo">
Here is your question and i am giving an answer.
</div>
<a href="javascript:void()" id='see'>See more</a>
So,
In jQuery
$(document).ready(function(){
var f_text = $('#dvInfo').html();
$('#dvInfo').html($('#dvInfo').html().substring(0,8)+"...");
$('#see').click(function(){
$('#dvInfo').html(f_text);
});
});
html part
<asp:Button ID="btnread" runat="server" Text="Button" />
<div id="divinfo" style="display:none">More Info</div>
jquery part:
$(function () {
$("#<%=btnread.ClientID %>").click(function () {
$("div[id$=divinfo]").css("display", "block");
return false;
});
});
I have a function to close a modal:
function closeModal(name) {
$(name).modal('hide');
}
But, my page also has an update panel and I need to trigger it.
I tried __doPostBack('UpdatePanel1', '') with no luck.
Thanks
The problem is this:
$(document).ready(function () {
createAutoClosingAlert('.success_alert', 6000);
if(<%# IsAPostBack() %>){
if(window.parent != null){
window.parent.closeEditModal();
window.parent.closeCalendarModal();
window.parent.closeModal('#projectModal');
window.parent.closeModal('#scheduleModal');
}
}
});
I call it from the parent so I cannot get the hidden ID.
One option is to put a hidden button inside your update panel
<div style="display:none">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
Then call the following in your script
document.getElementById('<%=Button2.ClientID%>').click();
The button click will cause a postback.
You can also look at Page.GetPostBackEventReference
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.
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);