Question

I am currently write a html page for uploading image, once the image gets upload, it automatically append underneath the upload section using ajax, so that people can start edit the uploaded image. here is my code for append the image, image description,radio button and check box

$('#thumbnails').append('<div id="imagediv' + str_idnum + '" style="border: 0px solid #aaa;text-align:left;padding:20px;"><div><img src="' + response + '" style="padding:10px; margin-right:20px; border-bottom: 2px solid #ccc;border-left: 2px solid #ccc;border-top: 2px solid #ddd; border-right: 2px solid #ddd;"  id="imageid' + str_idnum + '" align="left"/></div><div class="descriptionwrapper" style="border: 0px solid #aaa;"><textarea cols="40" rows="3" id="textarea' + str_idnum + '" onClick="SelectAll(\'textarea' + str_idnum + '\')" align="left" style="resize:none;">Optional description goes here...</textarea><br /><input type="checkbox" style="margin-top:-20px" name="delete" value="Delete" id="delete' + str_idnum + '"/>Delete<br /><input type="radio" name="setcoverpic" value="setcoverpic" id="setcoverpic' + str_idnum + '"/>Make this the front cover of set<br /><br /></div></div><br /><br /><br />');

here is the code for all the buttons to perform save, delete, delete all, function

   <div id="buttonbardiv">
    <div class="fancybuttonwrapper" style="margin-left:100px;"><span class="button">   <span>
    <input type="button" class="form_button" id="checkall" value="  Check all"></span> </span> </div>  

   <div class="fancybuttonwrapper" style="margin-left:316px; "><span class="button"><span>
        <input type="button" class="form_button" id="deletecheckedbutton" value="    Delete Checked Items"></span></span> </div>
      <div class="fancybuttonwrapper" style="margin-left:500px;"><span class="button"><span>
        <input type="button" class="form_button" id="finisheduploadingbutton" value="  Save and Exit">
      </span></span> </div>
        <div class="fancybuttonwrapper" style="margin-left:460px;"><span class="button"><span>
         <input type="button" class="form_button" id="gobackbutton" value="  Go Back">
        </span></span> </div>
  </div>       

      <div class="images" id="thumbnails">
     </div>

my question is that how I call ajax to perform the save, delete and delete all functions when the button get clicked, thanks!

Answer 1

I think it depends on the way your application works. In a RESTful application, you would call those, for example:

save: POST /things
delete: DELETE /things/1

And have a controller on your server that executes your requests. Basically, what you have to keep in mind is to associate HTTP requests (AJAX) to a script that controls actions in your database.