Making Javascript Code run on Page Start - c#

I need to run my JavaScript Code on Page Start.
<body onload="document.getElementById('Label1').style.display = 'none';document.getElementById('Textbox1').style.display = 'none';">
Currently I'musing a Onload property in Body Tag and using the code in that. By using in this way the code is running after the total page is loaded and it takes some time to make the label and the textbox to disappear.
Is there any way to run this code before the page Loads??
Or some other way in which I can accomplish this ?
(I'm using another JavaScript function to make the Label and Textbox Visible and Invisible basing on a DropdownList SelectedIndex so if I use properties like style="display:none" I could not make them visible again using JavaScript)

You don't need to make your html elements invisible with javascript when the page is being loaded. You can set them invisible with css using visibility:hidden or display:none and then set them visible with javascript like this:
document.getElementById("someobject").style.display="block";
OR
document.getElementById("someobject").style.visibility="visible";
Also if you are using jquery you can use
$(document).ready(function(){
});

Use jquery's $(document).ready(function(){ this is my code; });

Related

How to set starting point for a webpage in C#

My question is that how to set a starting point for a webpage when it is loaded. I have some information in a content placeholder, when the form containing the content placeholder is loaded instead of displaying the information in the content placeholder it goes back to the top and i have to scroll down every time. Is there any way i can make the content place holder as the starting display point for my webpage?? Thanks in advance.
Assuming you are using asp.net web forms, you can use below snippet to set the focus on your placeholder/server control,
if (!IsPostBack)
{
Page.SetFocus(ContentPlaceHolderID);
}
Add an HTML anchor in the view where the you want to be scrolled down to. Then on page load use java script to move to the anchor. see How to scroll HTML page to given anchor using jQuery or Javascript?
Here is an example assuming you are using Razor with a section render
<a href="#contentAnchor">
#RenderSection("content")
</a>
<script type="text/javascript">
$(function() {
location.hash = "#contentAnchor";
});
</script>

Disable <div> on buttonclick

I have the following problem.
I have a div (id = "outline") on my page.
Now I would like it to be set visible="false when clicked on a button.
The catch is it is way outside the container-div.
I've thought about using a Panel and then the Panel.FindControl
but then what happens with the </div>?
Server Side
You dont mention if you want to do this on the server side or via jquery / javascript (client side).
If on the server side set your div to runat="server" and in the code behind set the visibility to false.
So your HTML becomes <div id="outline" runat="server"> and your button click event has a single line:
outline.Visible=false;
Client Side
If you want to do this via jquery (which you should) just give the div an id and use a selector:
http://api.jquery.com/hide/
$('.target').hide();
Or via javascript if you aren't using jquery:
document.getElementById('outline').style.visibility = 'hidden';
Add a onclick to the button with a javascript like this:
document.getElementById('outline').style.visibility = "hidden"
You can also use "display: none" instead:
document.getElementById('outline').style.display = "none"
you havent mentioned that do you want to show the container div while disabling the "outline" div?? If so separate them and then try it..is the simple answer.... if you can not separate - group the part you want to hide in to separate div ( which does not incldued "container" div ) and then hide that part only.

How to submit a form without postback in asp.net?

I have a form in asp.net webpage which contains 2 drop down lists and a hyperlink + a button.
I want that if user changes an option is dropdowns to change navigate url.
I have done like so:
<asp:DropDownList ID="ddlPackages" AutoPostBack ="true" runat="server"
onselectedindexchanged="ddlPackages_SelectedIndexChanged"></asp:DropDownList>
and then I have the method defined.
The point is that I don't want to make a submit when I change the drop down. Can I do it using only aspx or I have to use javascript?
If I understand you correctly you want to change the href of the hyperlink based on the selected value of the dropdown. You can do this with javascript. Make sure you have AutoPostBack="false" and remove the OnSelectedIndexChanged attribute as well.
To do it using jQuery, use something like this:
<script type="text/javascript>
$(function(){
var $dropdown = $('#<%= ddlPackages.ClientId %>');
$dropdown.change(function(){
//Put logic to decide the link here based on the select value
var newPage = 'page' + $dropdown.val() + '.aspx';
$('#linkId').attr('href', newPage);
});
});
</script>
Edit:
In case you absolutely must have the logic for getting the new url based on the drop down value on the server side, you can turn the method into a Page Method and call it using ajax from the jQuery script above. But you can probably get away with creating the javascript dynamically in the aspx page instead.
I see two options:
1) Wrap the controls in an Update Panel (.NET 3+). Put AutoPostBack=true on the dropdownlist, and define a SelectedIndexChange event for it that changes the hyperlink control's Navigate URL property. When the user changes the dropdown, you're method will fire without the APPEARANCE of a form submission. Downside: there's a slight delay between the dropdown changing and the link changing. If your server is really, really slow, this delay could potentially cause problems (but this is probably unlikely).
2) Use custom JavaScript and do away with your .NET controls completely. This is what I would probably do, assuming you don't need to do anything else with these controls programatically. Your JavaScript function would monitor the dropdown for a SelectedINdexChange and adjust the href attribute of the anchor tag accordingly. Look into jQuery to speed up development if you aren't too familiar with plain JavaScript.
If the control is an ASP:DropDownList, you can use the AutoPostBack="True|False" property to prevent a postback
If you don't want to use the AutoPostBack you have to post the form using jQuery or Javascript
You can add an event on your drop down list onchange and add the code you need to post the form usin jQuery:
$('#formId').submit();
http://api.jquery.com/submit/
If you to want navigate to another Url add the below code at your DropDownList control (make sure AutoPostBack=false)
onchange="window.location.href='yourUrl'"
it would be better put that Javascript on a separate file anyway

