search

tabalinas / jsgrid

Lightweight Grid jQuery Plugin
http://js-grid.com
MIT License
1.52k stars 352 forks source link

Can't update my json file when validate row #1012

Closed Legend23 closed 6 years ago

Legend23 commented 6 years ago

Hello, first of all thank you for this application.

I have a problem, i'm not familiar with js and i'm trying my best to code, and try to find what's wrong with my code.

I'm using the custom grid field scenario.

I have 5 columns with data, came from a json file on my web server.

image

For example I want to edit a cell like this:

image

And validate it. When I reload the page, the data still be the old data, and the json file still be the same without any change.

Here is my code: 

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="bootstrap/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/dist/css/boosted.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- For grid  -->

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="src/grid/css/jsgrid.css" />
    <link rel="stylesheet" type="text/css" href="src/grid/css/theme.css" />

    <style>
        .hasDatepicker {
            width: 100px;
            text-align: center;
        }

        .ui-datepicker * {
            font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
            font-size: 14px;
            font-weight: 300 !important;
        }
    </style>

  </head>

  <body>

        <header role="banner">
      <nav class="navbar navbar-dark bg-dark navbar-expand-md">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="bootstrap/dist/img/green_logo.svg" alt="Back to homepage" title="Back to homepage"/></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#green-navbar-collapse" aria-controls="green-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          <div class="navbar-collapse justify-content-between collapse" id="green-navbar-collapse">
            <ul class="navbar-nav" role="tablist">
              <li class="nav-item">
                <a class="nav-link" href="index.html" role="button">Home &nbsp;
                  <span class="glyphicon glyphicon-pencil" aria-hidden="true">
                  </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link svg-settings" href="phish.php" role="button">PhisAlert!</a>
              </li>
              <li class="nav-item">
                <a class="nav-link svg-settings" href="#" role="button">Pastebin</a>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li role="presentation" class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle active" data-toggle="dropdown" role="button">
                  <span class="svg-avatar" aria-hidden="true">
                  </span>hello
                  <span class="green">admin&nbsp;
                  </span>              </a>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li>
                  <a class="dropdown-item" href="#">logout</a>
              </li>
              <li>
              <a class="dropdown-item" href="#">my portal</a>
              </li>
            </ul>
            </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
      </nav>
    </header>
    <main id="content" class="container">

    <br><br>

    <h1>Last phising link.</h1>
    <div id="jsGrid"></div>

      <hr>
    </main>
    <!--/.container-->
    <footer role="contentinfo">
      <div class="container">
        <span>© green 2018
        </span>
        <span id="id-for-cdu-link" class="navbar-right">
        </span>
      </div>
    </footer>
    <!-- Bootstrap core JavaScript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="bootstrap/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="bootstrap/assets/js/vendor/popper.min.js"></script>
    <!-- Include all compiled plugins bootstrap, bootstrap accessibility plugin and boosted specific components (below), or include individual files as needed -->
<script src="bootstrap/dist/js/boosted.js"></script>
<script src="bootstrap/dist/js/vendor/jquery.tablesorter.js"></script>

<script type="text/javascript">
    // Surcharge des valeurs du script de la toolbar
    accessibilitytoolbar_custom={
      idSkipLinkIdLinkMode:"cdu-skiplink",
      cssSkipLinkClassName: "skiplinks-trigger",
      callback:skiplinksAfterLoad
    };
    $(".skiplinks-trigger").focus(function(){
      $(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
    });
    $(".skiplinks-trigger").blur(function(){
      $(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
    });
    function skiplinksAfterLoad(){
      $(".skiplinks-trigger").focus(function(){
        $(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
      });
      $(".skiplinks-trigger").blur(function(){
        $(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
      });
    }
  </script>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

    <script src="src/grid/demos/db.js"></script>
    <script src="src/grid/dist/jsgrid.js"></script>
    <script src="src/grid/src/jsgrid.core.js"></script>
    <script src="src/grid/src/jsgrid.load-indicator.js"></script>
    <script src="src/grid/src/jsgrid.load-strategies.js"></script>
    <script src="src/grid/src/jsgrid.sort-strategies.js"></script>
    <script src="src/grid/src/jsgrid.field.js"></script>
    <script src="src/grid/src/fields/jsgrid.field.text.js"></script>
    <script src="src/grid/src/fields/jsgrid.field.control.js"></script>
    <script src="src/grid/src/fields/jsgrid.field.select.js"></script>

    <script>
        $(function() {

            var MyDateField = function(config) {
                jsGrid.Field.call(this, config);
            };

            MyDateField.prototype = new jsGrid.Field({
                sorter: function(date1, date2) {
                    return new Date(date1) - new Date(date2);
                },

                itemTemplate: function(value) {
                    return new Date(value).toLocaleDateString();
                },

                insertTemplate: function(value) {
                    return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date()});
                },

                editTemplate: function(value) {
                    return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
                },

                insertValue: function() {
                    return this._insertPicker.datepicker("getDate").toISOString();
                },

                editValue: function() {
                    return this._editPicker.datepicker("getDate").toISOString();
                }
            });

            jsGrid.fields.myDateField = MyDateField;

$("#jsGrid").jsGrid({
                height: "auto",
                width: "100%",
                inserting: true,
                editing: true,
                sorting: true,
                filtering:false,
                paging: true,
                pageSize: 10,
                autoload: true,
                controller: {
                    loadData: function (filter) {
                     var data = $.Deferred();
                     $.ajax({
                       type: "GET",
                       contentType: "application/json; charset=utf-8",
                       url: "src/unverified.json",
                       dataType: "json"
                       }).done(function(response){
                         data.resolve(response);
                         console.log(response);
                     });
                      return data.promise();
                    }
                },
                fields: [
                    { name: "Name", type: "text", width: 150 },
                    { name: "State", type: "text"},
                    { name: "Processing", type: "text"},
                    { name: "Date", type: "myDateField", width: 100, align: "center" },
                    { name: "URL", type: "text", width: 100, align: "center" },
                    { type: "control", editButton: false, modeSwitchButton: false }
                ]
            });

        });
    </script>

    <!-- <script type="text/javascript" src="http://confort-plus.green.com/js/toolbar-min.js"></script> -->
  </body>
</html>

Thank you verry much for help

tabalinas commented 6 years ago

This happens because you don't handle data update. In the controller you have to define updateItem so that data updated on the server side. Use example projects as a reference implementation: http://js-grid.com/samples/