Newbie with different Questions about Localization and Editing in a popup

[nur_kurz_hier]

Hello,

out of necessity, as a newbie, I program a website with PQGrid and encounter some problems.

1.) Translation into German
I did this after the tutorial from the homepage and the controls are all still in English. You can handle it, but it would be a nice-to-have.
https://paramquery.com/demos/Localize

Code: [Select]

      // Initialisation
      var $grid = $("div#vormerkungen").pqGrid(obj);
      $.extend($.paramquery.pqGrid.defaults, $.paramquery.pqGrid.regional['de']);
      $.extend($.paramquery.pqPager.defaults, $.paramquery.pqPager.regional['de']);
2.) Edit the entries in a popup.
Also here I proceeded according to instructions and adapted it to my situation. Unfortunately without success, because here is the problem that he does not pass the data to the popup and I find no documentation about how this works best. Here I also look at similar products like jqgrid and try to get the solution via transfer, but always fail with different error messages.

Here a small snippet of my code. My problem is that I don't get any values with this snippet.

Code: [Select]

function editRow() {
          var rowIndx = getRowIndx();
          if (rowIndx != null) {

              var row = $grid.pqGrid('getRowData', rowIndx);

              var $frm = $("form#crud-form");
              $frm.find("input[name='artikelnr']").val(row["artikelnr"]);
              $frm.find("input[name='aufgabe']").val(row["aufgabe"]);
              $frm.find("input[name='prio']").val(row["prio"]);
....
Basically I have to say that I have never programmed JavaScript before and am rather the office programmer for emergency solutions (we call it "Insellösung" in German), not a programmer of flesh and blood.

I hope anybody can help me to understand. And a third question is, how I can debug this to solve myself.

[nur_kurz_hier]

Good morning,

the last question that I had, I have been solve myself by reading all topics here in forum with the keyword "getRowData". There I found a different between the tutorial and solution.

Tutorial and other subjects said:

Code: [Select]

$frm.find("input[name='artikelnr']").val(row[0]);
//or
$frm.find("input[name='artikelnr']").val(row["ArtikelNr"]);
The solution is:

Code: [Select]

$frm.find("input[name='artikelnr']").val(row.ArtikelNr);The field is a child attribute and not a part of an array.

Now only the question for the translation into german is open

[nur_kurz_hier]

I have a new question.

How I can save modified data from grid to database. I didn't find any idea in the internet or very specified to another programming language.

My complete code for edit a row is this:

Code: [Select]

      function editRow() {
          var rowIndx = getRowIndx();
          if (rowIndx != null) {

              var row = $grid.pqGrid('getRowData', { rowIndx: rowIndx });
              var aufgabeAlt = row.Aufgabe;

              var $frm = $("form#crud-form");
              $frm.find("input[name='artikelnr']").val(row.ArtikelNr);
              $frm.find("input[name='aufgabe']").val(row.Aufgabe);
              $frm.find("input[name='prio']").val(row.Prio);
              $frm.find("input[name='VFG']").val(row.VFG);

              $("#popup-dialog-crud").dialog({ title: "Vormerkung " + row.ArtikelNr + " bearbeiten", buttons: {
                  Update: function () {
                      //update row.
                      row = [];
                      row.ArtikelNr = $frm.find("input[name='artikelnr']").val();
                      row.Aufgabe = $frm.find("input[name='aufgabe']").val();
                      row.Prio = $frm.find("input[name='prio']").val();
                      row.VFG = $frm.find("input[name='vfg']").val();

                      // Umsetzung im Grid
                      $grid.pqGrid('updateRow', { rowIndx: rowIndx, row: row, checkEditable: false });



                      $(this).dialog("close");
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              }
              }).dialog("open");
          }
      }


[paramvir]

There are 2 ways:

1. Send complete data from grid as json data and save it in database.

2. Send changed / deleted/ added data as json data and update database. (recommended )

Second approach is shown in the editing examples.

[nur_kurz_hier]

Good morning,

thank your very much. Did you mean "batch editing" with the buttons in toolbar?
Please can you give the url, so I can try to understand and implement in my tool.

[nur_kurz_hier]

Sorry for that stupid question, but the API documentation is up to date or the examples was built with this version of API?

I compare both and found mistakes, because I must double check this for my error message.

Code: [Select]

Error message: jquery.min.js:4 Uncaught Error: no such method 'getInstance' for pqGrid widget instance
In the example was used ...getInstance... to spoke with the grid, but in den API documentation you don't find this method.

[paramvir]

Batch editing example url: https://paramquery.com/demos/editing_batch

API for getInstance

https://paramquery.com/api#method-getInstance

[nur_kurz_hier]

Again thank you, but it don't work!

In my code to edit the grid I have been integrate the function to save the edited values to db.

My function saveChanges()

Code: [Select]

      function saveChanges() {

        var grid = $( ".selector" ).pqGrid( "getInstance" ).grid;
        var changes = $( ".selector" ).pqGrid('getChanges');

        $.ajax({
                dataType: "json",
                type: "POST",
                async: true,
                beforeSend: function (jqXHR, settings) {
                    $( ".selector" ).pqGrid( "showLoading" );
                },
                url: "Vormerkungen_Grid_Speichern.php",
                data: { list: JSON.stringify(changes) },
                success: function (changes) {
                    //grid.commit({ type: 'add', rows: changes.addList });
                    grid.commit({ type: 'update', rows: changes.updateList });
                    //grid.commit({ type: 'delete', rows: changes.deleteList });

                    //grid.history({ method: 'reset' });
                },
                complete: function () {
                    $( ".selector" ).pqGrid( "hideLoading" );
                }
              })

      };
And my file to execute the Update-Statement

Code: [Select]

<?php
// https://paramquery.com/demos/editing_batch

// Datei dient nur zum Speichen von Veränderungen im Grid
require ('./system_connector_mysql.php');

$artikelnr = $_POST['ArtikelNr'];
$aufgabe = $_POST['Aufgabe'];
$prio = $_POST['Prio'];

console_log $_POST['ArtikelNr'];
console_log $_POST['Aufgabe'];
console_log $_POST['Prio'];

$query = "UPDATE tab_vormerkungen SET Aufgabe = '$aufgabe', Prio=$prio WHERE ArtikelNr=$artikelnr";
mysql_query($query) OR ('Vormerkungen_Speichern.php - Zeile 13 |' . mysql_error());

?>


I don`t see anything in the console as well in db. What ist wrong?

[nur_kurz_hier]

Sorry but it doesn't work. In my opinion, the documentation is not so easy (for me to understand).

[nur_kurz_hier]

After a while I have solved the problem with saving in db and I would like to share to other to stay not for the same problem:

=> main file

Code: [Select]

        var row = $grid.pqGrid('getRowData', { rowIndx: getRowIndx() })

        artikel = row.ArtikelNr;
        aufgabeAlt = row.Aufgabe;

        if (typeof a2 !== 'undefined'){
          aufgabeNeu = a2;
        } else {
          aufgabeNeu = row.Aufgabe;
        }

        if (typeof a3 !== 'undefined'){
          prioritaet = a3;
        } else {
          prioritaet = row.Prio;
        }

        $.ajax({
          url: 'Vormerkungen_Grid_Speichern.php',
          data: {'ArtikelNr': artikel, 'AufgabeAlt': aufgabeAlt, 'AufgabeNeu': aufgabeNeu, 'Prio': prioritaet},
          dataType: 'JSON',
          type: 'GET',
          contentType: false,
          success: function(output) {
            $grid.pqGrid.trigger("reloadGrid");
          }
        });


Code: [Select]

<?php

// Datei dient nur zum Speichen von Veränderungen im Grid
require ('./system_connector_mysql.php');

if(isset($_GET['ArtikelNr'])){
$artikelnr = $_GET['ArtikelNr'];
$aufgabe = $_GET['AufgabeNeu'];
$prio = $_GET['Prio'];

$query = "UPDATE tab_vormerkungen SET Aufgabe = '$aufgabe', Prio=$prio WHERE ArtikelNr=$artikelnr";
mysql_query($query) OR ('Vormerkungen_Speichern.php - Zeile 13 |' . mysql_error());

}

else {
echo 'no data here';
}

?>


I hope this is helpful