Mettre a jour en jquery un code js de 2010

Version imprimable

Bonjour,

J'ai ce code de 2010 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
function itemSearch(name)
{
    if(name == '') {
        document.getElementById('a_result').innerHTML = '';
    }
    else
    {
        /* À cet endroit précis, on peut faire apparaître un message d'attente */
        var loading = document.getElementById('a_result');
			loading.style.background = 'url(images/loading.gif) #FFF no-repeat center';
			getXhr();
 
		xhr.onreadystatechange = function()
			{
			 if(xhr.readyState == 4 && xhr.status == 200) {
				         document.getElementById('a_result').style.background = '';
 
 
			 document.getElementById('result').innerHTML=xhr.responseText;
 
			 }
			}
		xhr.open("GET","view/result.php?name="+name,true);
		xhr.send(null);
    }
}

Que donnerai ce code en jquery svp ?

Merci

Salut,

Un truc du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function itemSearch(name){
	if(name==''){
  	$("#a_result").html("");
  }
  else{
  	var loading=$("#a_result");
        loading.css("background",'url(images/loading.gif) #FFF no-repeat center');
        $.ajax({
    	   url:"view/result.php",
           data:{"name":name}
       })
       .done(function(d){//en cas de succès
    	  console.log("done :",d);
          loading.css("background","");//ou bien loading.removeAttr("background") si tu veux le supprimer.
          $("#result").html(d);
       })
       .fail(function(err){//en cas d'erreur
          console.log("erreur :",err);});
       }
}

22/02/2020, 20h15
melka one

jour

j' appel pas ça une mise a jour je dirait plutôt que c' est une régression car tu perd l'avantage de l' indépendance.
23/02/2020, 03h03
Toufik83

melka one
Pourquoi ne pas dire que : je veux apprendre les nouvelles bibliothèques ? :weird:

Sans prendre en considération le nombre des lignes en jQuery est 21, alors qu'en JS pur ça fait 27 + (la longueur des instructions...).
23/02/2020, 09h45
melka one

justement jquery n'est pas récent.

jquery n'est plus aussi 'indispenssable/supermegaouf' comme c'etait le cas en 2010
si tu tiens vraiment a compter tes lignes, voici la version vanilla

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function itemSearch(name) {
	if(name==''){
		document.getElementById('a_result').innerHTML = '';
	} else {
		const loading = document.getElementById('a_result');
        loading.style.background = 'url(images/loading.gif) #FFF no-repeat center';
        fetch('view/result.php',
			{body:JSON.stringify({"name":name}) }
		)
		.then(res => res.text())
		.then(d => {
			console.log("done :",d);
			loading.style.background = '';
			document.getElementById('result').innerHTML = d;
		})
		.catch(err => {
			console.log("erreur :",err);
		});
	}
}

j'ai pas teste, mais ca devrait etre ca
(j'ai traduit la version jquery propose plus haut)

24/02/2020, 10h37
SpaceFrog

C'est un concours de nombre de lignes ?
On peut aussi prendre en compte la rapidité de codage et la facilité de maintenance ?

Voici mon code complet.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function itemSearch(name) {
    if(name == '') {
        document.getElementById('a_result').innerHTML = '';
    }
    else
    {
        /* À cet endroit précis, on peut faire apparaître un message d'attente */
        var loading = document.getElementById('a_result');
			loading.style.background = 'url(images/loading.gif) #FFF no-repeat center';
	getXhr();
 
	xhr.onreadystatechange = function()
		{
		 if(xhr.readyState == 4 && xhr.status == 200) {
			         document.getElementById('a_result').style.background = '';
 
 
		 document.getElementById('result').innerHTML=xhr.responseText;
 
		 }
		}
	xhr.open("GET","view/result.php?name="+name,true);
	xhr.send(null);
}
}
 
// can you make a best a code en js?

Merci de m'aider a faire de code un vrais code a jours.

je ne sais pas si c'est le meilleur code, mais j'aurai fais comme ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function itemSearch(name) {
	document.getElementById('a_result').innerHTML = '';
    if(name.trim() === '') {
		return true;
	}
	document.getElementById('a_result').classList.add('loading');//style background = 'url(images/loading.gif) #fff no-repeat center; a mettre dans le css avec la class .loading
 
	fetch(`view/result.php?name=${name}`)
		.then(res => {
			if(res.status !== 200) {
				throw 'error fetching result';
			} else {
				return res.text();
			}
		})
		.then(data => {
			document.getElementById('a_result').classList.remove('loading');
			document.getElementById('result').innerHTML = data;
		})
		.catch(err => {
			console.log(err);
		});
}

03/03/2020, 10h53
Yu-Chan
Merci de votre part.

Par contre ma modification du code est pas a jour.
Par exemple :
Code:

1 2 document.getElementById('a_result').innerHTML = '';
Est du js pure et non du jquery.

Et la fonction ajax du jquery ou plugin de jquery est inexistante.

Merci, j'ai vraiment besoin d'aide
03/03/2020, 10h57
NoSmoking

Bonjour,

Citation:

Merci, j'ai vraiment besoin d'aide

c'est dans jQuery API que tu trouveras tout ce qu'il est possible de faire en utlisant jQuery.
03/03/2020, 11h00
Doksuri

le code que tu proposes dans ta reponse #8 est du pure JS, j'ai donc "modernise" en pure JS
jquery ne veut pas dire "moderne"
03/03/2020, 13h13
Yu-Chan

OK je comprends.

Du coup en jquery sa donnerai quoi ?