Use JQuery to implement the Web pop-up editing box

I. Background)

As Ajax (Asynchronous Javascript And XML) becomes increasingly popular, we can use Ajax to implement some UI effects that can only be achieved in WinForm in the past, the most classic is the pop-up mode Dialog box (Modal Dialog. The Ajax-based Web mode dialog box not only improves UI verification, but also reduces unnecessary page refresh and reduces data interaction with Web servers, this reduces unnecessary Web Server loads.

On the help house management platform, we fully utilize JQuery and Ajax to implement the Web pop-up dialog box, replacing the previous pop-up pages and page jumps, improving the response speed and user experience.

2. Related Technologies (Techniques)
1. JQuery
JQuery was created by John Resig, an American who has attracted many javascript experts from around the world to join the team, including J & ouml from Germany, rn Zaefferer, and Stefan Petre from Romania.

JQuery is another excellent Javascr into pt framework after prototype. Its purpose is to write less, do more, write less code, and do more.

It is a lightweight js Library (only 21 k after compression), which is not suitable for other js libraries. It is compatible with CSS3 and various browsers (IE 6.0 +, FF 1.5 +, safari 2.0 +, Opera 9.0 + ).

JQuery is a fast and concise javaScript library that allows you to easily process HTML documents, events, animation effects, and provide AJAX interaction for websites. JQuery is widely used in many e-commerce websites (such as the Helper's house) and portal websites to complete special effects and interactions to make up for the shortcomings of HTML static pages.

2. Ajax
AJAX is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). AJAX is not a acronym, but a term created by Jesse James Gaiiett, this is a web development technology used to create interactive web applications.

Top navigation in the Helper's house is implemented using Ajax technology.

Iii. Implementation pop-up dialog box
1. Traditional implementation
In many management platforms, we need to implement data management pages. The general main interface is shown in.

 

The traditional UI implementation for editing a single piece of data is usually to bring up a dialog box page or go to a new page. After the modification is complete, close the dialog box page or jump back to the original page, both methods have some inevitable defects:

1) the pop-up dialog box page is often blocked by the browser (the pop-up window is forbidden, if you have performed other operations on the parent page before closing the dialog box or the parent page has been transferred to another page, the method for refreshing the parent page after closing the dialog box will become invalid, operations that cause javascript errors or even execution errors.

2) It is the safest way to switch to a new page. Generally, no logic error occurs, but it means that the parent page must be reloaded after each data modification, re-obtain the list of all data, which virtually adds unnecessary server load.

Therefore, we use Jquery to implement the Ajax-based pop-up dialog box for editing. It does not need to pop up a new page, and does not need to reload the list to minimize the interaction with the server data.

2. JQuery implemented Ajax-based pop-up dialog box
Using JQuery and two JQuery plug-ins, jqModal and blockUI, you can easily implement Ajax-based pop-up dialog boxes.

First, we define Ajax server processing pages, such as Ajax. aspx, and define related processing functions to return JSON data to the client. Of course, there are also some Ajax method definitions that execute data modification:

Protected void Page_Load (object sender, EventArgs e ){

Response. Charset = "UTF-8 ";

Response. ContentType = "text/plain ";

String action = Request ["a"]. Trim ();

Switch (action. ToLower ()){

Case "method1 ":

Method1 ();

Break;

......

Private void method1 (){

......

Response. Write (JsonConvert. SerializeObject (ret ));

}

Then, we define the HTML of the required dialog box on the client and design the style,

<Div class = "jqmWindow" id = "dialog">

<Div class = "jqDrag modalPopupTitle" id = "pnlTitle">

<Span id = "popupWinTitle"> editing XXX: </span>

<Input type = "image" src = ".. /imgs/closebutton.gif "class =" closeButton jqmClose "title =" Close Window "id =" imgbtnClose "name =" imgbtnClose "/>

</Div>

<Div class = "holderDiv" id = "Panel3" >{here is the specific edited content} </div>

<Div style = "padding: 10px; text-align: center;">

<Input type = "button" id = "btnSave" value = "save"/>

<Input type = "button" id = "btnCancel" value = "cancel" class = "jqmClose"/>

</Div>

</Div>

Next, we can complete JQuery code in the javascript file.

$ (Document). ready (function (){

$ ("# Dialog"). jqm ({modal: true}). jqDrag (". jqDrag ");

......

$ ("A. edit"). click (function (event ){

InitModal ();

Var id = (this).parent().next().html ();

// Block interface to prevent multiple clicks

$. BlockUI ({message: '

$. Ajax ({

Type: "POST ",

DataType: "json ",

Url: ".../Ajax. aspx? A = method1 ",

Data: {"Id": id },

Success: function (data ){

// You can add the code for filling in the data to the dialog box.

});

// Display dialog box

$ ('# Dialog'). jqmShow ();

Event. preventDefault ();

});

Similarly, you can use the code in JQuery to modify and delete data.

3. Some Supplements
In the implementation process, some necessary modifications may be made to the JQuery plug-in, such as reasonable setting of z-index, proper modification of BlockUI, and consideration of Ajax security, these are all considerations. Due to space limitations, we will not continue the discussion.