Web Basics (iii) The most fundamental thing about Ajax,jquery

Today to add two small functions, one is about the case of the Radio radio box, how to select the previous, upload to the background, edit the changes back again, and at the time of the election, and then one is about adding a small tag when added then pop in below, and click on the deletion.

One: Radio

1 <Divclass= "Newlylist">2             <Divclass= "Newlyhead">Product shown:</Div>3             <Divclass= "Newlycontent"><inputtype= "Radio"name= "Product_type_0"value= "Top" />&nbsp;&nbsp;Coat<inputname= "Product_type_0"type= "Radio"value= "Trousers" />&nbsp;&nbsp;Pants<inputname= "Product_type_0"type= "Radio"value= "Skirt" />&nbsp;&nbsp;Skirt</Div>4         </Div>

1$ (". Editdvd"). Live ("click",function(event) {//edit get Bank data and jump2$ ("#editstuffDvd"). CSS ("Display", "block");3$ ("#fadeshow"). CSS ("Display", "block");4$( This). Parent (). Parent (). addclass ("EditNow");5         vareditid=$ ("#editstuffDvd"). Children ();6         varTextget = $ ( This). Parent (). Parent (). Children ();//This textget are the edit line data,7         8Editid.eq (1). Children (). EQ (3). Val (Textget.eq (1). Children (). attr ("src"));//Path 1--19         /*Editid.eq (2). Children (). EQ (1). Children (). Val (Textget.eq (2). text ());*/            //show, get aTen         if(Textget.eq (2). Text () = = "Top"){ OneEditid.eq (2). Children (). EQ (1). Children (). EQ (1). Removeattr ("Checked"); AEditid.eq (2). Children (). EQ (1). Children (). EQ (2). Removeattr ("Checked"); -Editid.eq (2). Children (). EQ (1). Children (). EQ (0). attr ("Checked", "checked"); -}Else if(Textget.eq (2). Text () = = "Trousers"){ theEditid.eq (2). Children (). EQ (1). Children (). EQ (0). Removeattr ("Checked"); -Editid.eq (2). Children (). EQ (1). Children (). EQ (2). Removeattr ("Checked"); -Editid.eq (2). Children (). EQ (1). Children (). EQ (1). attr ("Checked", "checked"); -}Else{ +Editid.eq (2). Children (). EQ (1). Children (). EQ (0). Removeattr ("Checked"); -Editid.eq (2). Children (). EQ (1). Children (). EQ (1). Removeattr ("Checked"); +Editid.eq (2). Children (). EQ (1). Children (). EQ (2). attr ("Checked", "checked"); A         } atEditid.eq (3). Children (). EQ (1). Children (). Val (Textget.eq (3). text ());//DVD -Editid.eq (4). Children (). EQ (1). Children (). Val (Textget.eq (4). text ());//URL -Editid.eq (5). Children (). EQ (1). Children (). Val (Textget.eq (5). text ());//Order -Editid.eq (6). Val (textget.eq (0). text ());//ID -          -});

HTML code, this is the editor pop out of the HTML, note can not give a checked= "checked", plus the words will be a problem,

The following JS code is similar to yesterday's, Editid is to get the editor popup html code, you can use Chrome browser debugging view, such as

Through the Chrome debugging tool can see, editid refers to the pop out of the edit box, the elements can be clicked on the map of things, Textget is the bottom of the edit box, the second picture can be seen.

In the above JS code, each if there are 11-12 lines such removeattr ("checked"), is to avoid continuous editing two times, all subsequent edits appear in the radio value is the first value case, so add these two sentences.

Two:

function as mentioned above, add appears below, click on Small x to delete. Here is the added JS code

1 functionaddalbums () {2     3 $.ajax ({4Type: "POST",5URL: ' addalbums.html ',6Data: {albumname:$ ("#albumName")). Val ()},7DataType: "JSON",                    8Success:function(data)9         {Ten             /*console.log (data);*/ One             varJSON = eval ("(" +data+ ")"); A             varAddlabletext = ' '; -              for(vari=0;i<json.length;i++){ -Addlabletext + = ' <div class= ' lablelist ' ><span> ' +json[i].albumname+ ' </span></div>"; the             } -             varaddlable = $ (". Special"). Children (). EQ (1). Children (). EQ (0). Children (). EQ (3); - addlable.append (addlabletext); -              +         } -     }); +}

Once successfully inserted into the database, the database contents are returned back to the data, and then the loop list is displayed (assembled into the HTML code to add to the foreground).

Click on the list to display the content, delete the time JS code as follows.

Note : Here for convenience, directly in the above code 14 line in the ID directly assigned to the value, this is a convenient way to trickery, so in the following 4 lines summary to get the ID to delete is the $ (this). attr ("value");

1$ (". Delalbum"). Live ("click",function(event) {2         3         vardelimg=$ ( This);4         varDelid = $ ( This). attr ("value");5 alert (delid);6 $.ajax ({7Type: "POST",8URL: ' deletealbumbyid.html ',9 data: {albumid:delid},TenDataType: "JSON",                     OneSuccess:function(data, status, XHR) A             { - Delimg.parent (). Parent (). remove (); -             } the         }); -});

Welcome to shoot Bricks ~~~~~~