I have a hidded textbox and Imagebutton.For avoiding the Postback i am trying to make textbox visible on click of the image button using javascript.But textbox is not showing on click of the image button,Instead image btton is moving.
What could be wrong here in this code.
Appreciate ur help
<asp:TextBox ID="TextBox2" text="From:" style=" visibility: hidden" runat="server" BackColor="#999999" BorderColor="Black" BorderStyle="Double"></asp:TextBox>
<asp:ImageButton ID="ImageButton2" runat="server" BackColor="#99CCFF"
BorderColor="#84C1FF" BorderStyle="Outset" OnClientClick="MJavascriptFunction();return false;" Height="35px"
ImageUrl="search11.png" Width="56px" />
<script type="text/javascript">
function MJavascriptFunction(obj) {
var theControl = document.getElementById("<%=Textbox2.ClientID %>");
theControl.style.display = "block";
}
</script>
Change
theControl.style.display = "block";
To
theControl.style.visibility="visible";
Example
In your Code you set the visiblity option to "hidden", So you need to use the same property in javscript
Alternatively you can change the HTML inline CSS to style="display:none".
Example
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>
I have 3 individual div's(in aspx page and making all 3 div's visible="false").
Based on condition I have to show 1 div at a time and remaning two div's to hide
I am doing in javascript as making 1 div as style.visibility = "block"; and other 2 div's to Style.Add("display", "none");
while running it is throwing error msg as:
unable to get the value of the property 'style': object is null or
undefined
Below is the code, in aspx:
<div runat="server" id="div1" visible="false">
..
</div>
<div runat="server" id="div2" visible="false">
..
</div>
<div runat="server" id="div3" visible="false">
..
</div>
$(document).ready(function () {
var val = "xx1" (or "xx2" or"xx3")
switch (val) {
case "xx1":
document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "none");
// document.getElementById('ctl00_ContentPlaceHolder2_div1').style.visibility = "hidden";
document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "block";
//document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "visible";
document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "none");
case "xx2":
document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "block");
document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "none";
document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "none");
case "xx3":
document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "none");
document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "none";
document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "block");
});
Don't do visible="false". When you do that client-side control is not rendered at all - it simple doesn't exist.
Instead if you want to hide it, but still make it available to client code do
<div runat="server" id="div1" style="display:none">
..
</div>
or
<div runat="server" id="div1" style="visibility:hidden">
..
</div>
depending on how you want to hide it.
After that your client-side code will be able to locate and manipulate it.
Matter of fact - if you don't need to access these DIVs on the server, you can remove runat="server" attribute altogether. Bonus: Unaltered DIV id (you can use 'div1' instead of 'ctl00_ContentPlaceHolder2_div1')
The correct syntax for visibility is:
document.getElementById("myP").style.visibility="hidden";
But you can use jQuery :
$("#YourSelector").hide();
$("#YourSelector").show();
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 div which contains more than 50 input submit button. I want to implement a live filtering as done in Data Tables, the problem is i cannot keep my submit buttons inside tables, so can anyone suggest some approach, so that i can filter those input buttons as i enter something in the search text box.
Also these input submit buttons are generated by c# coding inside a panel.
i tried with jquery.livesearch
Jquery
$('#searchbox').search('(".btn-pr").attr("value")', function (on) {
on.reset(function () {
$('.btn-pr').show();
});
on.empty(function () {
$('#lblemp').show();
});
on.results(function (results) {
$('.btn-pr').hide();
results.show();
});
});
but as this one was used for number of li's inside ul, the selector passed in the search function was #names li, what selector and how (in place of (".btn-pr").attr("value")) should i pass so that it searches the values of those submit buttons, and hides which doesnt match.
aspx
<div id="div_items2" style="float:right; margin-top:10px; width:500px; height:400px; margin-right:5px; overflow:auto;">
<asp:Panel runat="server" ID="pnlCategories">
<center><asp:Label ID="Label8" runat="server" Text="Estimate"></asp:Label></center><br />
</asp:Panel>
<asp:Panel runat="server" ID="pnlProducts" Visible="false" Width="100%">
<center><asp:Label ID="Label5" runat="server" Text="Estimate | Category: "></asp:Label><asp:Label ID="lblCategory" runat="server" Text=""></asp:Label></center>
<asp:Button ID="btnBack" runat="server" Text="Back" onclick="btnBack_Click" CssClass="btn-nav" /><br /><br />
</asp:Panel>
</div>
pnlProducts panel is generated with those input buttons during run.
I'm having trouble hiding the text on a radio button. Here's asp for the radios...
<asp:RadioButton ID="rdViewPrint" Text="View/Print" runat="server" OnClick="javascript:disableFields();" GroupName="viewSend" Checked="True" style="margin-left:10px;" />
<asp:RadioButton ID="rdEmail" Text="Email" runat="server" OnClick="javascript:emailFields();" GroupName="viewSend" style="margin-left:10px;" />
<asp:RadioButton ID="rdFax" Text="Fax" runat="server" OnClick="javascript:faxFields();" GroupName="viewSend" style="margin-left:10px;" />
on page load, a javascript function runs the function below. The cirles of the radio buttons are hidden, but the text remains.
function noVisit() {
document.getElementById('<%=lblViewSend.ClientID%>').style.display = "none";
document.getElementById('<%=rdViewPrint.ClientID%>').style.display = "none";
document.getElementById('<%=rdEmail.ClientID%>').style.display = "none";
document.getElementById('<%=rdFax.ClientID%>').style.display = "none";
document.getElementById('<%=btnFull.ClientID%>').style.display = "none";
document.getElementById('<%=btnSummary.ClientID%>').style.display = "none";
document.getElementById('<%=btnPrivate.ClientID%>').style.display = "none";
}
Why does the text not get hidden, and how do I make it not visible?
Thanks, Dave K.
An easy fix for this would be to just put the whole thing in a panel and then hide that. Or is there a reason you could not do that?
Check out the HTML generated by ASP.NET on your page. I think you'll find that LABEL tags are emitted for the text of the radio buttons. Your Javascript is not targetting the LABEL's - you're targetting the INPUT's.
Another suggestion - toggle classes to show/hide them. Much easier to keep track of and allows you consolidate other styling goodness with CSS.
Try this code.
rdViewPrint.Visible = false;
rdEmail.Visible = false;
rdFax.Visible = false;