Question

这里我给你的jquery源代码片段。这是在单独的JS文件中编写的。指导我如何直接访问add_user函数。如果我写了SRC = assets / js / functions.js。它会给我JS的错误，因为我直接在按钮onclick事件上使用函数。我正在为ADD USER和EDIT USER使用单一表格。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Demo</title>

  <link href="<?php echo base_url() ?>assests/css/bootstrap.min.css" 
 rel="stylesheet">
  <link href="<?php echo base_url() ?>assests/css/dataTables.bootstrap.css" 
 rel="stylesheet">
  <link href="<?php echo base_url() ?>assests/css/custom.css" 
 rel="stylesheet">

  </head>
 <body>

 <div class="col-md-10 col-md-offset-1">
 <button class="btn btn-primary" id="btn_adduser" onclick="add_user()">Add 
 user</button>
  <table id="table_id" class="table table-bordered" cellspacing="0" >
  <thead>
    <tr>
                <th>User ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Status</th>
      <th>Created</th>
      <th>Modified</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
            <?php foreach($user as $user){?>
                 <tr>
                    <td><?php echo $user->id;?></td>
                    <td><?php echo $user->firstname;?></td>
                            <td><?php echo $user->lastname;?></td>
            <td><?php echo $user->email;?></td>
                            <td><?php echo $user->status;?></td>
            <td><?php echo $user->created_date;?></td>
                            <td><?php echo $user->modified_date;?></td>
                            <td>
                                <button class="btn btn-primary" 
 onclick="edit_user(<?php echo $user->id;?>)"><i class="glyphicon glyphicon-
 pencil"></i></button>
                                <button class="btn btn-primary" 
 onclick="delete_user(<?php echo $user->id;?>)"><i class="glyphicon 
 glyphicon-
 trash"></i></button>
                            </td>
                  </tr>
                 <?php }?>
  </tbody>
 </table>
 </div>

 <!--Add / Edit User Section-->
 <div class="panel panel-primary col-md-6 col-md-offset-3" style="display: 
 none;">
  <div class="panel-heading">Add user</div>
  <div class="panel-body">
      <form action="#" id="form" class="form-horizontal">
          <input type="hidden" value="" name="id"/>
          <div class="form-body">
            <div class="form-group">
                <input name="txt_fname" id="txt_fname" 
 placeholder="Firstname" class="form-control" type="text" required>
            </div>

            <div class="form-group">
                <input name="txt_lname" id="txt_lname" 
 placeholder="Lastname" class="form-control" type="text" required>
            </div>

            <div class="form-group">
                <input name="txt_email" id="txt_email" placeholder="Email 
 address" class="form-control" type="email" required>
            </div>

            <label class="control-label" for="radio_status">Status</label>
            <div class="radio">
              <label><input type="radio" name="radio_status" id="sta_active" 
   value="0">Active</label>
            </div>

            <div class="radio">
              <label><input type="radio" name="radio_status" 
  id="sta_inactive" value="1">Inactive</label>
            </div>

          </div>

          <div class="form-group col-md-6">
            <button type="button" class="btn btn-primary" id="btnSave" 
onclick="save()" >Save</button>
            <button type="reset" class="btn btn-primary">Reset</button>
            <button type="button" class="btn btn-primary" 
 id="btn_hide">Hide</button>
          </div>
        </form>

  </div>
 </div>
<!-- End Add / Edit User Section-->
<script src="<?php echo base_url()?>assests/js/jquery-3.1.0.min.js">
</script>
<script src="<?php echo base_url()?>assests/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()?>assests/js/jquery.dataTables.min.js">
</script>
<script src="<?php echo base_url()?>assests/js/dataTables.bootstrap.js">
</script>
<script src="<?php echo base_url()?>assests/js/functions.js"></script>

</body>
</html>



$(document).ready( function () {
$('#table_id').DataTable();

$("#btn_hide").click(function(){
    $(".panel").slideUp(500);
}); 
});
var save_method; //for save method string
var table;

function add_user() {
  save_method = 'add';
  $(".panel").slideDown(500);
  $(".panel-heading").text("Add user");
  $('#form')[0].reset(); // reset form on modals
 }

  function edit_user(id) {
  save_method = 'update';
  $('#form')[0].reset(); // reset form on modals

  //Ajax Load data from ajax
  $.ajax({
      url : "<?php echo site_url('index.php/user/ajax_edit/')?>/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('[name="id"]').val(data.id);
        $('[name="txt_fname"]').val(data.firstname);
        $('[name="txt_lname"]').val(data.lastname);
        $('[name="txt_email"]').val(data.email);

        $(".panel").slideDown(500);
        $(".panel-heading").text("Edit user");
      }, error: function (jqXHR, textStatus, errorThrown) {
          alert('Error get data from ajax');
      }
  });
}



 function save() {
  var url;
  if(save_method == 'add') {
      url = "<?php echo site_url('index.php/user/user_add')?>";
  } else {
    url = "<?php echo site_url('index.php/user/user_update')?>";
  }

   // ajax adding data to database
      $.ajax({
        url : url,
        type: "POST",
        data: $('#form').serialize(),
        dataType: "JSON",
        success: function(data) {
          //if success close modal and reload ajax table
          $(".panel").slideUp(500);
          location.reload();// for reload a page
        }, error: function (jqXHR, textStatus, errorThrown) {
            alert('Please enter valid data');
        }
    });
}

function delete_user(id) {
  if(confirm('Are you sure delete this data?')) {
    // ajax delete data from database
      $.ajax({
        url : "<?php echo site_url('index.php/user/user_delete')?>/"+id,
        type: "POST",
        dataType: "JSON",
        success: function(data) {
           location.reload();
        }, error: function (jqXHR, textStatus, errorThrown) {
            alert('Error deleting data');
        }
    });
  }
}

如何直接在外部JS文件的HTML按钮的onClick事件中使用add_user函数。

Answer 1

function.js必须在jquery代码之前

<script src='function.js'>
<script>
      $(document).ready( function () {
       $('#table_id').DataTable();

       $("#btn_hide").click(function(){
          $(".panel").slideUp(500);
       });

     $('button.class').click(function(){
             add_user();
      })
    });
</script>

如何使用jquery document.ready的局外函数

1 个答案: