In my C# asp.net 3.5 web application I am having controls like div tag inside that one textbox and one check box and the page is having a submit button. So in this submit button click I want to make the controls inside the div tag visible.. I am calling a JQuery function to do this. All the statements are getting executed but the control is not visible..
Following is the code in my JQuery function
$("input[name$='QuestionAndAnswerEditorDiv']").show();
$("input[name$='answerLabel1']").show()
$("input[name$='wmd-AnswerTextBox']").show()
My div tag and its controls in the user control page are like the following
<div id="QuestionAndAnswerEditorDiv" runat="server">
<div id="wmd-button-bar" class="wmd-panel wmd-button-row"></div>
<textarea name="QuestionandAnswerTextArea" runat="server" id="AnswerTextBox" onkeyup="prettyPrint();" class="wmd-input editor" cols="92" rows="15"/><div class="wmd-preview text-preview preview" style="-ms-word-wrap: break-word;"></div>
As I noticed these controls are make visible=false in another page so they are not coming in the page source.. So Let me know how to work these controls now
all web server controls in asp.net < 4 are not rendered using their given name.
to use the rendered name use Control.ClientID
Setting QuestionAndAnswerEditorDiv.Visible = false; will mean that it doesn't get rendered to the page. In your code behind do the following:
QuestionAndAnswerEditorDiv.Attributes.Add("style", "display:none");
QuestionandAnswerTextArea.Attributes.Add("style", "display:none");
the JQuery show() function uses the display property and will set it to "block", which will make it visible.
This may not work because div is not going to render as input element and label is rendered as span element in asp.net so check for the type of controls
for div
$("div[name$='QuestionAndAnswerEditorDiv']").show();
for label
$("span[name$='answerLabel1']").show()
for textbox
$("input[name$='wmd-AnswerTextBox']").show()
Edit :
so as i suggested in my answer make use of proper jquery selctor so that this will work for you
Edit 1
So rather than making control visible= false set there sytles to disply:none so that controls avaialbe on you page and you can play with them using jquery/javascript
Related
I want to know what is difference between Panel control in asp.net and div with runat="server"? Since both render as a div.
Which one is best (conditions)?
The code
<asp:Panel id="abc" runat="server">
is exactly the same as if you do:
<div id="abc" runat="server">
They render the same, but it's the functionality with other WebControls that the Panel is most used, and the Panel web control gives you more control under code-behind as it exposes more properties.
The difference is that Panel is a webcontrol which will give you more properties over div in the code behind file, since it's a webcontrol it will require more processing to generate HTML.
The panel control has the viewstate property while div does not.
It really depends on your usage. If you prefer to have control over more properties, then use the panel control, otherwise use the div control.
The most useful distinction I have found is this; A div, even with runat=server will not persist changes to its style between page serves. This was driving me nuts, I had a div holding an iframe for a pop-up aspx screen. I wanted this pop-up to close when user was finished with it by setting the visibility to none via javascript. I found it kept re-appearing even when I tried to assert visibility in code behind on each page serve for the holding page.
I then switched to using asp:panel and because of its viewstate, you set it's visibility and it STAYS THAT WAY through multiple page serves until you change it again. Much cleaner. You can still apply css style to that panel, same as a div, but its better 'behaved'
So far, I've seen (and I'm using the following) scripts to show/hide a div or other controls depending on another control in ASP.NET
$('[id$=myRadio_0]').click(function() { $('[id$=myDiv]').show(); });
$('[id$=myRadio_1]').click(function() { $('[id$=myDiv]').hide(); });
and of course, my div in html like
<div id="myDiv" runat="server" visible="false">
and that works fine when the user selects either option of the radiobuttonlist.
However, when I assign that radiobuttonlist a value of 1 or yes on my Page_Load on code behind, that isn't (and probably can't be) caught by jQuery, and my div remains invisible even though the control has a value of Yes/1.
So, do I need to set the visibility of that div from code behind, or is there a way in jQuery to force a scan of these dependencies after i've set the values for the main controls in code behind?
Couple of things you can do.
1) Change your div to a Panel server control (<asp:Panel id="myDiv" runat="server">), with the ID of "myDiv". Then in the code behind, when you set the radiobutton to 1, you can also set your panel control's visibility. Your current jQuery code will still work.
2) Write another line of jquery to test for div visibility when the page loads. Something like,
if ($('[id$=myRadio_0]').val() == 1 && $('[id$=myDiv]:hidden')
{
$('[id$=myDiv]').show();
}
Personally I'd go for option 1, since you're already dealing with setting up the state of your form in the codebehind, I wouldn't split the "setup" code into both the client and the server code.
I want to control does an element exist in document with its ID in Asp.Net project when page's first or postback loading.
Thansk for your helps already now.
It sounds like your hiding a section of your page on postback, i'm assuming via the controls Visible property. The problem with this approach is that the control is never rendered when Visible="False", this is probably why your javascript code throws an error.
You can use the css property Display and set its value to None, this will allow the element to render but not display. I'm not sure what your using for a container, so i'm using a panel in my example (which renders as a div).
<asp:Panel ID="pnlContainer" runat="server">
</asp:Panel>
Then instead of toggling the Visible property, you can hide the panel using the CSS display property.
pnlContainer.Style.Add("display", "none");
I have a control that on 1 page is initially shown, but on another page is initially hidden.
For the page that initially shows the control, the javascript in the control works fine, but for the page that initially hides the control, the javascript doesn't work.
I've ended up registering the javascript in the code behind using:
this.Page.ClientScript.RegisterClientScriptBlock(...);
It works fine, but it gets ugly with large javascript blocks. Plus it I want to change it, I have to rebuild the solution, which I'd rather not have to do.
Is there another way to register javascript using markup if it isn't sent to the browser when the page is loaded? I'm trying to keep network traffic slim by only sending what I need to the browser when the page loads.
thanks,
Mark
The issue is not making the button invisible, but having an invisible button that one can click on from javascript, and having the button call it's event handler.
ex:
<asp:button id="button1" runat="server" style="display:none">
is something you should use or you can setting up a css class with display:none in it instead and then assign that to your control.
I assume you're getting the control by using document.getElementById, if that is the case, you can check if it is null before using it:
var ctrl = document.getElementById("someID");
if (ctrl) {
do something here...
}
If your control is hidden by setting its server side property 'Visible' to false, then the browser can't attach the js to anything because ASP.NET doesn't render the control. You could try setting the CSS property 'display' to 'none'.
I am using the MultiView server control in one web page using Update Panel. In its second view, I have a GridView; whose first column is checkboc controls including the header.
I want to toggle the data items checkbox based on the header checkbox.
For this, I wrote a Jquery function. But the main issue is, When I try to view the page source, I was not able to find out the HTML for the second view.
How could I toggle the checkbox using Jquery or Javascript?
The reason you can't see the HTML source is that the MultiView is a ASP.NET server control and it only renders the currently selected view to the browser.
Use FireBug. After you toggle the view and the HTML is updated, you'll see the current source so you can debug the jQuery.