如何使用ajax调用更新清单的状态

Question

I am trying to update the status of the checklist on click of a button. Can I achieve it by making individual ajax calls pertaining to the checklist item or can I achieve it by making one call and still update it as soon as it is completed.

I have attached the template of how it looks and what I am trying to achieve.

Sorry tried to upload the CSS images files, however not able to do that.

This how it looks

Thanks in advance.`

 div { width: 30%; top: 50%; left: 50%; border: 1px solid black; } ul { list-style: none; width: 30%; } li { padding-top: 20px; } img { float: right; display: inline; text-align: middle; transition: all .2s ease; } .pass { background: url('status1.png') no-repeat -2px -47px; width: 20px; height: 20px; } .fail { background: url('status1.png') no-repeat -2px -70px; width: 20px; height: 20px; } .inprog { background: url('status1.png') no-repeat -2px -25px; width: 20px; height: 20px; } .pend { background: url('status1.png') no-repeat -2px -3px; width: 20px; height: 20px; }

 <div> <h4> Please Wait...... Performing checks on</h4> <ul> <li> check1 <img src="img_trans.gif" class="pass" /></li> <li> check2 <img src="img_trans.gif" class="fail" /></li> <li> check3 <img src="img_trans.gif" class="inprog" /></li> <li> check4 <img src="img_trans.gif" class="pend" /></li> </ul> </div>

`

Answer 1

You can do this by two ways

1)Make ajax call and prepare the content and append

2)Again make an ajax call and based on the response dynamically assign classes of your

(pass, fail, inprog, pend)