JAVASCRIPT SWAL2 Faire des popups de messages du type alerte

On est tous passé par là afficher des popups par différents moyens

le fameux alert(‘hello’) pour afficher un message à l’utilisateur sur une validation de formulaire par exemple mais je dois dire c’est très moche mais pratique pour le Debug

ou alors la fameuse fenêtre modal du framework Bootstrap pour ceux qui utilise ce framework

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Bon je cherchais une librairie pour des alertes de messages simples à mettre en oeuvre peu verbeux et sexy!

j’ai trouvé Swal

https://sweetalert2.github.io/

Je vous donne la page de leurs exemples :

https://sweetalert2.github.io/#examples

suffit de regarder on a une fenêtre avec peu de code et plutôt bien faîtes et ca c’est un must surtout quand notre page web commence à déborder de contrôles javascripts :

Swal.fire({  type: 'error',  title: 'Oops...',  text: 'Something went wrong!',  footer: '<a href>Why do I have this issue?</a>'})

Je vous laisse regarder leur site car la documentation est vraiment bien faîtes!

Javascript Upload de fichiers From scratch ou avec une Librairie?

Alors oui il s’agit d’une des fonctionnalités auquel vous n’allez pas y réchapper, à chaque fois on s’arrache les cheveux car :

Mes fichiers sont volumineux et le navigateur rame voir plante

Comment dealer proprement entre le réseau, notre serveur et notre navigateur.

L’idée de base c’est d’utiliser le format binaire blob et de l’envoyer sur le réseau par petits morceaux chunk de cette manière vous éviterez le fameux error 500 ou la page qui mouline à n’en plus finir.

Coté serveur il va falloir consolider l’ensemble de ces chunks pour retrouver notre fichier alors la c’est du boulot et qu’en est il si le fichier plante lors de son envoi est ce que l’on doit tout renvoyer à nouveau?

Bon je vous dévoile une librairie vraiment robuste que j’utilise dans certains projets et qui résout ces problèmes et en plus opensource voici le lien le développeur a vraiment bien taffé

https://github.com/blueimp/jQuery-File-Upload

Ce que je kiffe :

  • Vous pouvez drag and dropper vos fichiers
  • Uploader plusieurs fichiers
  • Faire une pause sur l’envoi de fichier
  • Vous pouvez limiter la taille des fichiers à envoyer
  • Vérifier le type de fichier qui est envoyé

Très simple à utiliser elle repose sur Jquery

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: '/post/private/myfiles',
        autoUpload: false,
        singleFileUploads:true,
        sequentialUploads:true,
        acceptFileTypes: '@',
        maxChunkSize: 1000000,
        maxFileSize:{{@config("test.maxsize_filesupload")}},
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,});
 // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        ))
        .on('fileuploadadd', function (e, data) {
         

         }).on('fileuploadsubmit', function (e, data) {
    
         }).on('fileuploadfailed', function (e, data) {
          
         });
    
  
         
 });
 
});

Je la recommande car les exemples fournis avec sont vraiment complets

et je balance un peu elle s’intègre facilement avec vos frameworks favoris ..Laravel par exemple 😉

JQUERY Le célèbre et indémodable Faire une requête AJAX

JQUERY est l’une des librairies Javascript qui permet de manipuler le DOM HTML intercepter des events de votre page tel que les clics pour soumettre des formulaires

bien utile bien que détrôner par des frameworks javascripts qui sont Reactjs ou Angular ou Vuejs qui proposent et uniformisent une architecture front pour manipuler les pages web intercepter les events et proposer un workflow de traitement

Jquery est une librairie bien utile dans certains cas bien que l’on avait tendance à tout faire avec avant l’apparition des frameworks ci dessus cela devenait vite un plat de spaghetti allez vous faites encore de la validation de formulaire avec Jquery?

Voici quelques morceaux de codes que je vous livre et que j’utilise souvent

Requêtes formulaires AJAX vers un backend :

requête de type post :
function postContent(form,action){
	$.post('/admin/content/'+action, form, function (data, textStatus) {
		if(textStatus=='success'){
			if(data!=null){
		             var parsed = data;
			      if(parsed['success']){
			      /**DO SOMETHING***/
                   }
                    else if(parsed['success']==false){
                          /**DO SOMETHING***/
                    }else{
			 /**DO SOMETHING***/	
		        alert('data problems');
			}
		}else{
			 /**DO SOMETHING***/
			alert('something mistake...problems');
		}
		
	 });
}

requête de type get :
 $.ajax({
                  type: 'get',
                  data : any2url('q',inputData),
                  dateType:'json',
                  url: "/admin/category/edit",
                   success: function(data) {
                	   console.log(data);
                       var parsed = JSON.parse(data);
                       window.location.href = parsed.datas.uri;
                  },
                  error: function(xhr, textStatus, thrownError) {
                      alert(thrownError);
                      alert('Something went to wrong.Please Try again later...');
                  }
                 
              });
    }

C’est très simple pas forcément besoin d’un framework Javascript pour certaines actions de la vie quotidienne l’inconvénient majeur c’est sur du long terme on a tendance à surcharger et cela peu devenir très vite compliquer à debugger mais cela reste une bonne librairie par sa simplicité d’utilisation.

https://jquery.com/