javascript - Codeigniter:仅在第一个模式框上调用 Ajax

Question

我在foreach循环中有一条记录，点击每个编辑按钮后，数据会显示在多个模态框中，数据会显示在所有模态框中。< br/> 我有一个 ajax 函数，仅当我尝试更改第二个模式框中的值时，第一个模式框才能正常工作，它甚至不会在其上运行 ajax。
这是我的 Ajax 函数:

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

    $("#submit").click(function(event)
    {

    alert("working on other ids");
      event.preventDefault();
      var hiddenValue = $("#hiddenValue").val();

      alert(hiddenValue);

      var update_name = $("input#update_name").val();

      // pop up Name Entered
      alert(update_name);

      jQuery.ajax(
      {
        type: "POST",
        url: "<?php echo base_url(); ?>" + "seasons/update_season",


        data: {
          hiddenValue : hiddenValue, 
          update_name: update_name
        },

        success: function(res)
        {
          console.log(res);
          // window.alert("i got some data ");
          if (res)
          {
              jQuery("div#result").show();
          }
        },
        fail: function(res)
        {
          console.log(res);
        }
      });
    });
  });

这是我在同一个 View 文件(我有ajax)中的foreach循环，它在模式框中显示数据:

 <table class="table table-striped jambo_table bulk_action">
    <thead>
       <tr class="headings">
          <th class="column-title">Season Id </th>
          <th class="column-title">Season Name </th>
          <th class="column-title">Action </th>
          </tr>
    </thead>

    <tbody>
       <?php 
         // print_r($data->result());
         // die();
         foreach ($data->result() as $key => $values): ?>

           <tr class="even pointer">
             <td class=" "><?php echo $values->season_id; ?></td>
             <td class=" "><?php echo $values->names; ?></td>
             <td class=" ">

             <span>
                 <a href="" class="btn btn-primary" data-toggle="modal" data-target="#myModal<?php echo $values->season_id; ?>">
                  <i class="fa fa-edit"> Edit</i>
                </a>
             </span>

             &nbsp; &nbsp;

             <span>
               <a href="<?php echo base_url()."seasons/delete_seasons/".$values->season_id; ?>" class="btn btn-danger" >
               <i class="fa fa-times-circle-o"> Delete </i>
               </a>
             </span>

          </td>
          <!-- Button trigger modal -->

          <!-- Update Modal -->
          <div class="modal fade" id="myModal<?php echo $values->season_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                   <div class="modal-header">
                     <?php 
                       echo "<div id='result' style='display: none'>";

                       echo "<div class='alert alert-success' role='alert'>Success ! Data Updated</div>";
                       echo "</div>";
                      ?>

                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Update Seasons</h4>
                      </div>

                      <?php
                      $attributes = array(
                      'id' => 'form1',
                      'class' => '' ); 
                       form_open('seasons/update_season'); ?>

                    <div class="modal-body">
                      <div class="form-group">
                         <input type="hidden" id="hiddenValue" name="hiddenValue" value="<?php echo $values->season_id; ?>">
                                  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Season Name: 
                                  </label>
                                <div class="title_right">
                                   <div class="input-group">
                                     <input type="text" class="form-control" name="update_name" id="update_name" value="<?php echo $values->names; ?>">
                                        </div>
                                    </div>
                                  </div>

                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" id="close_modal" data-dismiss="modal">Close</button>
                                <input type="submit" class="btn btn-primary" id="submit" value="Save changes">
                              </div>

                            </form>
                        </div>
                    </div>
                 </div>
              </tr>
           <?php endforeach; ?>
       </tbody>
     </table>

Answer 1

“id”属性必须是唯一的。您对所有按钮使用相同的 id。

更改 id 并使用 jquery 类选择器捕获点击按钮。