0

First of all sorry for my bad English

<!DOCTYPE html>
<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">
        <title>Manage News</title>
        <!-- Bootstrap CSS-->
        <link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css">
        <style>
                @-webkit-viewport { width: device-width; }
                @-moz-viewport { width: device-width; }
                @-ms-viewport { width: device-width; }
                @-o-viewport { width: device-width; }
                @viewport { width: device-width; }
                body { padding-top: 70px; }

                .column .text { color: #f00 !important; }
            .    cell { font-weight: bold; }
            </style>


  </head>
  <body style="margin:16px; padding:16px">

    <!--define the table using the proper table tags, leaving the tbody tag empty -->
        <table id="grid-data" class="table table-bordered table-condensed table-hover table-striped" data-toggle="bootgrid" data-ajax="true" data-url="server.php">
        <thead>
            <tr>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false" data-align="center" data-header-align="center">أوامر</th>
                <th data-column-id="da" data-align="center" data-header-align="center">التاريخ</th>
                <th data-column-id="ne" data-align="center" data-header-align="center">الخبر</th>
                <th data-column-id="ti" data-align="center" data-header-align="center">العنوان</th>
                <th data-column-id="id" data-type="numeric" data-identifier="true" data-align="center" data-header-align="center">رقم الخبر</th>    
            </tr>
        </thead>    
</table>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- Include bootgrid plugin (below), -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.js"></script>  


  <!-- now write the script specific for this grid -->
    <script>

            $("#grid-data").bootgrid({
                ajax: true,
                post: function ()
                {
                    return {
                        id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
                    };
                },
                url: "server.php",
            }).on("loaded.rs.jquery.bootgrid", function()
            {
                 alert("12");
                /* Executes after data is loaded and rendered */
                grid.find(".command-delete").on("click", function(e)
                {
                    alert("You pressed delete on row: " + $(this).data("row-id"));
                });
            });
        </script>

    </body>
</html>

It should view data from mysql which is done without any problems but when i tried to add commands that contain a delete button nothing appear please help I lost many hours searching on the internet for any logic reason !!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user3806961
  • 5
  • 1
  • 2

1 Answers1

0

I'm also trying to get the commands working, so far I have the following js code that does display the buttons, but not the alerts on click yet:

<script language="javascript">
// bootgrid
    function init()
    {
        $("#grid").bootgrid({
            formatters: {
                "commands": function(column, row)
                {
                    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
                }
            },
            rowCount: [-1, 10, 50, 75]
        }).on("loaded.rs.jquery.bootgrid", function()
        {
            /* Executes after data is loaded and rendered */
            grid.find(".command-edit").on("click", function(e)
            {
                alert("You pressed edit on row: " + $(this).data("row-id"));
            }).end().find(".command-delete").on("click", function(e)
            {
                alert("You pressed delete on row: " + $(this).data("row-id"));
            });
        });
    }

    init();
});

It's the commands function in the formatters that returns the buttons.

Nick W
  • 877
  • 2
  • 15
  • 30