Невозможно заполнить запись в bootstrap modal при нажатии ссылки

Question

Мне нужна помощь, я так много работал, чтобы заполнить запись, чтобы загрузочный модальный, когда нажимается ссылка, чтобы пользователь мог редактировать и обновлять запись. Ссылка не в форме, а в таблице. Ниже приведены мои неработающие коды:

HTML-

<div class="widget-content"> 
         <form action="#" method="GET"> 
          <table class="table table-striped table-bordered table-hover table-checkable datatable"> 
           <thead> 
            <tr> 
          <th class="checkbox-column"> 
              <input type="checkbox" class="uniform"> 
             </th> 
             <th>Actions</th> 
             <th>Code</th> 
             <th>Full Name</th> 
             <th>Company Name</th> 
             <th>Business Location</th> 
             <th>Telephone</th> 
             <th>Credit Limit</th> 
            </tr> 
           </thead> 
           <tbody> 
            <?php 
        $query="select * from customer_vendor"; 
        $result = mysqli_query($link,$query); 
       while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){ 
        $firstname = $row['first_name']; 
        $lastname = $row['last_name']; 
        $fullname = $firstname.' '.$lastname; 
        $climit = number_format($row['credit_limit'],2); 
       echo 
          "<tr> 
           <td class=\"checkbox-column\"> 
              <input type=\"checkbox\" class=\"uniform\" > 
              <input type=\"hidden\" > 
           </td> 
           <td> 
           <ul class=\"table-controls\"> 
               <li><a class=\"bs-tooltip\" id=\"updateit\" name=\"update_cv\" data-class=\"{$row['customer_vendor_id']}\" data-toggle=\"modal\" href=\"#update_customer_vendor\" title=\"Edit\"><i class=\"icon-pencil\"></i></a> </li> 
               <li><a class=\"bs-tooltip\" data-toggle=\"modal\" href=\"#delete_customer_vendor\" title=\"Delete\"><i class=\"icon-trash\"></i></a> </li> 
           </ul> 
           </td> 
           <td>{$row['customer_vendor_id']}</td> 
           <td>$fullname</td> 
           <td>{$row['company_name']}</td> 
           <td>{$row['business_location']}</td> 
           <td>{$row['telephone']}</td> 
           <td>$climit</td>        
          </tr>"; 
         } 
         ?> 
           </tbody> 
          </table> 
          </form> 
          <a href="create_new_cust_vend.php"><button class="btn btn-primary"><i class="fa fa-plus"> New</i></button></a> 
         </div> 

Модальное:

<div class="modal modal-wide fade" id="update_customer_vendor"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Updating customer - Vendor</h4> 
      </div> 
      <form action="#" method="POST"> 
       <div class="modal-body" id="update_modal"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-primary" ><i class="fa fa-save"> Update</i></button> 
       </div> 
      </form> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div> 

Сценарий:

<script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#updateit").click(function(){ 
      var studentClass =$("#updateit").val(); 
      $.ajax({ 
       type:"GET", 
       url:"update_cust_vend.php", 
       data:"updateit="+studentClass, 
       success:function(data){ 
        $("#update_modal").html(data); 
       } 
      }); 
     }); 
    }); 
</script> 

Answer 1

попробовать следующее. Я думаю, что это исправить.

<li><a class=\"bs-tooltip\" id=\"updateit\" name=\"update_cv\" data-class="studentclass" data-toggle=\"modal\" href=\"#update_customer_vendor\" title=\"Edit\"><i class=\"icon-pencil\"></i></a> </li> 

ссылка должна содержать studentClass где-то это не поле ввода, поэтому нельзя использовать val(). i.e data-class = "studentclass" в приведенной выше ссылке.

$(document).ready(function(){ 

    $("#updateit").on('click', function(e){ 
     e.preventDefault(); 
     var studentClass =$(this).data('class'); // get studentclass form link. 
     $.ajax({ 
      type:"GET", 
      url:"update_cust_vend.php", 
      data:"updateit="+studentClass, 
      success:function(data){ 
       $("#update_modal").html(data); 
       $("#update_customer_vendor").modal(); 
      } 
     }); 
    }); 
}); 

Answer 2

Прежде всего добавьте следующие строки в случае щелчка, чтобы предотвратить поведение по умолчанию гиперссылке:

$("#updateit").click(function(event){ 
    event.preventDefault(); 
}); 

После того, что я запутался, вы принимаете стоимость вашей гиперссылки здесь:

var studentClass =$("#updateit").val(); 

Это не ошибка? Поскольку ваша гиперссылка не имеет значения ...

Вы можете сохранить значение в настраиваемом атрибуте. Для этого вы должны определить свой атрибут с префиксом data-. Так, например, data-value.

Так что ваш гипер ссылка будет:

<li><a class=\"bs-tooltip\" id=\"updateit\" ... data-value="1"><i class=\"icon-pencil\"></i></a></li> 

Чтобы использовать значение:

var studentClass = $(this).attr('data-value'); 

Где $(this) относится к вашей щелкнули гиперссылкой.

И в обработчике успеха после заполнения HTML не показывать модальный, добавьте это:

$('#update_customer_vendor').modal('show');