I have an UpdateProgress in my ASP.NET Project. This UpdateProgress needs to have the dynamic height of the content within UpdatePanel. I tried doing this with JQuery script so it gives also the right height to the UpdateProgress, but the script doesn't execute on each UpdatePanel trigger.
What is not clear for me:
On each UpdatePanel trigger, are the scripts in the head of html executed everytime? Because my script for equal height is set there and it executes only ones when I open the website.
Thanks
Would be easier with some pieces of code.
Maybe this can help: the update panel mechanism in ASP.net replaces all markup within the update panel. So if your triggers are in the update panel and you bind events on them, after the refresh the binding will be lost.
You would have to re-bind events after each request ended (you can detect this using the PageRequestManager javascript class provided in the Microsoft Ajax Framework: http://msdn.microsoft.com/en-us/library/bb311028.aspx)
d.
I found a solution for this. The following must be in the Page_Load method to let the equalHeight JQuery method be executed each time the updatepanel trigger button is clicked.
ScriptManager.RegisterStartupScript(upnlGuichet, this.GetType(), "equalHeight", "equalHeight($('.InternalItemMainGuichet'));", true);
Here some explanation:
http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.registerstartupscript.aspx
Related
I'm after what seems to me to be a straightforward pattern for handling page refreshes when I've got a drop-down that reacts to the onchange event.
I've used the following in the vb code behind (in the Load handler):
MyDropDown.Attributes.Add("onchange", "ProcessDDChange(this.value);")
Function ProcessDDChange() is in-page JavaScript that grays out some other form inputs for certain values of the drop down.
This works fine, but after a postback, onchange is apparently not fired when the previous state is restored, so disabled boxes are enabled again.
I've investigated load events (page and drop-down), but both fire too early to be of use and I can't see any later options.
Is there a standard way of doing this? I need a hook for running a js function post DOM setup, post asp state restore.
Info
I'm using .net 3.5 and I'm looking for a cross browser solution. This is not my project, so I can't add jQuery (much as I'd like to) or other libs.
You could wrap the dropdown in an update panel and set the trigger for the change event like epascarello suggests. Have you tried adding it to the markup like
<asp:DropDownList runat="server" ID="MyDropDown" onchange="ProcessDDChange(this.value);"></asp:DropDownList>
EDIT:
So you are loosing the onchange listener when you postback, the above example should preserve it. But if not you could also try this in the codebehind event that you would like to have call the ProcessDDChange: for vb.net
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "err", "ProcessDDChange(this.value);", true);
FINAL EDIT:
Thanks for sticking it out with me Bob, while I was attempting to understand the question:
The document.ready event is raised after the PageLoad event is complete and the DOM is constructed. This would be the proper place to call your ProcessDDChange().
document.addEventListener("DOMContentLoaded", function(event) {
ProcessDDChange(ddlId.selectedValue);
});
onchange does not fire when the page loads. You would need to trigger the function on page load OR you need to have the server set up the page correctly from the start.
I am using javascript for one of the ascx controls in my application.
The ascx controls have checkbox lists inside a panel.
I have a javascript function to handle the onclick of checkboxlist items.
I am trying to get the checkbox list as
var checkBoxList = document.getElementById("<%= CheckBoxList1.ClientID %>");
--> it gives checkbox list as null;
Also trying with,
var checkBoxList = document.getElementById("CheckBoxList1");
then also the value is null.
How can I get the checkboxlist item here?
#Fabrizio Calderan is right.
There are two causes for getElementById to not work:
The ID does not exist on the DOM.
The DOM has not been loaded yet.
To solve #1, check your HTML source. Really.
To solve #2, you have several ways to do it:
Recommended way: put your scripts right before you close your body tag. This way, all the elements will be loaded and it will work fine.
Use the onload event to wait for all the elements to be loaded. The drawback is that this event waits for images to be loaded even though the DOM is ready.
Use some library to handle the DOMReady event.
As I had the controls inside the ascx control, the control name was different from what was given in the code.
I have used the IE developer tool to get the dynamic name of the control and using this I could get the control.
Thanks for all the support. :)
Hard to summarize in one question, but here are the details:
I have an ASP.NET MVC 3 project (many of them actually).
My standard practice is for each view to have an Init() method that is fired when the document is ready. This is where I put all my UI code, like rendering buttons and accordions, etc.
I am using the trick to hide un-formatted html elements by setting the html tag to display: none and after Init() is complete, I can unhide everything.
This works pretty well, but I initially had the showing of content in my layout page, but that would execute before the Init code of a view finished running. It gets even more complex if I use partial views with their own Javascript.
What I would like is to attach a callback in one place that fires after the all of my possible Init() calls are finished.
I tried using custom events, but then I would have to trigger them at the end of every Init method, and that's not very efficient.
Requested Code:
Layout Page
<script>
$("html").addClass('init') // init has display: none
$(function() {
InitLayout() // Basic stuff for every page like menu, buttons, etc
$("html").removeClass('init'); // show all content
});
</script>
View Page
<script>
$(function() {
ViewInit() // Init all custom ui elements on page: tabs, accordions, etc
});
</script>
The problem is that the removeClass will occur before each page's Init fires. I am trying to find a way to avoid having the removeClass call at the bottom of every Init method. Is there some way to attach a callback programmatically to avoid repeating code. My main goal here is to implement hiding of unstyled content until everything is complete globally so I don't have to worry about it in each view.
You could try to register the occurence of the init procedure into a global variable (array). This should be done outside of the document.ready() or JQuery equivalent. So within the <script> tags.
When your Init functions, inside the document.ready() event handler or it's JQuery equivalent , are finished, unregister the occurence.
While unregistering, check if there are any occurences left, if not, modify your html style.
The gap between script parsing and the DOM actual finishes loading could be working for you in this case.
I'm trying to manually call the ASP.NET (3.5) javascript postback function __doPostBack from my javascript code. The problem is that the postback script block, that is normally rendered right after the beginning of the <form> tag (and the hidden fields), is occasionally rendered near the closing </form> tag.
Is there any way to force it to be rendered near the beginning of the form tag? Also, how does ASP.NET decide when/where to render the postback client script block?
Edit > Additional Info:
The javascript code resides inside a user control that references the __doPostBack function. The control itself does not contain any 'postback controls' that would call that function. (When I mention 'postback controls', I mean ASP.net controls that call the __doPostBack function and not the asp.net ImageButton and Button controls)
Based on what I've observed and #Brian's comment on the dependency of the postback script on the availability of 'postback controls' on the page, I've found that when the page contains controls that cause postback, the __doPostBack script block is rendered after the opening <form> tag and when there are none, it renders them near the closing </form> tag (or according to this it's not even supposed to be rendered). Now it would make sense for ASP.NET not to render the postback script if there are no controls that require it, but the apparent position of the script near the closing tag is the one that still eludes me. I haven't been able to find any documentation that suggests this behavior. All I've been able to find was this.
Having said that, I've found a couple ways around this issue:
Add a 'postback control' and set its visibility to hidden via css (not the Visible property). eg. <asp:LinkButton ID="RequirePostBackScriptLink" runat="server" style="display:none;" /> (this is what I'm using)
Add the control to the Page.RegisterRequiresPostBack and implement the IPostBackDataHandler interface.
Finally, as #Jonathan_Bates mentioned in his post, the proper thing to do is to wrap the reference to __doPostBack inside a function that is an event handler to load (or ready if you're using jquery). That way, there wouldn't be a need to depend on the actual placement of the __doPostBack script.
It'd be great if anyone can provide more info on this, aforementioned, behavior.
I am guessing that where it renders is important to you so that your scripts render after it and can invoke it (which let me say up front, is a bad idea to begin with).
You just need to make sure that whatever script you are using to call __doPostBack calls it after its been read into the browser. If you use a library like jQuery and its $(document).ready() convention, you can be sure that your code won't execute until all other code is loaded, and therefor your code would be able to call __doPostBack.
Some of it is controlled by the controls that render, whereas the page injects the client script blocks and startup scripts at a pre-defined point...
I assume this is for a control or something? This isn't for a standard block?
There seem to be a number of weird things one could do if one wanted, for hooking up page-load type events. Here are some specific questions:
I know about the auto-hooked-up pageLoad function. Are there any others like it?
Where do I hook up events like those from, e.g., Sys.Application.add_init or Sys.WebForms.PageRequestManager.getInstance().addPageLoading?
What's the difference between the first two of those and pageLoad, if any?
Rather importantly, what is the "correct" way to be sure that the ASP.NET AJAX files are all loaded before you start hooking up event handlers, processing the page, etc.? My current approach is to use the auto-hooked-up pageLoad to hook up the rest, but this seems kind of hacky.
The built-in pageLoad function is just a shortcut to the Sys.Application.load event. There is another one - pageUnload. Find more info here.
You can hook those events up almost whenever you like - using the pageLoad function, invoking the add_init/add_load method inside a script block or calling ScriptManager.RegisterStartupScript from server-side. Just make sure you call that JavaScript within the form tag (see #4). By default all those events occur after the page is loaded so your code should have already been executed by then.
Technically there should be no difference between using pageLoad and the load event - the first is just easier to hook up.
By default the ASP.NET Ajax script files are rendered just after the beginning of the form tag. This means that those files will get loaded before any other JavaScript statement defined within the form tag gets executed.