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

Version imprimable

11/06/2011, 11h03
skins

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

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
11/06/2011, 11h16
Invité
Salut,

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

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

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 :ccool: néanmoins j'aurais besoin d'un coup de main supplémentaire, pour l’intégration de jQuery & jQueryUI.

Merci d'avance

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:

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:

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+

11/06/2011, 12h12
skins

~~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 :mouarf: 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

Il faudrait aller chercher ta facture en ajax.
Code:

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> :ccool:

11/06/2011, 17h03
skins

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

Pouvez vous m'aidez SVP
11/06/2011, 17h09
Invité

Peux-tu afficher le code en question ?

ci-dessous le code (j'en suis pas fière :oops:)

Code:

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

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

Code:

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>

11/06/2011, 18h08
skins

cela m'affiche un bouton pour chaque facture, mais est ce que je peux mettre une page php dans contenu du pop up ?
11/06/2011, 18h21
Invité

Oui, avec un include, ou en ajax.

Bon courage

un dernier coup de pousse SVP :ave:

J ai crée mis cette fonction dans le header

Code:

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:

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

12/06/2011, 10h52
Invité

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 .
12/06/2011, 20h34
skins

Bonjour
Ce n'est pas grave vous m étiez d une aide précieuse :)
J vais tenter un truc, je vous tiens au courant