Discussion :

[defacta]

Bonjour,

J'utilise aujourd'hui un système de mise à jour dynamique de la page avec une iframe. Ce système fonctionne bien mais j'aimerai le faire évoluer vers l'Ajax.

Aujourd'hui, j'ai un iframe caché dans laquelle j'envoie soit un formulaire soit un lien avec des variables. Puis à partir de cette iframe, je change le contenu de la page principale comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
parent.$("#BtPeriod").html("Mise à jour du contenu d'un <button>...");
//Mise à jour d'une variable Javascript en fonction de données récupérées en base
parent.allAccounts = null;
parent.allAccounts = [ 
            { y: "2015-09", accounts: 813 },
            { y: "2015-10", accounts: 441 },
            { y: "2015-11", accounts: 839 },
            { y: "2015-12", accounts: 764 }
 ];
//Appel d'une fonction de la page principale
parent._allAccountsChart();

Pour le modifier en Ajax, je pensais passer par la méthode jquery $.ajax même si je dois changer un lien vers une iframe cachée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
        var values = {
            "period": "currentmonth"
        };
        $.ajax({
          url: "/pages/adminhome/ajax/ajax_update_charts.php",
          type: "POST",
          data: values,
           success: function(data){
            alert("success" + data);
          }
        });

Le alert m'affiche "success" et les contenu du fichier .php mais ne les exécutent pas. J'ai vu qu'il y a aussi la méthode getScript mais cela ne convient pas, le javascript est généré en php en fonction de contenu dans la base de données.

Comment je peux faire ?

Merci,
Vincent.

[defacta]

En définitive, j'y suis arrivé. J'ai utilisé dataTypes: "script" pour ne pas avoir à traiter du JSON et le reformater dans le DOM.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var values = { "period": "currentmonth"};
$.ajax({
  url: "pages/adminhome/ajax/ajax_update_charts.php",
  type: "POST",
  dataType: "script",
  data: values,
  error: function(exception) { console.log(exception); }
});

Et le résultat du fichier ajax_update_charts.php donne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#BtPeriod").html("<i class='fa fa-area-chart'></i><span class='pad-20'>Le mois courant</span><span class='caret'></span>");
allAccounts = null;
allAccounts = [
            { y: "2016-10-01", accounts: 923 },
            { y: "2016-10-02", accounts: 963 },
            { y: "2016-10-03", accounts: 283 },
            { y: "2016-10-04", accounts: 563 },
            { y: "2016-10-05", accounts: 1001 },
            { y: "2016-10-06", accounts: 335 },
            { y: "2016-10-07", accounts: 97 },
            { y: "2016-10-08", accounts: 518 },
            { y: "2016-10-09", accounts: 221 },
            { y: "2016-10-10", accounts: 21 }
 ];
_allAccountsChart();

Ça marche très bien, c'est bien plus rapide que de charger une iframe. Par contre, c'est pas facile de débugger. Si jamais il y a une erreur php, je ne sais pas comment la voir. Avec l'iframe caché, il me suffisait de l'afficher pour voir les erreurs PHP.
Et pour les erreurs JavaScript non plus ce n'est pas facile de débugger. En cas d'erreur il n'y a pas de message dans la console Firefox ou Chrome.

Vous faites comment pour débugger de l'Ajax ?

Merci,
Vincent.