Enhanced window. showmodaldialog pop-up modal window data transfer height encapsulation Experiment

In our daily B/S web development, we may need such a scenario in many cases! Some text box values can be input or selected by the user. For example, add an articleArticleWe can specify the author as James so that we can enter the name "James" in the text box, but sometimes we may be a reprinted article, it is possible that the author already exists in the system, or not necessarily in the system. At this time, we can compile a function for the Web: if the author already exists in the system, you can click a connection or something to select the author from the system, if the author is out of the system, you can directly enter the name of the author.

The above scene is completely fictitious, or the above text is problematic in system design. At this moment, we can ignore it. The focus of this article is no longer on the rationality of system design.

Direct: roughly as follows:

The requirement is as follows: When you click "select" in the hyperlink for online editing, a modal pop-up window pops up to let the online editing select a data. (Of course, JavaScript control can be used to control the pop-up Div, which is not discussed in this article !)

In the above case, you can enter the name until the weight is five. (If you want to be lazy, you can also click the select button. When you click any row of data in the pop-up modal form. Returns the data of this row. And assign it to the text box on the page.

This effect is easy to implement. However, due to my limited technology, only one data can be returned if similar functions are implemented previously. ImplementationCodeAs follows:

// The hyperjoin ID is Div. Click the hyperlink and call this JS function to bring up datalist. aspx // and disable datalist. the aspx mode form returns a string value to the parent page // and assigns the value to textbox1.$ ('# Div'). Click (Function(){VaRResult = Window. showmodaldialog ("Datalist. aspx", Title,'Dialogheight: 300px; dialogwidth: 300px; Status: No; help: no');If(Typeof(Result )! ="Undefined") {$ ('# Textbox1'). Val (result );}Else{Alert ("No data selected");Return false;}});
 

The Code on the datalist. ASPX page is as follows:

             < Tr  Onclick  = "Returncode ('lily')"> <  TD  > Li Si </  TD  > <  TD  > Male </  TD  > <  TD  > 14 </  TD  > <  TD  > 150 </  TD  > <  TD  > 60 </  TD  > </  Tr  > 

You need to click any row in the modal form to return data. Data is returned only when a "select" connection is clicked. Therefore, write the Click Event in tr.

The Code returned by JS is as follows:

 
<ScriptLanguage= "JavaScript"> FunctionReturncode (name ){// If (confirm ("are you sure you want to select this customer? ")! = True) {// return ;//}Window. returnvalue = Name; window. Close ();}</Script>
 

After selecting data in the modal form, close the modal form and return the selected data ....

 

Here, an example of the data returned by a modal form is complete! But there is a problem here ..

If I want to return multiple data records. Not simply a name ..... It seems that I can only assemble multiple data into a string with special symbols such as '&' or something. Then split the file on the parent page!

No. This is not a good solution!

 

After thinking about the system of my colleagues, I made the following changes:

 

 
<ScriptLanguage= "JavaScript"> FunctionReturncode (name, sex, age, height, weight ){// If (confirm ("are you sure you want to select this customer? ")! = True) {// return ;//}VaRJsondata ={}; jsondata. Name = Name; jsondata. Sex = sex; jsondata. Age = age; jsondata. Height = height; jsondata. Weight = weight;// Alert (jsondata );Window. returnvalue = jsondata; window. Close ();}</Script>
 

I declare an array similar to JSON before returning. Assign a value to the array and return the JSON data. For example, here, I return the JSON data consisting of five data types: name, sex, age, heght, and weight.

The HTML code is as follows: so easy!

 <  Tr  Onclick  = "Returncode ('wang Zheng', 'female ', '21', '000000', 90)"> <  TD  > Wang Yu </  TD  > <  TD  > Female </  TD > <  TD  > 21 </  TD  > <  TD  > 170 </  TD  > <  TD  > 90 </  TD  > </ Tr  > 

In the preceding example. My datalist. ASPX page is only responsible for returning the JSON array, which contains all the content that may be returned. Then you can use the data you actually need on the page!

In the JS file, I encapsulate it in height. Allow me to overencapsulate: O (∩ _ ∩) O

 Function Choose (URL, title, iwidth, iheight ){ /// <Summary> // functions supported by JS modal pop-up window <// </Summary> /// <Param name = "url" type = "string"> // /relative address of the List page /// </param> /// <Param name = "title" type = "string"> /// title of the List page /// </ param> /// <Param name = "iwidth" type = "Number"> /// pop-up window width /// </param> /// <Param name = "iheight" type = "Number"> // The height of the pop-up window /// </param> /// <returns type = "string"/>  VaR Height = 300;VaR Length = 500; If (Iheight! = Null ) Height = iheight; If (Iwidth! = Null ) Width = iwidth; VaR Retvalue; retvalue = Window. showmodaldialog (URL, title, 'Dialogheight :' + Height + 'Px; dialogwidth :' + Width + 'Px; Status: No; help: no' ); Return Retvalue ;}

I try to extract all the attributes of the modal form into parameters.

The choose function is just a function. Pop-up and return data. Because JS is a weak language. VaR provides great convenience. I care what type of data you return. VaR can all be done!

Because it needs to be encapsulated. I want to make this function nearly possible public. Reduce the amount of code on the client.

Let's first think about it. The modal window will pop up:

1. First, you must have the modal form content of the selected data. The above explains how to do it. (If you do not understand it, go back to it .)

2. You must have an object that triggers this event.

3. I want to assign a value to the control in this method.

4. A height and width are also required. Because the choose () method provides the default height and width. However, parameters that can be modified in this way are also provided.

 

The above prerequisites are basically complete! But there is a problem. How can I assign values to the page text box in highly encapsulated JS functions, and ensure that there is no "Marry Lang ". Since calling pages is an unknown world. I don't know which page to call this function. And I don't know how many widgets he will send. What should I do?

Okay! I may consider agreeing that you want to call this function to implement the function. Well, the text box that you pass to me must be of the array type. Additionally, there must be differentiated subscripts ".

Then I can encapsulate it! Encapsulate, encapsulate, and seal ...... Installation!

 Function Choosedatafromurl (eventcontrol, valuecontrols, URL, title, iwidth, iheight ){/// <Summary> /// JS modal window /// </Summary> /// <returns type = "JSON"/> /// <Param name = "eventcontrol "type =" string "> // click the object that triggers the pop-up window /// </param> /// <Param name =" valuecontrol "type =" elements "> // /control array to be assigned a value // </param> // <Param name = "url" type = "string"> relative address of the List page </param> /// <Param name = "title" type = "string"> title on the list page (it seems useless) </param> /// <Param name = "iwidth" type = "Number"> pop-up window width </param> /// <Param name = "iheight" type = "Number "> pop-up window height </param> $ ( '#' + Eventcontrol). Click ( Function (){ VaR Result = choose (URL, title, iwidth, iheight ); If (Typeof (Result )! = "Undefined" ){ For (Control In Valuecontrols) {$ ( '#' + Valuecontrols [control]). Val (result [control]) ;}} Else {Alert ( "No data selected" ); Return false ;}});}

The preceding functions have six parameters.

1. objects that trigger function events

2. Control s to be assigned a value

3. A string URL parameter. Here is the relative path address of the modal form.

4. page title (this seems useless)

5. Height

6. Width

First, after this function is called, the above six parameters are passed in. First, the trigger condition is bound to the object that triggers the function event.

$ ('#'+ Eventcontrol). Click (Function(){}

Second, call the choose function to return var data. As you know, the choolse returns a JSON array.

Next, I want to traverse the control set! I take the subscripts of the control set to take values from the modal form and assign values to the control.

For(ControlInValuecontrols) {$ ('#'+ Valuecontrols [control]). Val (result [control]);}

This part is a bit hard to understand. After reading the page, the call will suddenly become open!

 

The page HTML code is actually very simple:

 <  Body  > <  Form  ID = "Form1"  Runat  = "Server"> <  Div  > Name: <  ASP  :  Textbox  ID  = "Txtname"  Runat  = "Server"> </  ASP  :  Textbox  > < BR  /> Gender: <  ASP  :  Textbox  ID  = "Txtsex"  Runat  = "Server"> </  ASP  :  Textbox  > <  BR  /> Age: < ASP  :  Textbox  ID  = "Txtage"  Runat  = "Server"> </  ASP  :  Textbox  > <  BR  /> Height: <  ASP  :  Textbox ID  = "Txtheight"  Runat  = "Server"> </  ASP  :  Textbox  > <  BR  /> Weight: <  ASP  :  Textbox  ID  = "Txtweight"  Runat = "Server"> </  ASP  :  Textbox  > <  BR  /> <  A  Href  = "Javascript :;"  ID  = "Selectemployee"> Select </  A  > </  Div  > </ Form  > </  Body  > 

When using the jquery library, I use 1.6.2.

 
<ScriptSRC= "../Script/jquery-1.6.2.min.js"Type= "Text/JavaScript"> </Script>
 

The JS call code is also simple:

 <  Script  Language  = "JavaScript"  Type = "Text/JavaScript">  // Declare a set. The keyword name behind it must be the same as the JSON name returned on the pop-up page. // declare a set of text boxes.  VaR Controls ={}; controls. Name = "<% = Txtname. clientid %>" ; Controls. Sex = "<% = Txtsex. clientid %>" Controls. Age = "<% = Txtage. clientid %>"  New Choosedatafromurl ( "Selectemployee" , Controls, "Showlist. aspx" , "Select employee" , 500,800 ); New Choosedatafromurl ( "<% = Txtname. clientid %>" , Controls, "Showlist. aspx" , "Select employee" , 800,500 ); </  Script  > 

The preceding Code triggers the choosedatafromurl event in step 2. The first is to click the "select" hyperlink to trigger, and the other is to click the first one, that is, to trigger the "name" text box. Of course, you can also put a small icon next to the text box to trigger it.

 

 

The Code confusion caused by clientid and serverid of server controls in ASP. NET makes it impossible to write JS Code directly in. js files. The new parameter passing method can be used. Of course, this method is not what I have come up with, and the JS level is still at the downstream level. In the past, this was also a headache for me.

In this way, the introduction to this part of Lao Zhao's blog was suddenly enlightened! Portal! Sorry, I cannot find the article. I only remember that this part is a series. Performance! I will add it if I find it later!

 

PS: the above method only selects data for simple implementation. Of course, the Ajax pop-up layer is a better choice.

Welcome to the discussion!