UI Dialog. J'aimerais utiliser cette boîte de dialogue pour afficher une facture

**skins** · 11/06/2011, 12h03

Bonjour
Je suis face à une problématique qui nécessite a mon avis plusieurs Post.

Bon voilà, j'aimerais utiliser les boites de dialogue comme celle de ce site
qui affichera une facture.

Est ce possible ?

Merci d'avance pour votre aide

Invité · 11/06/2011, 12h16

Salut,

Je ne saisis pas vraiment le problème . Il te suffit d'appeler jQuery & jQueryUI dans le head, puis :

Code :

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

1
2
3
4
5
6
<div id="facture">Contenu de la facture</div>
<script>
   $(function() {
      $( "#facture" ).dialog();
   });
</script>

**skins** · 11/06/2011, 12h48

Merci charly-b pour votre réponse, cela me réconforte le faite que vous dites qu'il n y a pas de problème

néanmoins j'aurais besoin d'un coup de main supplémentaire, pour l’intégration de jQuery & jQueryUI.

Merci d'avance

Invité · 11/06/2011, 12h57

Il faut aller sur : http://jqueryui.com/download, et "Download" .

Tu récupères les dossiers js et css dans le zip et tu les colle dans la racine de ton site.
Puis dans le <head></head> de ta page :

Code :

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

1
2
3
<link type="text/css" href="css/themename/jquery-ui-1.8.13.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>

(Vérifie le nom des fichiers, la version est peut-être différente) .

Ensuite dans le body, si par exemple tu veux afficher la facture au clic d'un bouton, tu peux faire :

Code :

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

1
2
3
4
5
6
7
8
<button type="button" onclick="afficheFacture();">Afficher la facture</button>
<div id="facture" style="display:none;">Contenu de la facture</div>
<script>
function afficheFacture()
{
    $('#facture').dialog();
}
</script>

Sur les pages de démos, penses à regarder la source des exemples (bouton view source), ça t'aideras à comprendre le fonctionnement du truc.

A+

**skins** · 11/06/2011, 13h12

~~Je ne sais pas mais est ce que je dois utiliser une fonction function afficheFacture() dans le head non ?~~

~~Ok je vois maintenant mais comment ouvrire une page dedans ?~~

Enfaite je viens d'ouvrir une page dedans

mais le vrai problème mnt c'est que :

Avant j'avais des boutons crées avec une boucle PHP qui affecte une valeur (ref facture)dans chaque bouton qui le transmet a son tour a la fonction qui appel un fichier PHP qui lui effectue une recherche dans la BD pour afficher les donnée de la facture.
Le problème c'est que les pages .php ne s'ouvrent pas dans le pop up

Comment puis-je le faire mnt ?

Merci d'avance

Invité · 11/06/2011, 15h12

Il faudrait aller chercher ta facture 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
<button type="button" onclick="afficheFacture(12);">Afficher la facture</button>
<div id="facture" style="display:none;"></div>
<script>
function afficheFacture(factureID)
{
    $.ajax({
       url: 'php/phpDesFactures.php?getFacture='+factureID,
       success: function (reponse)
       {
          $('#facture').html(reponse);
          $('#facture').dialog();
       }
    });    
}
</script>

Le button étant généré par le php, le "12" étant l'id de la facture, "phpDesFactures.php" le fichier php qui écrit la facture, et "getFacture" la variable GET transmise à "phpDesFactures.php" pour générer la facture voulue .

Je ne sais pas si c'est très clair, dis moi si ça te parait obscur .
J'ai mis le <script> à la suite, mais tu as raison, il vaut mieux le mettre dans le <head>

**skins** · 11/06/2011, 18h03

mmmmm je me suis casser la tête un peut avec cette nouveauté mais je n'arrive a avoir le bout du fil

Pouvez vous m'aidez SVP

Invité · 11/06/2011, 18h09

Peux-tu afficher le code en question ?

**skins** · 11/06/2011, 18h15

