Hello Everyone, can someone tell me how I can change the "edit" form to a popup?

Hello Everyone, can someone tell me how I can change the "edit" form to a popup?

DarkNight9672DarkNight9672 Posts: 4Questions: 1Answers: 0

The image below shows what I see when i click the "edit" button. For some reason, it's displaying in the bottom left corner instead of in a popup. I have also attached my code below. Any help would be greatly appreciated. Thank you.

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Iventory Management System</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

    <link href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.css" rel="stylesheet"/>
 
    <script src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.js"></script>
 
    <script type="text/javascript" src="../Extensions/Editor/js/dataTables.editor.min.js"></script>
 
    <script src="../orders/orders.js"></script>

</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>



    <!-- Navbar !-->

    <nav class="navbar navbar-expand-lg bg-light">

        <div class="container-fluid">

            <a class="navbar-brand" href="#">

                <img src="../assets/logo-placeholder.png" alt="logo-placeholder" width="" height="100">

            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

           <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                    <li class="nav-item">

                        <a class="nav-link bi bi-speedometer" aria-current="page" href="../dashboard/dashboard.php"> Dashboard</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link bi bi-card-checklist active" aria-current="page" href="../orders/orders.php"> Orders</a>

                    </li>

                    <li class="nav-item" id="navproduct">

                        <a class="nav-link bi bi-tags" href="../products/products.php"> Products</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link bi bi-truck" href="../shipments/shipments.php"> Shipments</a>

                    </li>

                </ul>

                <ul class="navbar-nav ms-auto">

                    <li class="nav-item dropdown">

                        <a class="nav-link dropdown-toggle bi bi-person-fill" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Account</a>

                        <ul class="dropdown-menu">

                            <li><a class="dropdown-item bi bi-box-arrow-in-left" href="../login/logout.php"> Logout</a></li>

                        </ul>

                    </li>

                </ul>   

            </div>

        </div>

    </nav> 

    <!-- Breadcrumbs !-->

    <div class="card">

        <div class="card-header">

            <div class="row">

                <div class="col-md-12">

                    <nav aria-label="breadcrumb">

                            <ol class="breadcrumb">

                            <li class="breadcrumb-item"><a href="../dashboard/dashboard.php">Dashboard</a></li>

                            <li class="breadcrumb-item active" aria-current="page">Orders</li>

                        </ol>

                    </nav>

                </div>

            </div>

        </div>    

    </div>

    

    <!-- Main Page !-->

    <div class="card">

         <div class="card-header bi bi-pencil-square ">

            Manage Orders

        </div>



         <div class="card-body">

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">

                <button type="button" id="addordermodalbtn"class="btn btn-secondary bi bi-plus" data-bs-toggle="modal"  data-bs-target="#addordersmodel" type="button"> Add Order</button>

            </div>

        </div>

        <table id="manageordertable" class="table display" style="width:100%">

            <thead>

                <tr>

                    <th>ID</th>

                    <th>Date</th>

                    <th>Contact</th>

                    <th>Items</th>

                    <th>Value</th>

                    <th>Payment Status</th>

                    <th>Status</th>
                </tr>

            </thead>



        </table>

    </div>
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../orders/server_processing.php",
        table: "#manageordertable",
        fields: [ {
                label: "ID",
                name: "order_id"
            }, {
                label: "Date",
                name: "order_date"
            }, {
                label: "Contact",
                name: "order_contact"
            }, {
                label: "Items",
                name: "order_items"
            }, {
                label: "Value",
                name: "order_value"
            }, {
                label: "Payment Status",
                name: "payment_status",
            }, {
                label: "Status",
                name: "order_status"
            }
        ]
    } );
 
    $('#manageordertable').DataTable( {
        dom: "Bfrtip",
        ajax: "../orders/server_processing.php",
        columns: [

            { data: "order_id" },
            { data: "order_date" },
            { data: "order_contact" },
            { data: "order_items" },
            { data: "order_value" },
            { data: "payment_status" },
            { data: "order_status" },
        ],

        className: 'select-checkbox',
        select: true,
        buttons: [
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
    
} );

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Looks like you are missing both js/editor.bootstrap5.min.js and editor.bootstrap5.min.css. See this example. Click on the CSS tab to see the required CSS.

    Kevin

  • DarkNight9672DarkNight9672 Posts: 4Questions: 1Answers: 0

    Hello,

    Thank you so much for your reply. I have included both of the files you mentioned but I seem to be facing an error of some kind now. I have included a screenshot of my console in addition to the current version of my html code. Your help is greatly appreciated. Thanks again.

    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Iventory Management System</title>
    
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    
        <link href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.css" rel="stylesheet"/>
     
        <script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.js"></script>
     
        <script type="text/javascript" src="../Extensions/Editor/js/dataTables.editor.min.js"></script>
    
        <script type="text/css" src="../Extensions/Editor/css/editor.bootstrap5.min.css"></script>
    
        <script type="text/javascript" src="../Extensions/Editor/js/editor.bootstrap5.min.js"></script>
    
        <script type="text/javascript" src="../orders/orders.js"></script>
    
    </head>
    
    <body>
    
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    
    
    
        <!-- Navbar !-->
    
        <nav class="navbar navbar-expand-lg bg-light">
    
            <div class="container-fluid">
    
                <a class="navbar-brand" href="#">
    
                    <img src="../assets/logo-placeholder.png" alt="logo-placeholder" width="" height="100">
    
                </a>
    
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    
                    <span class="navbar-toggler-icon"></span>
    
                </button>
    
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
    
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    
                        <li class="nav-item">
    
                            <a class="nav-link bi bi-speedometer" aria-current="page" href="../dashboard/dashboard.php"> Dashboard</a>
    
                        </li>
    
                        <li class="nav-item">
    
                            <a class="nav-link bi bi-card-checklist active" aria-current="page" href="../orders/orders.php"> Orders</a>
    
                        </li>
    
                        <li class="nav-item" id="navproduct">
    
                            <a class="nav-link bi bi-tags" href="../products/products.php"> Products</a>
    
                        </li>
    
                        <li class="nav-item">
    
                            <a class="nav-link bi bi-truck" href="../shipments/shipments.php"> Shipments</a>
    
                        </li>
    
                    </ul>
    
                    <ul class="navbar-nav ms-auto">
    
                        <li class="nav-item dropdown">
    
                            <a class="nav-link dropdown-toggle bi bi-person-fill" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Account</a>
    
                            <ul class="dropdown-menu">
    
                                <li><a class="dropdown-item bi bi-box-arrow-in-left" href="../login/logout.php"> Logout</a></li>
    
                            </ul>
    
                        </li>
    
                    </ul>   
    
                </div>
    
            </div>
    
        </nav> 
    
        <!-- Breadcrumbs !-->
    
        <div class="card">
    
            <div class="card-header">
    
                <div class="row">
    
                    <div class="col-md-12">
    
                        <nav aria-label="breadcrumb">
    
                                <ol class="breadcrumb">
    
                                <li class="breadcrumb-item"><a href="../dashboard/dashboard.php">Dashboard</a></li>
    
                                <li class="breadcrumb-item active" aria-current="page">Orders</li>
    
                            </ol>
    
                        </nav>
    
                    </div>
    
                </div>
    
            </div>    
    
        </div>
    
        
    
        <!-- Main Page !-->
    
        <div class="card">
    
             <div class="card-header bi bi-pencil-square ">
    
                Manage Orders
    
            </div>
    
    
    
             <div class="card-body">
    
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
    
                    <button type="button" id="addordermodalbtn"class="btn btn-secondary bi bi-plus" data-bs-toggle="modal"  data-bs-target="#addordersmodel" type="button"> Add Order</button>
    
                </div>
    
            </div>
    
            <table id="manageordertable" class="table display" style="width:100%">
    
                <thead>
    
                    <tr>
    
                        <th>ID</th>
    
                        <th>Date</th>
    
                        <th>Contact</th>
    
                        <th>Items</th>
    
                        <th>Value</th>
    
                        <th>Payment Status</th>
    
                        <th>Status</th>
                    </tr>
    
                </thead>
    
    
    
            </table>
    
        </div>
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    One problem is line 23 should be a link tag not a script tag. It should look more like this:

    <link rel="stylesheet"  href="../Extensions/Editor/css/editor.bootstrap5.min.css"/>
    

    In your first post you were loading the Bootstrap 5 style integration files. note teh bs5.

        <link href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.css" rel="stylesheet"/>
      
        <script src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.js"></script>
    

    But now you are not. You are loading the same libraries. Go back to using the BS5 style libraries. It may fix the error you are seeing.

    Kevin

  • DarkNight9672DarkNight9672 Posts: 4Questions: 1Answers: 0

    Hello Kevin,

    Thank you for your quick reply. I have reverted to using Bootstrap 5 libraries but i am still facing the same issue as you can see below. I have re-attached the latest version of my HTML code as-well. I've been trying to fix it for the past couple hours and I really can't find any solution. I really appreciate your help.

    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Iventory Management System</title>
    
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    
        <link href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.css" rel="stylesheet"/>
     
        <script src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.3/b-2.3.5/sl-1.6.1/datatables.min.js"></script>
     
        <script type="text/javascript" src="../Extensions/Editor/js/dataTables.editor.min.js"></script>
    
        <link rel="stylesheet"  href="../Extensions/Editor/css/editor.bootstrap5.min.css"/>
    
        <script type="text/javascript" src="../Extensions/Editor/js/editor.bootstrap5.min.js"></script>
    
        <script type="text/javascript" src="../orders/orders.js"></script>
    
    </head>
    
    <body>
    
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    
    
    
        <!-- Navbar !-->
    
        <nav class="navbar navbar-expand-lg bg-light">
    
            <div class="container-fluid">
    
                <a class="navbar-brand" href="#">
    
                    <img src="../assets/logo-placeholder.png" alt="logo-placeholder" width="" height="100">
    
                </a>
    
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    
                    <span class="navbar-toggler-icon"></span>
    
                </button>
    
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
    
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    
                        <li class="nav-item">
    
                            <a class="nav-link bi bi-speedometer" aria-current="page" href="../dashboard/dashboard.php"> Dashboard</a>
    
                        </li>
    
                        <li class="nav-item">
    
                            <a class="nav-link bi bi-card-checklist active" aria-current="page" href="../orders/orders.php"> Orders</a>
    
                        </li>
    
                        <li class="nav-item" id="navproduct">
    
                            <a class="nav-link bi bi-tags" href="../products/products.php"> Products</a>
    
                        </li>
    
                        <li class="nav-item">
    
                            <a class="nav-link bi bi-truck" href="../shipments/shipments.php"> Shipments</a>
    
                        </li>
    
                    </ul>
    
                    <ul class="navbar-nav ms-auto">
    
                        <li class="nav-item dropdown">
    
                            <a class="nav-link dropdown-toggle bi bi-person-fill" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Account</a>
    
                            <ul class="dropdown-menu">
    
                                <li><a class="dropdown-item bi bi-box-arrow-in-left" href="../login/logout.php"> Logout</a></li>
    
                            </ul>
    
                        </li>
    
                    </ul>   
    
                </div>
    
            </div>
    
        </nav> 
    
        <!-- Breadcrumbs !-->
    
        <div class="card">
    
            <div class="card-header">
    
                <div class="row">
    
                    <div class="col-md-12">
    
                        <nav aria-label="breadcrumb">
    
                                <ol class="breadcrumb">
    
                                <li class="breadcrumb-item"><a href="../dashboard/dashboard.php">Dashboard</a></li>
    
                                <li class="breadcrumb-item active" aria-current="page">Orders</li>
    
                            </ol>
    
                        </nav>
    
                    </div>
    
                </div>
    
            </div>    
    
        </div>
    
        
    
        <!-- Main Page !-->
    
        <div class="card">
    
             <div class="card-header bi bi-pencil-square ">
    
                Manage Orders
    
            </div>
    
    
    
             <div class="card-body">
    
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
    
                    <button type="button" id="addordermodalbtn"class="btn btn-secondary bi bi-plus" data-bs-toggle="modal"  data-bs-target="#addordersmodel" type="button"> Add Order</button>
    
                </div>
    
            </div>
    
            <table id="manageordertable" class="table display" style="width:100%">
    
                <thead>
    
                    <tr>
    
                        <th>ID</th>
    
                        <th>Date</th>
    
                        <th>Contact</th>
    
                        <th>Items</th>
    
                        <th>Value</th>
    
                        <th>Payment Status</th>
    
                        <th>Status</th>
                    </tr>
    
                </thead>
    
    
    
            </table>
    
        </div>
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    Possibly this thread has the answer.

    You are loading the Bootstrap JS file after loading the Editor JS. Move line 33

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    

    to line 20 just before loading the Editor JS.

    Kevin

  • DarkNight9672DarkNight9672 Posts: 4Questions: 1Answers: 0

    Hey Kevin,

    That fixed it! Thank you so much for your help. It really means a lot. Thanks again.

Sign In or Register to comment.