BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - Probleme JQXgrid sur OE
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Probleme JQXgrid sur OE

 Répondre Répondre Page  123>
Auteur
Message
Inkospor allez vers le bas
Newbie
Newbie


Depuis le: 18 Mai 2016
Pays: Suisse
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Inkospor Citer  RépondreRéponse Lien Direct à ce Post Sujet: Probleme JQXgrid sur OE
    Envoyé : 27 Mai 2016 à 22:50
Bonjour à tous,

J'avance gentiment dans la conception de mon site web. Je souhaiterai maintenant donner à l'utilisateur la possibilité de pouvoir modifier et supprimer des informations d'une table SQL. Après plusieurs jours d'essai, j'ai enfin réussi à corriger mon code afin que plus aucun message d'erreur n'apparaissent.

Par contre, je ne comprends pas, hormis les 3 boutons "Ajout, modifier et supprimer" rien ne s'affiche sur ma page. J'ai utiliser le tuto suivant: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm.

Si quelqu'un aurait la gentillesse d'éclairer ma lanterne, ce serait super! Merci d'avance.

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm

Voici mon code:

Script connection SQL

$hostname = "localhost";
$database = "XXXXXXX";
$username = "root";
$password = "";

$mysqli = new mysqli($hostname, $username, $password, $database);

/* check connection */
if (mysqli_connect_errno())
 {
 printf("Connect failed: %s\n", mysqli_connect_error());
 exit();
 }

// get data and store in a json array
 $user = ($_SESSION['oelog01_UserID']);

// get data and store in a json array

$query = "SELECT idcharge, naturecharge, fournisseurcharge, facturecharge, datecharge, prixcharge, iduser FROM oe_charges_exploitation WHERE iduser = $user";

if (isset($_GET['insert']))

 {

 // INSERT COMMAND

 $query = "INSERT INTO `oe_charges_exploitation`(`naturecharge`, `fournisseurcharge`, `facturecharge`, `datecharge`, `prixcharge`, `iduser`) VALUES (?,?,?,?,?,?)";

 $result = $mysqli->prepare($query);

 $result->bind_param('sssssss', $_GET['naturecharge'], $_GET['fournisseurcharge'], $_GET['facturecharge'], $_GET['datecharge'], $_GET['prixcharge'], $_GET['$user']);

 $res = $result->execute() or trigger_error($result->error, E_USER_ERROR);

 // printf ("New Record has id %d.\n", $mysqli->insert_id);

 echo $res;

 }

  else if (isset($_GET['update']))

 {

 // UPDATE COMMAND

 $query = "UPDATE `oe_charges_exploitation` SET `naturecharge`=?, `fournisseurcharge`=?, `facturecharge`=?, `datecharge`=?, `prixcharge`=?, `iduser`=? WHERE `idcharge`=?";

 $result = $mysqli->prepare($query);

 $result->bind_param('sssssssi', $_GET['naturecharge'], $_GET['fournisseurcharge'], $_GET['facturecharge'], $_GET['datecharge'], $_GET['prixcharge'], $_GET['idcharge'], $_GET['$user']);

 $res = $result->execute() or trigger_error($result->error, E_USER_ERROR);

 // printf ("Updated Record has id %d.\n", $_GET['EmployeeID']);

 echo $res;

 }

  else if (isset($_GET['delete']))

 {

 // DELETE COMMAND

 $query = "DELETE FROM oe_charges_exploitation WHERE idcharge=?";

 $result = $mysqli->prepare($query);

 $result->bind_param('i', $_GET['idcharge']);

 $res = $result->execute() or trigger_error($result->error, E_USER_ERROR);

 // printf ("Deleted Record has id %d.\n", $_GET['EmployeeID']);

 echo $res;

 }

  else

 {

 // SELECT COMMAND

 $result = $mysqli->prepare($query);

 $result->execute();

 /* bind result variables */

 $result->bind_result($ChargeID, $Nature, $Fournisseur, $Facture, $Date, $Prix, $iuser);

 /* fetch values */

 while ($result->fetch())

  {

  $charges[] = array(

   'idcharge' => $ChargeID,

   'naturecharge' => $Nature,

   'fournisseurcharge' => $Fournisseur,

   'facturecharge' => $Facture,

   'datecharge' => $Date,

   'prixcharge' => $Prix,
   
   'iduser' => $iuser

  );

  }

 echo json_encode($charges);

 }

$result->close();

$mysqli->close();