ci-dessous le code (j'en suis pas fiè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
<?php
$reponse = mysql_query("select * FROM jos_pack where id_user = '$iduser' AND Validation = '1' ORDER BY id DESC");
while ($donnees = mysql_fetch_array($reponse))
{
$idinter = $donnees['id'];
$Type = $donnees['Type'];
?>
 
<button type="button" onclick="afficheFacture(<?php echo $idinter ; ?>);">Afficher la facture</button>
<div id="facture" style="display:none;"></div>
<script>
function afficheFacture(idinter)
{
    $.ajax({
       url: 'Ajax/View_Inter_Soft'+idinter,
       success: function (reponse)
       {
          $('#facture').html(reponse);
          $('#facture').dialog();
       }
    });    
}
</script>

j'aimerais bien déplacer la fonction dans le hearder

Invité · 11/06/2011, 18h53

Ah ok, laisse tomber l'ajax.
Tu peux le faire comme ça :

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
<?php
$reponse = mysql_query("select * FROM jos_pack where id_user = '$iduser' AND Validation = '1' ORDER BY id DESC");
while ($donnees = mysql_fetch_array($reponse))
{
$idinter = $donnees['id'];
$Type = $donnees['Type'];
?>
 
<button type="button" onclick="afficheFacture(<?php echo $idinter ; ?>);">Afficher la facture</button>
<div id="facture_<?php echo $idinter ; ?>" style="display:none;" class="facture">Contenu de la facture</div>
<?php 
}
?>
<script>
function afficheFacture(idinter)
{   
    $('.facture').dialog('destroy');  // Si une facture est déjà ouverte, on la ferme
    $('#facture_'+idinter).dialog();  // Ouvre la facture correspondante
}
</script>

**skins** · 11/06/2011, 19h08

cela m'affiche un bouton pour chaque facture, mais est ce que je peux mettre une page php dans contenu du pop up ?

Invité · 11/06/2011, 19h21

Oui, avec un include, ou en ajax.

Bon courage

**skins** · 11/06/2011, 20h47

un dernier coup de pousse SVP

J ai crée mis cette fonction dans le header

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
 
function afficheFacture(idinter){
$('#facture_'+idinter).dialog();
this.idinter= idinter;
var xhr = getXhr();
xhr.onreadystatechange = function(){
 if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('facture_'+idinter).innerHTML = leselect;
					}
				}
document.getElementById('facture_'+idinter).innerHTML = "<p><table><tr><td><img src='images/loading.gif'></td><td><font color='#345E6F' size='2'>Chargement</font></td></tr></table></p>";
xhr.open("POST","templates/CA_Gris_Turquoi3/Ajax/View_Inter.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("idInter="+idinter);
 
			}

et pour le bouton :

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
<?php
$user =& JFactory::getUser();
$iduser= $user->get('id');
$reponse = mysql_query("select * FROM jos_pack where id_user = '$iduser' AND Validation = '1' ORDER BY id DESC");
while ($donnees = mysql_fetch_array($reponse))
{
$idinter = $donnees['id'];
$Type = $donnees['Type'];
?>
 
<button type="button" onclick="afficheFacture(<?php echo $idinter ; ?>);">Afficher la facture</button>
<div id="facture_<?php echo $idinter ; ?>" style="display:none;" class="facture">
</div>
<?php 
}
?>

J ai vérifier la requête fonctionne correctement, avec firebug la réponse est bien la , mais je n'arrive pas a l'afficher

Merci pour votre aide

Invité · 12/06/2011, 11h52

Je ne peux pas t'aider davantage, je n'utilise pas du tout l'XMLHttpRequest, mais jQuery, comme illustré plus haut.
J'espère que quelqu'un va pouvoir t'aider .

**skins** · 12/06/2011, 21h34

Bonjour
Ce n'est pas grave vous m étiez d une aide précieuse

J vais tenter un truc, je vous tiens au courant

UI Dialog. J'aimerais utiliser cette boîte de dialogue pour afficher une facture

jQuery

Discussions similaires

Partager

Partager