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.
Related
I have a dropdownlist like below:
<asp:DropDownList ID="ddlExtraHoursStatus" runat="server" CssClass="dropdown"
Width="130px">
</asp:DropDownList>
In my code what is do is I set its attribute on Page_load to call a JS function on its 'onchange' event. It works perfectly when I run the page and change the dropdown selections.
The problem or the question I have is why is the onchange event not fired(which calls the JS function) when I change the dropdown's selectedvalue property in code behind?????
I am stuck here, coz my further process depends on this. Please help
After the value of the dropdown is changed in the server side the page loads as fresh for the browser and javascript(in case you are not using update panel). So at the load of the page at client side you need to call the function which is being called at onchange event. you can do this as below (if you are using jquery)
jQuery(document).ready(function (){
DropdwonOnChangeFunction();
});
If you want to call the function only if the value in the dropdown has changed, you need to maintain a hidden flag which has the previous selected value of the drop down. You can set this field at start of page load in code behind. And then using the value from this field you can decide if the function is to be called or not. As below.
jQuery(document).ready(function (){
if( $("#hdnDdlOldValue").val()!=$("#ddlExtraHoursStatus").val())
{
DropdwonOnChangeFunction();
}
});
Here i have used static ids. You can use the client ids.
I'm using a drop down list for selecting customer, from that i need to remove the setTimeout which i shown in the image, i don't know from where to remove it..can any one suggest me from where it loads..my browser alone show the <select .. >, i need to know from where it loads..
<td><asp:DropDownList Width="180px" CssClass="select_quo_one" ID="ReceiverDropDown"
runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ReceiverDropDown_SelectedIndexChanged">
</asp:DropDownList>
</td>
My Browser Code:
Seems to me you have a few choices -
1) Remove the AutoPostBack - this will stop the SelectedIndexChanged event firing but as you only seem to be popping up an alert you could probably recreate this client side.
2) Put the DropDownList in an UpdatePanel as explained to you in your other question, you may need to do a bit of debugging to get this working but should do what you want.
3) Accept the page reload - accept this is the trade-off when using Web Forms and leave as is.
4) Move to something like MVC which does not have the Postback model.
Sounds like you probably need to do some reading into Web Forms and look at the Pros and Cons and make an informed decision as at the moment you are trying to fight the framework rather than work with it.
The setTimeout is automatically generated by the DropDownList control because AutoPostBack is set to true.
From http://msdn.microsoft.com/en-us/library/system.web.ui.postbackoptions.autopostback(v=vs.110).aspx
The JavaScript setTimeout method is used with the _doPostBack method to ensure that the user action completes before the postback occurs.
Edit:
"flickering occurs in my page so i have to remove the setTimeout value.. – user3595072 17 mins ago"
The setTimeout itself is not (directly) causing the page flickering. The flickering is because the DropDownList is doing a postback every time it is changed bc AutoPostBack is set to true and this causes the page to refresh. If you are not doing anything server side immediately after a customer is selected (like loading other customer info on the page), then you can just set AutoPostBack to false. Otherwise you can look into using an UpdatePanel on your page, or use something like AJAX calls to do your processing without a full postback.
Edit 2:
Since you are only adding javascript within your AutoPostBack event, you can add a jQuery reference (if you do not have one already) by adding the following to your ASPX page:
<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
Then set AutoPostBack="false" on your DropDownList and add this javascript to accomplish the same thing that your AutoPostBack was doing:
<script type="text/javascript">
$(function () {
$('#<%=ReceiverDropDown.ClientID %>').on('change', function (e) {
var benId = $(this).val();
if (benId != '' && benId != '0') {
AddDetails(benId);
}
});
});
</script>
I wonder if there is way to run JS code whenever a asp.net page is contacting the server.
I.e. I'm looking for a general event handler that is triggered whenever a call to the server is made for runat="server" components.
I know there's a way to get jQuery.ajax() to run JS code before and after a call to the server is made, but I'm not sure how to do it in asp.net. Especially, since this projects uses a lot of custom components.
The goal here is to show some kind of loading image when a button is clicked, to prevent the user to click a button twice and also to show the user that the system is working.
If the click causes the page or an updatepanel to refresh, I'd only like to display the loading image before the refresh, eg. User clicks, "loading" is shown, page/update panel is refreshed (causing the "loading" to disappear), the new page/content is displayed as normal.
Update 1:
I can't use UpdateProgress because some of the buttons aren't inside UpdatePanels. What I really want to do is to fire a JS as soon as any button/control that will contact the server is clicked. I.e. if the user clicks a dropdown which doesn't contact the server, nothing should happend. But if that dropdown has any connection to the server, a JS should be run.
I understand that this is ASP.NET Ajax and not jQuery Ajax, I only used jQuery as an example. Because I've used a jQuery method before (with jQuery Ajax) to trigger JS before the server call was made. Eg. to lock the element that was clicked or to display a "Loading..." screen.
I could of course add a bit of a JS hack to every page which adds a "onclick" event to every button manually, but I thought it would be better if there was a general solution for this (since I've got lots of pages, each with a few buttons that contact the server on them).
Update 2:
When I think about it, it doesn't necessarily need to be a JS that is triggered. It would be good enough if the page somehow only made sure that the same button wasn't clicked twice. Either by disabeling the button or by adding something in front of it (like a "Loading..." screen).
You can use an UpdateProgress for this to use with update panels, but if you are doing a full page postback (i.e. not ajax) the only loading animation you can have is the browsers own.
UpdateProgress:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Shiny loading aninmation
</ProgressTemplate>
</asp:UpdateProgress?
Here is how you can do it using jquery:
$(function() {
$('a[href]').on('click', function(e) {
var self = this;
e.preventDefault();
loadAsync($(self).attr('href'));
});
});
function loadAsync(url) {
$('div#result').fadeOut(200, function() {
$('div#loader').fadeIn(200, function() {
$.get(url, function(data) {
$('div#result').html($(data));
}).done(function() {
console.log('done');
}).fail(function() {
$('div#result').html('Error');
}).always(function() {
$('div#loader').fadeOut(200, function() {
$('div#result').fadeIn(200);
});
});
});
});
}
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
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.