Un pense bête comme un autre
Programmation
Javascript – Recharger une fenêtre parente lors de la fermeture d’une pop-up
029 jours
by Arnaud
in Programmation
Recharger ma page parente
La problématique est simple, j’ai une page html/php qui ouvre une pop-up pour télécharger une photo, la resizer puis l’enregistrer.
Une fois l’enregistrement terminer je ferme ma pop-up. L’image resizer doit s’afficher dans la fenêtre appelante, pour cela j’utilise l’instruction suivante avant de fermer ma pop-up.
window.opener.location.reload();
Eviter les problèmes de cache
Lors du rappel de ma pop-up en modification j’ai du régler des problèmes de cache.
Pour cela j’ai ajouté des meta dans mon header.
<meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, must-revalidate">
Malgré cela, mes problèmes persistés, j’ai alors ajouter un paramètre aléatoire à l’url ouvrant ma pop-up, et oh miracle mes problèmes ont disparu.
Utilisez JQuery pour ouvrir / fermer un div
031 jours
by Arnaud
in Programmation
Nous avons vu dans l’article « Utilisation de JQuery pour soumettre un formulaire » comment utiliser le framework javascript JQuery pour soumettre un formulaire en utilisant l’ajax. Dans ce nouvel article on va voir comment ouvrir un div.
Pour ce nouvel exemple nous reprenons l’exemple précédent.
Inventaire des fichiers
L’exemple sera composé de 3 fichiers:
- Le formulaire (index.php)
- Traitement javascript (ajax.js)
- Le fichier PHP de traitement (action.php)
Syntaxe HTML
Voici les lignes ajoutées après le bouton connexion du fichier index.php.
</pre> <h3 class="collapse">Besoin d'aide cliquez-ici</h3> <div class="content"> <ul> <li>Saisissez votre identifiant dans la première zone</li> <li>Saisissez votre mot de passe dans la deuxième zone</li> <li>Cliquez sur le bouton connexion</li> </ul> </div> <pre>
Ce qui est important dans ces quelques lignes sont les classes collapse et content. On va mieux le comprendre en regardant le code javascript qu’il faut ajouter dans le fichier _js/ajax.js.
Syntaxe Javascript
Après les lignes suivantes après la fonction Ready
jQuery(".content").hide();
jQuery(".collapse").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
Ces deux indiquent que par défaut l’élément html ayant la classe content est caché. Et lors du clique du l’élément html ayant la classe collpase, affiche l’élement suivant ayant la classe content.
Syntaxe CSS
Et juste quelque ligne de présentation ajoutée dans le fichier exemple.css
.content {
border:2px solid #DDDDDD;
margin-bottom:1em;
padding:0.8em;
background:none repeat scroll 0 0 #E6EFC2;
border-color:#C6D880;
color:#264409;
}
Visuels
Le formulaire avant le clique sur l’aide
Le formulaire après avoir cliqué sur le div
En cliquant de nouveau sur l’aide le texte se ferme.
Fichiers et liens
Vous trouverez un zip de l’exemple
Voici la liste des différents liens qui peuvent aider à approfondir le sujet:
Connaitre les dépendances d’un objet SQL
0282 jours
by Arnaud
in Programmation
Si vous voulez connaitre par exemple les vues et/ou les procédures qui dépendent d’une table (ou vue), les tables (et/ou vues) dont dépend la vue (et/ou procédure), il existe une commande toute simple:
L’exécution suivante indique que « maProcA » est utilisée par « maProcB »
EXEC sp_depends @objname = 'maProcA' ; name type ---------------- ---------------- dbo.maProcB stored procedure
Problème de liaison entre Flex et Amfphp
0320 jours
by Arnaud
in Programmation
Voici l’erreur que j’ai eu lors du 1er appel au web service de mon application Flex, après avoir récupéré les sources depuis un repository (SVN).
[MessagingError message='Destination 'amfphp' either does not exist or the destination has no channels defined (and the application does not define any default channels.)']
Le problème vient de la ligne de compilation où il manque 1 paramètre:
-services "services-config.xml"
Ce paramètre indique au compilateur le fichier contenant les informations pour établir le lien entre la partie cliente (le flex) et la partie serveur (php).
Convertir un Array en ArrayCollection en AS3
2343 jours
by Arnaud
in Programmation
Tout est dans le titre, voici une petite méthode permettant de transformer un Array en ArrayCollection en AS3
... import mx.utils.ArrayUtil; ... var myCollection : ArrayCollection = new ArrayCollection(); var myArray : Array = new Array(); myCollection = new ArrayCollection( ArrayUtil.toArray(myArray ) );
Dans quelle table se trouve cette colonne?
0429 jours
by Arnaud
in Programmation
Petite requête pour lister toutes les tables sous SQL- Server contenant une colonne:
select object_name(id) from syscolumns where name='maColonne'
Et nous avons comme résultat
column1 ------------- table1 table3
Ça peut servir
Merci Steph
Utilisation de JQuery pour soumettre un formulaire
4783 jours
by Arnaud
in Programmation
Voilà un petit tutoriel pour utiliser l’API JQuery et la soumission de formulaire via l’Ajax.
Tout d’abord : le principe. Nous somme sur un formulaire en PHP (le langage importe peu pour comprendre le principe). Lors de la soumission de ce formulaire, nous ne voulons pas que la page soit rechargée. C’est la raison pour laquelle nous allons utiliser la technologie AJAX.
Mais avant tout voici un petit exemple.
Inventaire des fichiers
L’exemple sera composé de 3 fichiers:
- Le formulaire (index.php)
- Traitement javascript (ajax.js)
- Le fichier PHP de traitement (action.php)
Le formulaire
Nous allons faire simple : un petit formulaire de connexion avec un identifiant et un mot de passe.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Soumettre un formulaire en ajax via JQuery</title>
<script type="text/javascript" src="./_js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./_js/ajax.js"></script>
<link rel="stylesheet" type="text/css" href="./_css/exemple.css" media="screen" />
</head>
<body>
<div id="root">
<form id="auth" method="post" name="auth" action="">
<fieldset>
<legend>Authentification</legend>
<label for="iden">Identifiant:</label>
<br />
<input type="text" name="iden" id="iden" class="text" size="20" />
<br />
<label for="mdp">Mot de Passe:</label>
<br />
<input type="text" name="mdp" id="mdp" class="text" size="20" />
<br /><br />
<button type="submit" class="button positive"> Connexion</button>
</fieldset>
</form>
<div id="success" class="success" style="display:none;"></div>
</div>
</body>
</html>
On inclut 2 fichiers javascript :
- jquery-1.3.2.js : API JQuery à télécharger ici
- ajax.js : notre fichier qui va faire le lien entre notre formulaire et notre traitement php
Le Javascript
Il est composé de 2 fonctions importantes :
- ready : fonction à exécuter lorsque le document sera prêt.
- ajax : fonction qui charge une page externe en utilisant une requête HTTP
Les Options
On doit fournir à la fonction « ajax » plusieurs options plus ou moins évidentes. C’est pourquoi je m’attarderai sur dataTypes.
dataType (string) : correspond au format des données qui seront renvoyées du serveur. Si aucun type n’est spécifié, jQuery utilisera le type MIME pour déterminer le format adéquat : responseXMl ou ResponseText. Voici la liste des types disponibles:
- « xml » : retourne un document XML qui pourra être traité par jQuery.
- « html » : retourne du code HTML au format texte, inclus l’évaluation des script tags.
- « script » : évalue la réponse en Javascript et retourne cette dernière au format texte.
- « json » : évalue la réponse en JSON et retourne un objet Javascript.
Dans notre exemple le fichier action.php retourne des données structurées, c’est pourquoi nous choisissons comme type de données JSON.
$(document).ready(function () {
$("form#auth").submit(function() {
var identifiant = $('#iden').attr('value');
var mdp = $('#mdp').attr('value');
$.ajax({
type: "POST",
url: "action.php",
data: "&iden="+ identifiant + "&mdp=" + mdp,
success: result,
dataType: "json"
});
return false;
});
});
function result(data){
var resultat = '<p>Résultat: <b>'+data.identifiant+'</b> vous êtes connecté avec le mot de passe suivant <b>'+
data.mdp+"</b><br />n L'exemple est finit retourné sur le site <a class='positive' href='"+data.url+"'>Dollois Connection</a></p>";
$('form#auth').hide();
$('div#success').fadeIn("slow");
$('div#success').append(resultat);
}
Le PHP
Le contenu de ce fichier n’a aucun intérêt, vous l’aurez bien compris, si ce n’est, par exemple, de vous permettre d’interroger une base de données pour vérifier si l’identifiant et le mot de passe correspondent bien à un utilisateur du site.
Le seul point à noter est json_encode qui retourne la représentation JSON d’une valeur.
<?php
$result = array(
'url' => 'http://www.dollois.com',
'identifiant' => $_POST['iden'],
'mdp' => $_POST['mdp'],
);
echo json_encode($result);
?>
Fichiers et liens
Vous trouverez un zip de l’exemple
Voici la liste des différents liens qui peuvent aider à approfondir le sujet: