Beginning Ajax with ASP.NET- P4

Beginning Ajax with ASP.NET- P4:Thank you for purchasing Beginning Ajax with ASP.NET. We know that you have a lot of options whenselecting a programming book and are glad that you have chosen ours. We’re sure you will be pleasedwith the relevant content and high quality you have come to expect from the Wrox Press line of books.
Nội dung trích xuất từ tài liệu:
Beginning Ajax with ASP.NET- P4 Introduction to DHTML var isArrowLeft=true; function ChangeMe(target) { isArrowLeft=!isArrowLeft; if(isArrowLeft) target.src = “images/ArrowLeft.gif”; else target.src = “images/ArrowRight.gif”; } After rendering the page, the isArrowLeft variable is initially set to true. And when the image is clicked, the ChangeMe() function is called with the image object being passed in. Within that function the image object is called as target. The isArrowLeft variable, which holds a boolean value, is set to its opposite with the first statement. Then that target image’s src attribute is set based on what the isArrowLeft value holds. A similar example to this is found at the start of Chapter 7, but it goes further to include more intricate string manipulation with the split() function and referencing an array member. It also uses the prototype keyword to add a method called substitute() to all strings. This more in-depth example will make better sense after you digest the next chapter, which has information about objects and more about functions.Programmatically Populating the Options in When a choice is made in one drop-down list, it is often handy to populate a second drop-down list with appropriate choices. With Ajax, this is fairly straightforward, and this sample will show you how to implement the JavaScript side of things, dynamically adding new objects to the contents of a drop-down list. The element is what builds a drop-down list (or a list box if the size attribute has been set). This next Try It Out has you build a drop-down list by using , and then add a textbox and button underneath. When you type some text and click the button, it will build a new option in the drop-down list. Finding Objects with document.getElementById() Before you go further, you need to know about an important tool at your disposal. In the last section, you worked with an image object by using the special this keyword avail- able inside an event handler. It was convenient, but what if you wanted to find an existing object on the page and change its properties? This is where, historically, different browsers have had different approaches to get the job done. For example, Internet Explorer (IE) would use document.all, and Netscape would use document.layers. Fortunately, a common method on the document object now enables you to search through a web page and find any object by its ID anywhere on the page: getElementById(). To effectively use this, the elements being referenced must have id attributes applied. In the remain- ing samples in the chapter and in even more detail in the next chapter, you’ll see the use of document.getElementById(). 21Chapter 2Try It Out Dynamic Drop-Down Options Begin with the following HTML: The onclick event handler for the button calls a function named addOption, using the getElementById() method in order to find the text value in the textbox named newOption. Next, here is the addOption function that you should add: function addOption(optionText) { var objSelect=document.getElementById(“mySelect”); objSelect[objSelect.length] = new Option(optionText); } This function is a little different from the last one you saw: It accepts a parameter called optionText, called out in the parentheses after the name of the function. When called, this function expects a string value will be passed in for optionText. This is used later in the function to specify the text that should be associated with the new Option object being built. A reference is obtained with document.getElementById() to the element called mySelect. This reference, named objSelect, is used to update the contents of the options. The square brackets indicate that an array is being referenced, and in this case it’s an array of options under the element. The value inside the square brackets defines an index to which piece of the array is being modified. The new Option object is placed in as the very last piece of the array by having the index refer to the current length of the array. When this is added, the new option is immediately visible in the drop- down list, as shown in Figure 2-6. Notice how, in the top screen of Figure 2-6, the select box is empty. When you add the phrase “Who says HTML is boring” and click the “Add a new option to the drop- down” button, the bottom of Figure 2-6 shows the finished result. If this element were in an HTML form and was submitted to the server, the value posted back would be exactly the same as whatever text the user had typed. If you want to have a different value posted back to the server, then you can specify two parameters when building out the new Option object, the first being the text to show the user and the second being the value that gets posted back to the server. To illustrate the importance of this concept, consider a drop-down list of states. You would want to display the state name to the user, but once it was posted back to the server, you would want your application to know about the state code. This is important because you are now associating what is important to the user, a friendly state name, with what is important to the computer, the unique state code.22 Introduction to DHTMLUsing the innerHTML Property A ve ...