/* close connection */


Script affichage/Json:

<link rel="stylesheet" href=".Files/js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href=".Files/js/jqwidgets/styles/jqx.classic.css" type="text/css" />

<script type="text/javascript" src=".Files/js/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src=".Files/js/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript">
 
<script type="text/javascript">
$(document).ready(function ()
{   
// prepare the data   

var source ={       
datatype: "json",       
datafields: [{ name: 'naturecharge' },{ name: 'fournisseurcharge' },{ name: 'facturecharge' },{ name: 'datecharge' },{ name: 'prixcharge' },],       
url: 'Testphp.php'
};   
$("#jqxgrid").jqxGrid({       
source: source,       
theme: 'classic',       
columns: [{ text: 'naturecharge', datafield: 'naturecharge', width: 250 },{ text: 'fournisseurcharge', datafield: 'fournisseurcharge', width: 150 },{ text: 'facturecharge', datafield: 'facturecharge', width: 180 },{ text: 'datecharge', datafield: 'datecharge', width: 200 },{ text: 'prixcharge', datafield: 'prixcharge', width: 120 }]   
});
});
            var source =
    {   
     datatype: "json", 
     cache: false,   
     datafields: [
      { name: 'idcharge'},
      { name: 'naturecharge'},  
      { name: 'fournisseurcharge'},  
      { name: 'facturecharge'},  
      { name: 'datecharge'},  
      { name: 'prixcharge'} 

     ],
     id: 'idcharge',
     url: 'Testphp.php',
     addrow: function (rowid, rowdata, position, commit) {   
      
// synchronize with the server - send insert command 
   var data = "insert=true&amp;" + $.param(rowdata);  
      $.ajax({           
       dataType: 'json',           
       url: 'Testphp.php',           
       data: data,   
       cache: false,           
       success: function (data, status, xhr) {    
        // insert command is executed.    
        commit(true);   
       },   
       error: function(jqXHR, textStatus, errorThrown)   
       {    
        commit(false);   
       }  
      });       
     },
     deleterow: function (rowid, commit) {   
      // synchronize with the server - send delete command       
     var data = "delete=true&amp;" + $.param({idcharge: rowid});  
      $.ajax({           
       dataType: 'json',           
       url: 'Testphp.php',   
       cache: false,           
       data: data,           
       success: function (data, status, xhr) {    
        // delete command is executed.    
       commit(true);   
       },   
       error: function(jqXHR, textStatus, errorThrown)   
       {    
        commit(false);   
       }  
      });       
     },
     updaterow: function (rowid, rowdata, commit) { 
      // synchronize with the server - send update command       
      var data = "update=true&amp;" + $.param(rowdata);   
      $.ajax({           
       dataType: 'json',           
       url: 'Testphp.php',   
       cache: false,           
       data: data,           
       success: function (data, status, xhr) {    
        // update command is executed.    
        commit(true);   
       },   
       error: function(jqXHR, textStatus, errorThrown)   
       {    
        commit(false);   
       }         
      });  
     }};
 
           var dataAdapter = new $.jqx.dataAdapter(source);
 // initialize jqxGrid
 $("#jqxgrid").jqxGrid(
  {   
   width: 500,   
   height: 350,   
   source: dataAdapter,   
   theme: theme,   
   columns: [           
       { text: 'Nature de la charge', datafield: 'naturecharge', width: 100 },           
    { text: 'Fournisseur', datafield: 'fournisseurcharge', width: 100 },           
    { text: 'Numero de facture', datafield: 'facturecharge', width: 180 },           
    { text: 'Date achat', datafield: 'datecharge', width: 180 },           
    { text: 'Prix TTC', datafield: 'prixcharge', width: 100 }                  
   ]
  });

 $("#addrowbutton").jqxButton({ theme: theme });
 $("#deleterowbutton").jqxButton({ theme: theme });
 $("#updaterowbutton").jqxButton({ theme: theme });
 
 // update row.
 $("#updaterowbutton").bind('click', function ()           {   
  var datarow = generaterow();   
  var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');   
  var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;   
  if (selectedrowindex >= 0 && selectedrowindex < rowscount) {       
   var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);       
   $("#jqxgrid").jqxGrid('updaterow', id, datarow);    }});
 
 // create new row.
 $("#addrowbutton").bind('click', function () {   
  var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;   
  var datarow = generaterow(rowscount + 1);  
  $("#jqxgrid").jqxGrid('addrow', null, datarow);});
 
 // delete row.
 $("#deleterowbutton").bind('click', function () {   
  var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');   
  var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;   
  if (selectedrowindex >= 0 && selectedrowindex < rowscount) {       
   var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);       
   $("#jqxgrid").jqxGrid('deleterow', id);   
  }
 });

