title: How to Edit each row in the data table in Spring mvc on a edit button click?
body: <p>Whenver i click on <code>&lt;a  id="myBtn"&gt;&lt;i class="fa fa-pencil" style="color:OliveDrab;"&gt;&lt;/i&gt;&lt;/a&gt;</code> i get modal only on first row click and that too appears empty.I went through many links over internet but none of them gave a clear picture as how can it be achieved using spring mvc. Following is my attached code, if someone could help me with this i'll be very grateful.</p>
  
  <p><strong>glossary.jsp</strong> :</p>
  
  <pre><code>&lt;!-- Content Wrapper. Contains page content --&gt;
    &lt;div class="content-wrapper"&gt;
      &lt;!-- Content Header (Page header) --&gt;
      &lt;section class="content-header"&gt;
        &lt;h1&gt;
          Glossary
          &lt;small&gt;search any term&lt;/small&gt;
        &lt;/h1&gt;
        &lt;ol class="breadcrumb"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Tables&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;Data tables&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/section&gt;
  
      &lt;!-- Main content --&gt;
      &lt;section class="content"&gt;
      &lt;!--.modal --&gt;
        &lt;div class="modal fade" id="modal-default"&gt;
            &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                    &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Edit Term&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                 &lt;form:form method="post" id="editTermForm" action="editGlossaryTerm" commandName="editedTermObj" role="form"&gt;
                &lt;div class="box-body"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;%-- &lt;input type="hidden" id="termId" name="termId" value="${editedTerm.termId}" /&gt; --%&gt;
                    &lt;label for="termTitle"&gt;Term&lt;/label&gt;
                    &lt;input class="form-control" type="text" placeholder="Title of your term..." id="termTitle" name="termTitle" value="" /&gt;
                    &lt;br&gt;
                    &lt;label for="termTitle"&gt;Term Description&lt;/label&gt;
                    &lt;textarea class="form-control" rows="3" placeholder="Enter description..." id="termDescription" name="termDescription" &gt;&lt;/textarea&gt; 
                    &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;/form:form&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default pull-left" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /.modal-content --&gt;
            &lt;/div&gt;
            &lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;
          &lt;!-- /.modal --&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;div class="box"&gt;
              &lt;div class="box-header"&gt;
                &lt;h3 class="box-title"&gt;All related terms&lt;/h3&gt;
              &lt;/div&gt;
              &lt;!-- /.box-header --&gt;
              &lt;div class="box-body"&gt;
              &lt;form:form id="glossaryForm" modelAttribute="glossaryFormObj"&gt;
              &lt;input type="hidden" id="termId" name="termId"  /&gt;
                &lt;table id="example1" class="table table-bordered table-striped"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;S.No.&lt;/th&gt;
                    &lt;th&gt;Term&lt;/th&gt;
                    &lt;th&gt;Term Description&lt;/th&gt;
                    &lt;th&gt;Created On&lt;/th&gt;
                    &lt;th&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;c:forEach var="glossaryTerms" items="${allGlossaryTerms}" varStatus="status"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;c:out value="${status.count}" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;c:out value="${glossaryTerms.termTitle}" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;c:out value="${glossaryTerms.termDescription}" /&gt;&lt;/td&gt;
                      &lt;td &gt;&lt;c:out value="${glossaryTerms.termCreatedOn}" /&gt;&lt;/td&gt;
                      &lt;td align="center"&gt;
                      &lt;!-- data-toggle="modal" data-target="#modal-default"  --&gt;
                      &lt;a  id="myBtn"&gt;&lt;i class="fa fa-pencil" style="color:OliveDrab;"&gt;&lt;/i&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                      &lt;a href="javascript:deleteTerm(${glossaryTerms.termId})"&gt;&lt;i class="fa fa-trash-o" style="color:#731043;"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/c:forEach&gt;
                  &lt;/tbody&gt;
                  &lt;tfoot&gt;
                  &lt;tr&gt;
                    &lt;th&gt;S.No.&lt;/th&gt;
                    &lt;th&gt;Term&lt;/th&gt;
                    &lt;th&gt;Term Description&lt;/th&gt;
                    &lt;th&gt;Created On&lt;/th&gt;
                    &lt;th&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/tfoot&gt;
                &lt;/table&gt;
                &lt;/form:form&gt;
              &lt;/div&gt;
              &lt;!-- /.box-body --&gt;
            &lt;/div&gt;
            &lt;!-- /.box --&gt;
          &lt;/div&gt;
          &lt;!-- /.col --&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;
      &lt;/section&gt;
      &lt;!-- /.content --&gt;
    &lt;/div&gt;
  
  &lt;script&gt;
    $(function () {
      $('#example1').DataTable()
      $('#example2').DataTable({
        'paging'      : true,
        'lengthChange': false,
        'searching'   : false,
        'ordering'    : true,
        'info'        : true,
        'autoWidth'   : false
      })
    })
  
    function deleteTerm(termId){
        document.getElementById('termId').value=termId;
        document.getElementById('glossaryForm').action="deleteGlossaryRow";
        document.getElementById('glossaryForm').submit();
  
     }
  
  
  
    function editGlossaryTerm(termId){
        document.getElementById('termId').value=termId;
         document.getElementById('glossaryForm').action="editGlossaryTerm";
         document.getElementById('glossaryForm').submit();
  }  
  
    $(document).ready(function(){
        $("#myBtn").click(function(){
            $("#modal-default").modal();
  
        });
    });
  
    $('a.edit').on('click', function() {
          var myModal = $('#modal-default');
  
          // now get the values from the table
          var termTitle = $(this).closest('tr').find('td.termTitle').html();
          var termDescription = $(this).closest('tr').find('td.termDescription').html();
          // and set them in the modal:
          $('.termTitle', myModal).val(termTitle);
          $('.termDescription', myModal).val(termDescription);
          // and finally show the modal
          myModal.modal({ show: true });
  
          return false;
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HomeController.java</strong></p>
  
  <pre><code>package in.hkcl.hipaPdfApp;
  
  import java.util.ArrayList;
  import java.util.List;
  
  import javax.servlet.http.HttpServletRequest;
  
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.ModelAttribute;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  
  import in.hkcl.Service.BaseDataService;
  import in.hkcl.dao.BaseDataDao;
  import in.hkcl.model.DocumentModel;
  import in.hkcl.model.GlossaryModel;
  import in.hkcl.utils.ApplicationLogFactory;
  import in.hkcl.utils.ApplicationLogger;
  import in.hkcl.utils.CommonUtils;
  
  /**
   * Handles requests for the application home page.
   */
  @Controller
  public class HomeController {
      private static ApplicationLogger logger = ApplicationLogFactory.getLogger(HomeController.class);
  
      @Autowired
      BaseDataDao baseDataDao;
  
      @Autowired
      BaseDataService baseDataService;
  
      List&lt;DocumentModel&gt;allPdfNames;
  
      /**
       * Simply selects the home view to render by returning its name.
       */
      @RequestMapping(value = "/dashboard", method = RequestMethod.GET)
      public String dashboard(Model model, HttpServletRequest request) {
          try {
              allPdfNames=baseDataService.getListPdfNames();
              List&lt;String&gt; fileNamesOnly = new ArrayList&lt;String&gt;();
              for(int i=0;i&lt;allPdfNames.size();i++){
                  String url=allPdfNames.get(i).getDocumentName().toString();
                  String fileName = url.substring( url.lastIndexOf('/')+1, url.length() );
                  String fileNameWithoutExtn = fileName.substring(0, fileName.lastIndexOf('.'));
                  fileNamesOnly.add(fileNameWithoutExtn);
              }
  
              model.addAttribute("pdfNameList",fileNamesOnly);
          } catch (Exception e) {
              // TODO Auto-generated catch block
              e.printStackTrace();
          }
          return "home";
      }
  
      @RequestMapping(value = "/", method = RequestMethod.GET)
      public String home(Model model, HttpServletRequest request) {
          try {
              allPdfNames=baseDataService.getListPdfNames();
              List&lt;String&gt; fileNamesOnly = new ArrayList&lt;String&gt;();
              for(int i=0;i&lt;allPdfNames.size();i++){
                  String url=allPdfNames.get(i).getDocumentName().toString();
                  String fileName = url.substring( url.lastIndexOf('/')+1, url.length() );
                  String fileNameWithoutExtn = fileName.substring(0, fileName.lastIndexOf('.'));
                  fileNamesOnly.add(fileNameWithoutExtn);
              }
  
              model.addAttribute("pdfNameList",fileNamesOnly);
          } catch (Exception e) {
              // TODO Auto-generated catch block
              e.printStackTrace();
          }
          return "home";
      }
  
      @RequestMapping(value = "/glossary", method = RequestMethod.GET)
      public String glossary(Model model,HttpServletRequest request) {
          try{
              List&lt;GlossaryModel&gt; allGlossaryTerms=baseDataService.getGlossaryTerms();
              model.addAttribute("allGlossaryTerms", allGlossaryTerms);
          }catch(Exception e){
              e.printStackTrace();
          }
          return "glossary";
      }
  
      @RequestMapping(value="/deleteGlossaryRow",method={RequestMethod.POST,RequestMethod.GET})
      public String deleteGlossaryRow(@ModelAttribute("termId") Integer termId,Model model) throws Exception{
          if(CommonUtils.isNotEmpty(termId))
          {
              baseDataService.deleteGlossaryTerm(termId);
          }
          List&lt;GlossaryModel&gt; glossaryList=baseDataService.getGlossaryTerms();
          model.addAttribute("allGlossaryTerms", glossaryList);
          return "glossary";
  
      }
  
  
      @RequestMapping(value="/editGlossaryTerm", method = {RequestMethod.POST,RequestMethod.GET})
      public String editGlossaryTermById(@ModelAttribute("glossaryFormObj") GlossaryModel glossaryFormObj, HttpServletRequest request,
              Model model ){
          try{
              GlossaryModel allGlossaryTerms= baseDataService.getGlossaryTermById(glossaryFormObj.getTermId());
              model.addAttribute("allGlossaryTerms", allGlossaryTerms);
          }catch(Exception e){
              logger.logError("editGlossaryTermById", "exception while editing Term details", e);
          }
          return "glossary";
      }
  
  }
  </code></pre>
  
  <p><strong>GlossaryModel.java</strong></p>
  
  <pre><code>package in.hkcl.model;
  
  import java.io.Serializable;
  import java.util.Date;
  
  import javax.persistence.Column;
  import javax.persistence.Entity;
  import javax.persistence.GeneratedValue;
  import javax.persistence.GenerationType;
  import javax.persistence.Id;
  import javax.persistence.Table;
  
  @Entity
  @Table(name="glossary")
  public class GlossaryModel implements Serializable {
      private static final long serialVersionUID=1L;
  
      @Id
      @Column(name="termId")
      @GeneratedValue(strategy=GenerationType.AUTO)
      private int termId;
  
      @Column(name="termTitle")
      private String termTitle;
  
      @Column(name="termDescription")
      private String termDescription;
  
      @Column(name="termCreatedOn")
      private Date termCreatedOn;
  
      @Column(name="termModifiedOn")
      private Date termModifiedOn;
  
      public GlossaryModel() {
  
      }
  
      public GlossaryModel(int termId, String termTitle, String termDescription, Date termCreatedOn,
              Date termModifiedOn) {
          super();
          this.termId = termId;
          this.termTitle = termTitle;
          this.termDescription = termDescription;
          this.termCreatedOn = termCreatedOn;
          this.termModifiedOn = termModifiedOn;
      }
  
      public int getTermId() {
          return termId;
      }
  
      public void setTermId(int termId) {
          this.termId = termId;
      }
  
      public String getTermTitle() {
          return termTitle;
      }
  
      public void setTermTitle(String termTitle) {
          this.termTitle = termTitle;
      }
  
      public String getTermDescription() {
          return termDescription;
      }
  
      public void setTermDescription(String termDescription) {
          this.termDescription = termDescription;
      }
  
      public Date getTermCreatedOn() {
          return termCreatedOn;
      }
  
      public void setTermCreatedOn(Date termCreatedOn) {
          this.termCreatedOn = termCreatedOn;
      }
  
      public Date getTermModifiedOn() {
          return termModifiedOn;
      }
  
      public void setTermModifiedOn(Date termModifiedOn) {
          this.termModifiedOn = termModifiedOn;
      }
  
  }
  </code></pre>
  
  <p>I have a Dao,DaoImpl, Service and ServiceImpl class to fetch list in controller. their code is pasted as it is on the following links : </p>
  
  <pre><code>Dao: https://paste.ofcode.org/eDKicY6YeFeTeEerCCPSGd
  DaoImpl : https://paste.ofcode.org/35qKZ2XB9NsPFjDBTP5m9Km
  Service : https://paste.ofcode.org/322Zk5PnNrrW94qbc6YvUe3
  ServiceImpl : https://paste.ofcode.org/NLMpZ9WJeungp5xFsCH3ez
  </code></pre>
  
  <p>I am very much confused with the code. Plz help me to sort this! I have attached the picture too. Whenever i click on pen icon i want to get a model with that row data, which i can modify. <a href="https://i.stack.imgur.com/FMFTC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FMFTC.png" alt="enter image description here"></a></p>