During PostBack JavaScript losing its functionality

I have one GridView which has one CheckBox and three TextBoxes in its template column.
The logic is, when I check the CheckBox, the corresponding TextBoxes should get enabled. If I uncheck the CheckBox, then the corresponding TextBoxes should get disabled. I have written JavaScript for this functionality.
Everything is working fine, but in that page I have one DropDownList too. When I change the DropDownList value, the page gets PostBack and at that time I lost the JavaScript functionality, i.e. the enabled TextBoxes in the GridView gets disabled. How to solve this problem?
After every post back in the update panel you need to reinitialize your javascript, because as you understand the struct of the html has change and javascript runs on the previous one that not exist after the update panel updates. Microsoft gives a functionality to do that as follow.
This is javascript lines.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
// here initialize again your javascript
}
</script>
Use the RowCreated event for the ASP Grid to add the client function on the check box, this way the client function will stay on each postback
You must register your javascript at each postback for it to run, by using the ScriptManager.RegisterStartupScript method: here's an example (edited for article in english, sorry :p).
Use auto post back with check box to enable disable text box from server side code. This will update the view state and so it will be maintained on select change. Use these inside UpdatePanel for ajax. Alternatively, you can add drop down into updatepanel as well, so that select change does not affect other page elements.
JavaScript is working on DOM. When page gets PostBack values from ViewState are written to DOM and overwrites your JavaScript changes. You should store state of checkboxes in persistent way ie. jQuery data() or hiddenfield and after PostBack write changes back to DOM.

hyper link to set drop downlist to visible

Wondering if there is a way upon clicking on a hyper link to set drop downlist to visible in code behind or asp?
<asp:HyperLink ID="HyperLink2" runat="server">View More Workout Programs ยป</asp:HyperLink>
If you have to do it in code-behind, then use a LinkButton instead of a HyperLink. Then it will have a click event just like any button and in that click event you can set the other element to .Visible=true.
However, does this need to be done in code-behind? Keep in mind the difference in "visibility" between server-side and client-side code:
If set to .Visible=false on the server-side, the content is not delivered to the client at all.
If set to display:none on the client-side, the content is present and can be viewed in the page source, it's just not displayed by the browser.
In some cases, the former is needed for security purposes. But if it's just a matter of user experience then I would recommend showing/hiding the content entirely on the client-side so as to avoid post-backs that do nothing more than change element display properties.
For example (assuming jQuery):
<a id="toggler" href="#">Show the content</a>
<div id="hidden" style="display:none;">Content</div>
<script>
$(document).ready(function(){
$("#toggler").click(function(){
$("#hidden").show();
});
});
</script>
Use an asp:LinkButton instead of a hyperlink and handle the OnClick event. In the OnClick event, toggle myDropDownList.Visible depending on whether you want to show it or not.
You should implement that kind of feature in the client (javascript code) to improve user experience.
Anyway, you can use a Panel with Visibility=false and put Visibility=true in code behind when link is clicked. You would need to adjust the position of that panel with css to look like a dropdown.
You can try with JQuery : http://www.jquery.com
It will be something like
<script type="text/javascript">
$(document).ready(function(){
$("#<% =HyperLink2.ClientID %>").click(function() {
$("#<% =DropDownList1.ClientID %>").toggle();
});
});
</script>
If you need to send form back to the server, use asp:LinkButton instead and handle OnClick event on the server side. If you need to show drop down list on the client side, use javascript function with onclick client event to show or hide any section you want.

Categories