Génération de code Jquery en PHP (liste sortable)

**MeHo_** · 06/08/2010, 09h50

Bonjour,

J'ai une question sur le chargement d'une page. Dans quelle ordre la page se charge t elle ? ligne par ligne ? D'abord les données du head ? Le HTML ? Le PHP ?

Mon soucis est que je génère dynamiquement (en PHP) du code JS pour des listes à puces "imbriquées" censées être sortables et certaines listes ne le sont pas alors que le code est correcte (je suppose). Seule la première liste est sortable alors que les autres listes sont générées de la même manière.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<?php
  require_once( dirname(__FILE__).'/../config.php' );
  require_once( dirname(__FILE__).'/../includes/connexion_bdd.inc.php' );
  require_once( dirname(__FILE__).'/../modeles/fm_modifier.php' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>sortable multiliste.html</title>
    <link rel="stylesheet" href="../css/jquery-ui-1.8.2.custom.redmond.css" type="text/css" />
    <script type="text/javascript" src="../javascript/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../javascript/fonctions.inc.js"></script>
    <script type="text/javascript" src="../javascript/jquery-ui-1.8.custom.min.js"></script>
<?php
  echo chargementRubriqueJsCss();
?>    
    <script type="text/javascript">
      var increment = 0;
 
      // suivant : prend la valeur true ou false -> false si le xml renvoi rien (element le plus bas ds une fiche métier : misison/resultat/competence)
      function ajoute( id_ru, rang_ru, intitule_ru, rang_ru_prec, id_puce_append, derniere_rub )
      {
        increment++;
        if( derniere_rub == false )
        {
          var output = '<li class="ui-state-default">'
                  +'<div>'
                    +'<input type="text" name="ligne[]" value="new" />'
                    +'<div style="float: right; border: 1px solid red; ">'
                      +'<a href="javascript: void(0);" onClick="rubriqueSuivante('+rang_ru+', '+increment+');">'
                        +'Ajouter '+ intitule_ru + ' '
                      +'</a>'
                    +'</div>'
                    +'<ul id="puce'+increment+'" class="rubrique' + rang_ru +'">'
                    +'</ul>'                
                  +'</div>'
                +'</li>';
        }
        else
        {
          var output = '<li class="ui-state-default">'
                  +'<div>'
                    +'<input type="text" name="ligne[]" value="new" />'
                  +'</div>'
                +'</li>';
        }
 
        $('#puce'+id_puce_append).append(output);
      }
 
      function rubriqueSuivante( rang_rub, increment )
      {
        $(document).ready(function()
        {
          $.ajax({
            type:  'POST',
            url:  '../controleurs/rub_load_suivant.php',
            async:  true,
            data:  'rang_rub=' + rang_rub,
            success: function( xml )
            {
              if( $(xml).find('une_rubrique').size() > 0)
              {
                $(xml).find('une_rubrique').each(function() {
                  var id_ru     = $(this).find('id_ru').text();
                  var intitule_ru  = $(this).find('intitule_ru').text();
                  var rang_ru    = $(this).find('rang_ru').text();
 
                  ajoute( id_ru, rang_ru, intitule_ru, rang_rub, increment, false );
                });
              }
              else
              {
                ajoute( null, null, null, null, increment, true );
              }              
            }
          });
        });
      }
 
 
    </script>
  </head>
  <body>
    <div class="demo">
<?php
  echo chargementPremiereRubrique();
?>
    </div>
  </body>
</html>

Le code du fichier qu'on appelle en Ajax :

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
 
<?php
        header( "Content-Type: text/xml" ); 
        echo '<?xml version="1.0"?>';
        echo '<rubriques>';
 
        if( !empty( $_POST[ 'rang_rub' ] ) )
        {
                require_once( dirname(__FILE__) . '/../config.php' );
                require_once( dirname(__FILE__) . '/../'.$path[ 'modele' ].'/fm_modifier.php' );
                echo chargementRubriqueSuivanteXML( $_POST[ 'rang_rub' ] );
        }
 
        echo '</rubriques>';
?>

et les fonctions php :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
<?php
  function chargementPremiereRubrique()
  {
    global $table;
    $lien = connexion_a_la_bdd( 1 );
    $output = null;
    
    $req = 'SELECT * '
        .'FROM '.$table[ 'rub' ].' '
        .'WHERE actif_ru = 1 '
        .'ORDER BY rang_ru ASC '
        .'LIMIT 1';
 
    $resu = mysql_query( $req, $lien[ 0 ] ) or die( "Erreur dans la requ&ecirc;te d'affichage de la fiche métier : $id_fiche_metier<br />".mysql_error()."<br />".$req );
    
    while( $ligne = mysql_fetch_object( $resu ) )
    {
      $output .= '<div id="fiche_metier">';
      $output .= '  <div style="float: right; border: 1px solid red; ">';
      $output .= '    <a href="javascript: void(0);" onClick="rubriqueSuivante('.$ligne->rang_ru.', 0);">Ajouter : '.$ligne->intitule_ru.'</a>';
      $output .= '  </div>';
      $output .= '  <ul id="puce0" class="rubrique'.$ligne->rang_ru.'">';      
      $output .= '  </ul>';
      $output .= '</div>';
    }
    mysql_free_result( $resu );
    deconnexion_de_la_bdd( $lien );
 
    return $output;
  }
  
  
  function chargementRubriqueSuivanteXML( $rang = 0 )
  {
    global $table;
    $lien = connexion_a_la_bdd( 1 );
    $output = null;
    
    $req = 'SELECT * '
        .'FROM '.$table[ 'rub' ].' '
        .'WHERE rang_ru > '.$rang.' '
        .'  AND actif_ru = 1 '
        .'ORDER BY rang_ru ASC '
        .'LIMIT 1';
 
    $resu = mysql_query( $req, $lien[ 0 ] ) or die( "Erreur dans la requ&ecirc;te d'affichage de la fiche métier : $id_fiche_metier<br />".mysql_error()."<br />".$req );
    
    while( $ligne = mysql_fetch_object( $resu ) )
    {
      $output .= '<une_rubrique>';
      $output .= '  <id_ru>'.$ligne->id_ru.'</id_ru>';
      $output .= '  <intitule_ru>'.utf8_encode( $ligne->intitule_ru ).'</intitule_ru>';
      $output .= '  <rang_ru>'.$ligne->rang_ru.'</rang_ru>';
      $output .= '</une_rubrique>';
    }
    mysql_free_result( $resu );
    deconnexion_de_la_bdd( $lien );
 
    return $output;
  }
  
  
  function chargementRubriqueJsCss()
  {
    global $table;
    $lien = connexion_a_la_bdd( 1 );
    
    $outputCss = null;
    $outputJS = null;
    
    $lesRub = null;
    $lesRub2 = null;
    
    $req = 'SELECT * '
        .'FROM '.$table[ 'rub' ].' '
        .'WHERE actif_ru = 1 '
        .'ORDER BY rang_ru ASC;';
    
    $resu = mysql_query( $req, $lien[ 0 ] ) or die( "Erreur dans la requ&ecirc;te d'affichage de la fiche métier : $id_fiche_metier<br />".mysql_error()."<br />".$req );
    
    $i = 1;
    
    $outputCss .= '<style type="text/css">';
    $outputJS .= '<script type="text/javascript"> $(function(){ ';
    while( $ligne = mysql_fetch_object( $resu ) )
    {
      $lesRub .= '.rubrique'.$ligne->rang_ru.', ';
      $lesRub2 .= '.rubrique'.$ligne->rang_ru.' li, ';
      
      $outputJS .= "$('.rubrique".$ligne->rang_ru."').sortable({ connectWith: '.rubrique".$ligne->rang_ru."', zIndex: ".$i++."}); ";
    }
    $outputCss .=     substr( $lesRub, 0, -2 ).' { list-style-type: none; margin: 0; padding: 10px; zoom: 1; } ';
    $outputCss .=     substr( $lesRub2, 0, -2 ).' { margin: 5px; padding: 3px; width: 90%; } ';
    $outputCss .= '    #fiche_metier{ list-style-type: none;  margin: 0; width: 600px; border: 1px solid black; padding: 5px; height: 30px;}';
    $outputCss .= '</style>';
    
    $outputJS .= '    $(\''.substr( $lesRub, 0, -2 ).'\').sortable(\'refresh\'); ';
    $outputJS .= '    $(\''.substr( $lesRub, 0, -2 ).'\').sortable({ axis: \'y\', placeholder: \'ui-state-highlight\', tolerance: \'pointer\', cursor: \'pointer\' }); ';
    $outputJS .= ' }); </script>';
      
    mysql_free_result( $resu );
    deconnexion_de_la_bdd( $lien );
 
    return $outputCss.$outputJS;
  }
?>

Si quelqu'un peut me dire pourquoi les listes générées ne sont pas sortable ce serait cool parce que là je ne vois pas ?!

Cordialement !

**llaffont** · 06/08/2010, 16h21

Essaye de déclarer tes événements après ton Succès et non dans ton PHP.
Car je suis pas sur que le Moteur Javascript prenne en compte du code injecté.

Pourquoi les événements disparaissent après une mise à jour avec AJAX ?

J'ai modifié ton code

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<?php
  require_once( dirname(__FILE__).'/../config.php' );
  require_once( dirname(__FILE__).'/../includes/connexion_bdd.inc.php' );
  require_once( dirname(__FILE__).'/../modeles/fm_modifier.php' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>sortable multiliste.html</title>
    <link rel="stylesheet" href="../css/jquery-ui-1.8.2.custom.redmond.css" type="text/css" />
    <script type="text/javascript" src="../javascript/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../javascript/fonctions.inc.js"></script>
    <script type="text/javascript" src="../javascript/jquery-ui-1.8.custom.min.js"></script>
<?php
  echo chargementRubriqueJsCss();
?>    
    <script type="text/javascript">
      var increment = 0;
 
      // suivant : prend la valeur true ou false -> false si le xml renvoi rien (element le plus bas ds une fiche métier : misison/resultat/competence)
      function ajoute( id_ru, rang_ru, intitule_ru, rang_ru_prec, id_puce_append, derniere_rub )
      {
        increment++;
        if( derniere_rub == false )
        {
          var output = '<li class="ui-state-default">'
                  +'<div>'
                    +'<input type="text" name="ligne[]" value="new" />'
                    +'<div style="float: right; border: 1px solid red; ">'
                      +'<a href="javascript: void(0);" onClick="rubriqueSuivante('+rang_ru+', '+increment+');">'
                        +'Ajouter '+ intitule_ru + ' '
                      +'</a>'
                    +'</div>'
                    +'<ul id="puce'+increment+'" class="rubrique' + rang_ru +'">'
                    +'</ul>'                
                  +'</div>'
                +'</li>';
        }
        else
        {
          var output = '<li class="ui-state-default">'
                  +'<div>'
                    +'<input type="text" name="ligne[]" value="new" />'
                  +'</div>'
                +'</li>';
        }
 
        $('#puce'+id_puce_append).append(output);
      }
 
      function rubriqueSuivante( rang_rub, increment )
      {
        $(document).ready(function()
        {
          $.ajax({
            type:  'POST',
            url:  '../controleurs/rub_load_suivant.php',
            async:  true,
            data:  'rang_rub=' + rang_rub,
            success: function( xml )
            {
              if( $(xml).find('une_rubrique').size() > 0)
              {
                $(xml).find('une_rubrique').each(function() {
                  var id_ru     = $(this).find('id_ru').text();
                  var intitule_ru  = $(this).find('intitule_ru').text();
                  var rang_ru    = $(this).find('rang_ru').text();
 
                  ajoute( id_ru, rang_ru, intitule_ru, rang_rub, increment, false );
                });
              }
              else
              {
                ajoute( null, null, null, null, increment, true );
              }
 
			$('.rubrique'+rang_ru+'').sortable({ connectWith: .rubrique'+rang_ru+', zIndex: "10"});
			$('.rubrique'+rang_ru+'').sortable('refresh');
			$('.rubrique'+rang_ru+'').sortable({ axis: 'y', placeholder: 'ui-state-highlight', tolerance: 'pointer', cursor: 'pointer'});
 
            }
          });
        });
      }	   
 
    </script>
  </head>
  <body>
    <div class="demo">
<?php
  echo chargementPremiereRubrique();
?>
    </div>
  </body>
</html>

**MeHo_** · 08/08/2010, 18h29

Merci beaucoup ça marche nickel

Génération de code Jquery en PHP (liste sortable)

jQuery

Vue hybride

Discussions similaires

Partager

Partager