</script>


<body class='default'>

    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: center;">

        <div style="float: center;" id="jqxgrid">

        </div>

        <div style="margin-left: 30px; float: left;">

            <div>

                <input id="addrowbutton" type="button" value="Add New Row" />

            </div>

            <div style="margin-top: 10px;">

                <input id="deleterowbutton" type="button" value="Delete Selected Row" />

            </div>

            <div style="margin-top: 10px;">

                <input id="updaterowbutton" type="button" value="Update Selected Row" />

            </div>

        </div>

    </div>

</body>

Très bonne soirée.

JORDAN M.
Haut de la page
Inkospor allez vers le bas
Newbie
Newbie


Depuis le: 18 Mai 2016
Pays: Suisse
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Inkospor Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 10:19
Les erreurs que j'avais au début étaient des erreurs SQL, je les ai corrigée comme indiqué dans mon précédent message. Par contre concernant l'affichage du tableau, je ne comprends pas du tout la problématique. Pensez-vous qu'il s'agisse d'un problème d'appel de fonction ou de positionnement de mon code dans la page?

Meilleurs salutations.
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 10:29
Bonjour, 
Sans ce pencher sur le code, il y a des choses qui pique :  2 body dans une page c'est pas possible !
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
Inkospor allez vers le bas
Newbie
Newbie


Depuis le: 18 Mai 2016
Pays: Suisse
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Inkospor Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 10:43
Salut MicroVinc.

Merci pour ta réponse. Cette erreur m'avait effectivement échappée malgré les nombreuses relecture. Ceci a été changé mais rien n'y change.

J'ai suivi le tutoriel dont j'ai mis le lien en l'adaptant à mes besoins et je suppose que je place mal mes éléments dans ma page ou que j'ai commis d'autres erreurs. D'autres avis ou aides me seraient fort appréciable svp?

Très bonne journée.

JORDAN M.
Haut de la page
Inkospor allez vers le bas
Newbie
Newbie


Depuis le: 18 Mai 2016
Pays: Suisse
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Inkospor Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 10:59
Bon j'avais des problème de chemin d'accès au fichier css et script (vu les erreurs avec l'outil developer tool avec la touche F12)

Il me transmet encore une erreur qui je pense bloque tout le processus:

SCRIPT5007: Impossible d’obtenir la propriété  « dataAdapter » d’une référence null ou non définie

Ayant copier le tuto ,je ne comprends pas trop cette erreur.
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 11:13
L'erreur vient de la ligne

var dataAdapter = new $.jqx.dataAdapter(source);

Apparemment le module/plugin/script JQX n'est pas correctement inclus, ou n'est pas encore inclus a ce moment (on peut mettre eventuellement tout le code JavaScript dans

$(function(){
....
});

pour qu'il demarre seulement apres le chargement de la structure de la page.
Haut de la page
Inkospor allez vers le bas
Newbie
Newbie


Depuis le: 18 Mai 2016
Pays: Suisse
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Inkospor Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 11:21
Bonne nouvelle, erreurs corrigées sur le developper tool (problème de parenthèse) mais toujours aucune donnée d'affichée. Vraiment étrange.
Haut de la page
Inkospor allez vers le bas
Newbie
Newbie


Depuis le: 18 Mai 2016
Pays: Suisse
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Inkospor Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 11:23
Merci Dmit, j'ai vu ton message après correction erreur. Effectivement, le fait d'avoir inclus le tout dans

$(function(){
....
});

ne m'affiche plus l'erreur. Par contre, toujours page blanche à l'écran.
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 13:13
Vous avez passé la page en PHP (menu Page->Scripts Serveur)? Pouvez-vous faire Export dans dossier, renommer le fichier de la page pour qu'il finisse par ".txt", publiez en ligne quelque part et donnez le lien.

Aussi, je conseille d'ajouter des "echo" dans le code PHP pour voir ce qu'il fait, et/o uenlever les commentaires sur les "printf".
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Mai 2016 à 13:54
Il y a aussi peut-être jquery qui rentre en conflit avec jquery d'OE :

<script type="text/javascript" src=".Files/js/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
 Répondre Répondre Page  123>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.