Magix cjQuery, une bibliothèque php pour intégrer jQuery - Mot-clé - requete ajaxMagix cjQuery est une bibliothèque écrite en PHP 5.
Elle permet d’effectuer le contrôle de vos données échangé dans les champs de formulaire.
Elle peut être intégrée dans tout type de conception, et est compatible avec différents framework.2017-02-18T14:52:11+01:00gerits aurelienurn:md5:fc9a43498ab43d68ba6c26764a7e06acDotcleardéveloppement de la boite à outil javascript jimagineurn:md5:2351160a84265289952aac9da044150c2011-11-16T13:52:00+01:002011-11-16T14:09:33+01:00aurelien geritstutoriel jQueryajax jQueryjQueryrequete ajaxévènements jQuery<p>Depuis un petit moment,
je développe une <strong>boite à outils javascript</strong> qui intègre des helpers jQuery bien pratique.<br />
En sommes, cette boite permettra d'utiliser des fonctions prêt à l'emploi qui utilisent des <strong>plugins jQuery</strong> pré configuré.<br />
Bien entendu la plupart des plugins sont entièrement écrit pour l'occasion sauf dans certain cas tel que <strong>gmap3</strong> ou encore <strong>jquery forms</strong>.</p> <p>Prenons un exemple,<br />
imaginons que je souhaite faire une <a href="https://magix-cjquery.com/pages/requete-ajax-jquery-de-type-post" hreflang="fr" title="Requête Ajax Post">requête ajax</a> avec une notification à la style twitter !!
Dans un cas classique,
je dois écrire la requête complète avec le callback et ensuite afficher à un endroit quelconque la notification mise en forme, mais avec la boite à outils vous effectuez la procédure mais en une seule ligne.
Sachant que tous les callbacks restent 100% personnalisable.</p>
<h3>Exemple de requête post :</h3>
<h4>Requête simple avec notification par défaut</h4>
<pre>[javascript]
$.nicenotify({
ntype: "ajax",
uri: '/test.php',
typesend: 'post',
noticedata: 'm_name='+$('#m_name').val()
});
</pre>
<h4>Requête avec paramètres supplémentaire et personnalisation de la notification</h4>
<pre>[javascript]
$.nicenotify({
ntype: "ajax",
uri: '/test.php',
typesend: 'post',
noticedata: 'm_name='+$('#m_name').val()
beforeParams:function(){
$(":submit").hide();
$('<span class="min-loader"><img src="/img/loader/min-loader.gif" /></span>').insertAfter(':submit');
},
successParams:function(e){
$('.min-loader').remove();
$(":submit").show();
$.nicenotify.initbox(e,{
time: null,
reloadhtml:false,
delay: 3000
});
}
});
</pre>
<h4>Quels avantages par rapport à l'utilisation de ajax natif ?</h4>
<p>L'utilisation de la fonction ajax native est beaucoup plus longue à écrire dans le cas présent,<br />
nicenotify effectue tous les tests nécessaire et retourne les erreurs sans oublier le callback dans une notification à la style twitter.<br />
Dans un cas plus particulier, si j'ai besoin de créer une carte googlemap qui récupère les données GPS et permet en plus de modifier les points via le déplacement du marqueur sa devient plus complexe et long à écrire.
Une série de fonctions prêt à l'emploi son déjà intégrée et créer une tel carte ne nécessite que très peu de code.</p>
<h3>Exemple avec une carte simple utilisant les données longitude et latitude :</h3>
<pre>[javascript]
var confcontent = $('#city').val()+'<br />'+$('#country').val();
var tabconfig = {
latitude : $('#lat').val(),
longitude : $('#lng').val(),
zoom : 15,
content: confcontent
};
jm_map._baselatLng('#my_map',tabconfig,false);
</pre>
<p>Bien d'autres outils sont disponible et toujours en développement.
<strong>Jimagine</strong> sera entièrement intégré dans <a href="http://www.magix-cms.com" hreflang="fr" title="Magix cms">magix cms</a> et son développement est assuré par <a href="http://www.magix-dev.be" hreflang="fr" title="Création de sites avec magix cms">Magix dev</a>.</p>https://magix-cjquery.com/post/2011/11/16/d%C3%A9veloppement-de-la-boite-%C3%A0-outil-javascript-jimagine#comment-formhttps://magix-cjquery.com/feed/atom/comments/127jquery ui dialog avec soumission de formulaire ajaxurn:md5:fd4d0c4fd167b9b48176cb2c10e437642010-08-01T12:34:00+02:002010-09-09T22:47:12+02:00aurelien geritstutoriel jQueryajax jQuerygestionnaire d évènementsjQuery-UI-Dialogrequete ajax<p>La création d'une boite de dialogue ajax devient très simple avec <strong>jQuery UI dialog</strong>.
Il nous faut tout d'abord un élément pour appeler notre boite de dialogue ainsi qu'un conteneur.</p> <pre>[html]
<div class="edit-ma-boite">Click dans ma boite</div>
Notre div conteneur:
<div id="monid" title="Ajouter un truc"></div>
</pre>
<p>Notre élément HTML s'occupe de faire l'appel au click de notre boite de dialogue.
Utilisons la fonction live de jQuery avec un évènement click</p>
<pre>[javascript]
$('.edit-ma-boite').live("click",function(){
/*Notre script ici*/
});
</pre>
<p>Nous devons ensuite configurer l'url dans une variable pour appeler notre boite de dialogue.</p>
<pre>[javascript]
var monurl = "/mapage.html";
</pre>
<p>La fonction load de jQuery va nous aider à charger la boite de dialogue dans notre conteneur avec un ID "#monid".
Imaginons que notre page externe "mapage.html" contient un formulaire.</p>
<pre>[html]
<form action="" method="post">
<fieldset>
<table>
<tr>
<td>
<label for="truc_much">Nom de mon truc:</label>
</td>
<td>
<input type="text" id="truc_much" name="truc_much" class="ui-widget-content" size="30" value="" />
</td>
</tr>
</table>
</fieldset>
</form>
</pre>
<p>Notre fonction load:</p>
<pre>[javascript]
$("#monid").load(monurl, function() {
//Script pour la boite de dialogue
})
</pre>
<p>Nous devons désormais configurer notre boite de dialogue ainsi que la requête ajax POST pour notre formulaire et ce avec jquery form.</p>
<pre>[javascript]
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Envoyer': function() {
$("#monid form").ajaxSubmit({
url: monurl,
type: "post",
error: function(){
alert("theres an error with AJAX");
},
beforeSubmit:function(){},
success: function(e){}
});
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
</pre>
<p>Notre script s'occupe d'ouvrir une boite de dialogue avec un formulaire, et effectue la requête ajax POST de notre formulaire si on click sur le bouton envoyer.
Simple mais efficace, a adapter suivant vos besoins mais la pratique reste identique.
Notre script jquery complet:</p>
<pre>[javascript]
$('.edit-ma-boite').live("click",function(){
var monurl = "/mapage.html";
$("#monid").load(monurl, function() {
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Envoyer': function() {
$("#monid form").ajaxSubmit({
url: submitcat,
type: "post",
error: function(){
alert("theres an error with AJAX");
},
beforeSubmit:function(){},
success: function(e){}
});
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
});
</pre>
<p>Je joins un exemple complet sur ce tutoriel avec quelques légère différence sur le nom des ID et class CSS<br />
Télécharger notre exemple de <a href="https://magix-cjquery.com/download/65">dialog ajax</a></p>https://magix-cjquery.com/post/2010/08/01/jquery-ui-dialog-avec-soumission-de-formulaire-ajax#comment-formhttps://magix-cjquery.com/feed/atom/comments/101plugin validation, jquery form et jquery ui dialog dans la librairieurn:md5:c425e75e943923ef4056a97ffcf36e982009-10-01T23:34:00+02:002009-10-02T09:45:39+02:00aurelien geritsjQuery uijQuery UIjQuery-UI-Dialogrequete ajaxvalidation jQuery<p><img src="https://magix-cjquery.com/public/presentation/jQuery-ui.png" alt="jQuery-ui.png" style="float:left; margin: 0 1em 1em 0;" title="jQuery-ui.png, mai 2009" />
La prochaine étape dans le développement de la librairie est l'intégration du célèbre <strong>plugin jquery validation</strong>.<br />
Ce plugin aide à la mise en place d'une validation configurable avec jQuery, ce qui est très pratique dans les formulaires.<br />
Cependant que serai le plugin validation sans le <strong>plugin jQuery form</strong>.<br /></p> <p>Une double intégration verra bientôt le jour pour les impatients qui souhaitent une validation de formulaire avec <a href="https://magix-cjquery.com/pages/requete-ajax-jquery-de-type-post" hreflang="fr">requête ajax</a>.<br /></p>
<h3>Avancement de jQuery UI</h3>
<p>MagixcjQuery intègre le <a href="https://magix-cjquery.com/post/2009/05/22/jquery-ui-accordion-dans-la-librairie">plugin UI accordion</a> et le plugin UI dialog va être intégrer également dans l'API.<br />
On intégrera complètement jQuery UI au fur et à mesure avec aussi des plugins en développement (UI select, etc ...).<br />
Quelques surprises vous attendent dans cette nouvelle version avec une API dédié à la vidéo (you tube, dailymotion, Google vidéo).<br />
La manipulation de cette classe spécial sera détaillé dans le prochain billet.</p>https://magix-cjquery.com/post/2009/10/01/plugin-validation%2C-jquery-form-et-jquery-ui-dialog-dans-la-librairie#comment-formhttps://magix-cjquery.com/feed/atom/comments/76magixcjquery alpha0.1v2.1.7urn:md5:236e8cc62a18eb69c74200b05fcaeec92009-06-01T02:12:00+02:002009-06-01T02:12:00+02:00aurelien geritsnewAPI alphaautojointureconstruction de formulairemagix cjQueryMAJrequete ajaxsyntaxe jQuery<p><img src="https://magix-cjquery.com/public/presentation/warning.png" alt="warning.png" style="float:left; margin: 0 1em 1em 0;" title="warning.png, mai 2009" />
Cette nouvelle version corrige de nombreux bug déceler lors de la création des nouveaux exemples.<br />
Celle-ci corrige pas mal de probléme avec les <a href="https://magix-cjquery.com/pages/requete-ajax-jquery-de-type-post" hreflang="fr">requêtes ajax de type POST</a> et les <a href="https://magix-cjquery.com/pages/requete-ajax-jquery-de-type-get" hreflang="fr">requêtes ajax de type GET</a>.<br />
Sans oublié, la correction dans différentes class pour construire des script jquery complexe ou non.<br />
Je pense notamment à divers modifications de fonctions les rendant plus simple d'utilisation, mis en évidence dans les différents exemples du dossier extra SVN.<br /></p> <p>Je vous invite à parcourir le dossier extra pour voir comment construire divers petite application en toute simplicité.<br />
Un exemple très intéressant est bien entendu la construction d'un formulaire de contact.<br />
Celui-ci ce trouve dans le dossier demo-forms dans extra qui regroupe tous les modèles de formulaire.<br />
<strong>Attention</strong> que cette version corrige beaucoup de Bug et modifie la syntaxe de façon à la rendre plus simple en gardant à l'esprit qu'ils vous faudra modifié vos scripts.<br />
D'autres améliorations du côté de magixDB qui ajoute deux nouvelles fonctions pour sélectionner des colonnes et qui permettra bientôt la création de table avec autojointure.<br />
Bref du chemin reste à faire dans la syntaxe de jQuery et surtout jQuery UI étant très gros côté fonctionnalités.<br />
La possibilité de créer vos propres plugin est également en développement qui favorise ainsi un développement "externe" sans touché au core.
Chaque class pourra bénéficier de vos propres modifications sans altéré au reste de l'API très simplement.</p>https://magix-cjquery.com/post/2009/06/01/magixcjquery-alpha0.1v2.1.7#comment-formhttps://magix-cjquery.com/feed/atom/comments/53