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. :)
Related
Is it possible to bind/rebind a RadListView's datasource using Ajax? What I'm trying to do is create a type of forum. One ListView is nested in another listview. The outer listview will load on page load and display all of the subject headers, and the innerlist view will not be bound until the header is clicked. Then I'll use jQuery to open the details under the header and load THAT ListView using ajax. is this possible and how? or is there another way I should into achieving this effect? Thanks.
You could wrap the outer list in an UpdatePanel and assign an OnClick handler to the subject line. When the subject line is clicked, an async postback will occur and you can bind the inner list in the click event handler.
One way or another you need to get to the code-behind. If you want to use jQuery, you can attach click events to the header and call __doPostBack in the handler, like this:
$("#<%=ListView1.ClientID%> .header").click(function(){
__doPostBack($(this).attr("id"), "");
});
If you go with this approach, you'll just need to override the RaisePostBackEvent in the code-behind, and use a little logic to drill down to the inner list.
The easy way if you do not care about doing a PostBack would be to wire up the nested ListViews, and have the header hook to the ItemCommand event and bind the applicable RadListView that you need, and hide others. You could possibly disable the ViewState on these controls to keep the size down, since you would only be showing the currently selected items ListView, if you will not be doing any paging or sorting.
For a faster postback, you can loook at Client Side Databinding for RadListView
http://demos.telerik.com/aspnet-ajax/listview/examples/client/programmaticdatabinding/defaultcs.aspx
You would generate a function that you can send the ListView's ClientID to databind as well as the Outer div (if you need one) to show when clicking the header.
The function would then find the ListView, show the outer container, and databind it. You could possibly also include code that would collapse the currently visible div, if you desire that functionality. A global variable saving the previous div's ID would be an easy way for it to work.
In a very common scenario, I have an HTML page with an "Add" button that opens a modal dialog (through Facebox) and asks the user to select an item from the list that appears in it.
The modal dialog gets its HTML snippet from the server asynchronously. I want this snippet to be reusable in many parts of my application so it shouldn't assume that I am using Facebox to load it. The only thing it should do is to trigger the item-selected event whenever the user selects an item in it. But since the snippet is loaded asynchronously, I cannot use $(document).ready. That is, I cannot trigger the event like this:
$(document).ready(function() {
$(".item").click(function() {
$(".items-modal-dialog").trigger("item-selected", this);
});
});
Also, I don't really like using the items-modal-dialog class to identify the enclosing DOM element.
I came up with some solutions to this, and I would like to know if there is some superior pattern that I am missing, because I think this is a very common problem.
Put the script after all the HTML so I am sure that the snippet DOM is loaded (I think this is a bad practice)
Creating a JavaScript function that loads the snippet with Facebox and then binds the events. This way I assume that I am using Facebox and also have to create a function for every type of modal dialog that I create. The only positive side I see in this is that I can create the items-modal-dialog DIV programmatically so I don't have to use a class to identify it.
Using jQuery live to bind the events.
Using an iframe and $(document).ready.
Any suggestions would be greatly appreciated.
Using jQuery's live or delegate function would be the best solution in my opinion.
I am having a page that loads content dynamically. Depending on which menu item the user clicks, different tables are dynamically loaded and presented using jquery.
One column of each table is having an update linke used to update the content that specific row is representing. When clicking that link a JQuery UI Modal Dialog is presented with a form loaded from a server in which the user should update the content and post back.
This is how I understand it, please correct me if I am wrong. I need to load the jquery script at the same time as I load the dynamic content in order to bind the events between the javascript functions and the elements that is being loaded.
Assuming my assumption is correct I do load the content and the same JQuery UI Dialog scripts each time the user selects a different table. I load the content and jquery files from different javascript functions loaded together with the main index file.
The consequence is unpredictable behaviour (probably predictable using the same use case). When loading the table more than once and updating something so the modal dialog is presented, the dialog is not presented anymore after the first or second usage, as one example.
Could it be a problem that the jquery script is loaded more than once? If it is, what's the principle or patterna I should use for this kind of application. If all above is false assumption, still, what's the principle or patterns for designing this kind of solution where different kind of dynamic content is loaded at several places (all presented within the same index file) and all need the same jquery files.
Take a look a jQuery $.live() and $.delegate():
http://api.jquery.com/live/
http://api.jquery.com/delegate/
These will allow you to bind events to dynamically loaded content.
If I understand you correctly, you are asking how to bind events on dynamically generated content. You do not, in fact, have to load new script at the same time as new content in order to be able to hook events to said content.
What you want is the jQuery 'live' handler. You can specify the target of the binding using standard jQuery selectors. However, instead of the following syntax:
$('.foo').click(function(){ });
You would use
$('.foo').live('click', (function(){ });
The way this works is through event bubbling, where an event invoked on a child element (such as an input box) 'bubbles' up through all parent nodes. In this case, jQuery just watches the whole document for event bubbles, and then matches it against your specific selector conditions.
If I understand you correctly:
1) Multiple tables with an update link on each rows to update their content.
2) Update button opens a modal box with a form.
3) Form is posted and data is retrieved after being processed by the server to feed the concerned table row.
If the flow described above is correct, I don't see why you should load jQuery or jQuery ui more than once.
You should do something like
1) Load the page with all the scripts required.
2) Set up and ajax call with the jquery .ajax() method (doc)
3) Use the ajax call to submit the form data to the server and retrieve the results
4) Use the success callback of .ajax() to feed the row with the updated data. Within the success method you should be able to retrieve the context (a.k.a. the link you clicked) and identify the actual row you clicked.
I hope I make sense.
If by any chance you need to create new rows then you should consider checking the .live() and .delegate() method of jQuery.
Good luck.
In web development, JavaScript is often executed when clicking on elements.
In both Internet Explorer 9 and FireFox 4 a little message pops up in the bottom left hand corner with the JavaScript function will be executed by clicking on elements these elements.
ASP.NET makes use of the JavaScript __doPostback(...ugly parameter names..) on almost every element that sends a request to the server. This JavaScript is automatically added to the HTML elements that are generated by the ASP.NET controls and I have no way to circumvent this.
For example, an ASP.NET DropDownList is rendered as an HTML Select element and the __doPostBack() method is added to it so that whenever the user selects a new element, the server can process this action.
The __doPostaback() method is embedded into many of the ASP.NET controls and there is no easy way to change this.
One of my end users commented that this new feature makes it feel as if they are in "Debug-mode"....
So, my question is: how do I either make this popup show something user friendly...or is there a way to tell the browser (via HTML) not to display this nastiness?
Thanks!
-Frinny
Why don't you make the href of the link a hashtag and attach the actual action via JavaScript:
HTML
<a id="foo" href="#foo">Foo</a>
JS
var foo = document.getElementById('foo');
foo.onclick = function(e){
//script foo!
return false;
};
Your location will still be #foo to look nice, but the actual action will be in the foo.onclick function.
Alternatively you can specify the event inline (Foo), but I try to keep a clear MVC separation with HTML, CSS, & JS.
Using a hashtag also gives you the ability to listen for hash-change events or check the hash tag onload so that a user can still middle-click a link and have it work correctly in a new tab.
To my knowledge there isn't a way to make it not display, as that is part of the browser and not the page.
What I would do is create javascript functions at the top of the page with user readable names that contain the other functions inside.
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?