Question 194901 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – html variable not define

Is the simple question, that one of the variables is not defined, But I spend 3 hours, not find out the problem, therefore, asking for a hand here

Q: GET DLETE ID undefined

  • where that in console.log("GET DLETE ID", id) , the id is not defined
  • but in line 70 console.log("GET edit DATA", data) until here here still can get and print the data and id

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags and other head elements -->
  <title>Account Management</title>

<body>

  <h1>Account Management</h1>
    <main id="main-holder">

    
    </main>
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"
  ></script>

  <script>

var Selected_add_edit_api; 

    $(document).ready(function () {
      const getToken = localStorage.getItem("token")

      console.log("GET TOKEN", getToken)

      var table = $("#example").DataTable({
        ajax: {
          url: "http://192.168.10.01:8000/api/user_info/",
          headers: {
            'Authorization': 'Bearer ' + getToken
          },
          dataSrc: function (response) {
            console.log("DATA", response.users);
            return response.users
          }
        },
        columns: [
          {
            data: null,
            title: "ACTION",
            render: function (data, type, row) {
              return '<button type="button" class="btn btn-primary" id="Edit_Data" data-toggle="modal" data-target="#exampleModal" data-whatever=" ">Edit</button>' +
                '<button class="btn btn-danger btn-sm delete-btn" id="Delete_Data" data-id="' + row.device_id + '">Delete</button>';
            }
          },

          
          { data: "userid", title: "Login ID" },
          { data: "name", title: "Name" },
          { data: "acc_type", title: "Account Type" },
          { data: "created_at", title: "Created Time" }
        ]
      });


      table.draw()
      

      var rowData;

      $('#example tbody').on('click', 'button', function (event) {  


        var data = table.row($(this).parents('tr')).data();
        rowData = data;
  
        console.log("GET edit DATA", data)              // here still can get and pint the data and id   

      });

  
      $(function() {
      $('#exampleModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        var modal = $(this);
        var data = rowData;
       
        var inputFields = modal.find('.modal-body input');
        
        if (button.attr('id') == "AddedNew_Data02" || button.attr('id') == "AddedNew_Data" ) {      
          inputFields.val("");
          modal.find('.modal-title').text('Add Data ' + recipient);
          Selected_add_edit_api = "add-api";                                              
        } else {
          var keys = Object.keys(data);
          for (var i = 0; i < inputFields.length; i++) {
            var inputValue = data[keys[i]];
            var inputValue = rowData[keys[i]];
            modal.find('.modal-title').text('Edit Data ' + recipient);
            Selected_add_edit_api = "edit-api";                                      
            $(inputFields[i]).val(inputValue);
          }
        }
      });
    });




      function editRow_website(id){
        
      
            
        var device_id=document.getElementById("userid"+id);  
        var name=document.getElementById("name"+id);  
        var acc_type=document.getElementById("acc_type"+id);

        
        let getEditData = {
          "userid": userid,
          "name": name,
          "account type": acc_type,

        }

        document.getElementById("#editid input").value = device_id
       
      }


      $(document).on('click', '.delete-btn', function (event) {  
        var id = $(this).data('id')
        
        console.log("GET DLETE ID", id)

        confirmDelete(id) 
      });

      function deleteData(id) {
        $.ajax({
          url: "http://192.168.10.01:8000/api/user_info/?id="+ id,
          type:'DELETE',
          headers: {
            'Authorization': 'Bearer ' + getToken  
          },
          success: function(response){
            console.log(response);
          }

        }).then(res => console.log("RES", res));  
      }
    });
  </script>

if I add console.log("row", row); to show row
all the row of the data will show up (pic) row and row id showing

        columns: [
          {
            data: null,
            title: "ACTION",
            render: function (data, type, row) {
              console.log("row", row);
              return '<button type="button" class="btn btn-primary" id="Edit_Data" data-toggle="modal" data-target="#exampleModal" data-whatever=" ">Edit</button>' +
                '<button class="btn btn-danger btn-sm delete-btn" id="Delete_Data" data-id="' + row.device_id + '">Delete</button>';
            }
          },
         
          
          { data: "userid", title: "Login ID" },
          { data: "name", title: "Name" },
          { data: "acc_type", title: "Account Type" },
          { data: "created_at", title: "Created Time" }
        ]
      });
Tags:

2

Answers


  1. 0

    You should just set the onClick event in the delete button. Then create the deleteItem function with the id parameter.

    <button 
onClick="deleteItem(`${data.id}`)"
class="btn btn-danger btn-sm delete-btn" id="Delete_Data" data-id="' + row.device_id + '">Delete</button>'

    Second solution:
    You should try this:

    let id = $(this).attr('data-id');
    Login or Signup to reply.
  2. 0

    Based on the code provided, the issue is occurring because the id variable is not defined in the deleteData function. You are passing id as a parameter to the function, but you are not using it correctly.

    function deleteData(id) {
  $.ajax({
    url: "http://192.168.10.01:8000/api/user_info/?id=" + id,
    type: 'DELETE',
    headers: {
      'Authorization': 'Bearer ' + getToken
    },
    success: function (response) {
      console.log(response);
    }
  }).then(res => console.log("RES", res));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search