Passer du javascript au Jquery

**cobra85** · 02/02/2015, 20h38

Bonjour,

J'ai un code javascript qui me permet de remplir une liste déroulante via une popup. Pour cela j'utilise du Javascript mais j'aimerais passer en Jquery.

Voici le code de la page principale:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
    function doc(id_op)  {
	     if (document.layers)  { // NS 4 et <
		   return document[id_op];
		 }
		 if (document.all)  { // IE
		   return document.all[id_op];
		 }
		 if (document.getElementById)  {
		   return document.getElementById(id_op);
		 }
 
		}
 
		function ajout(id_op, value, text)  {
		    formulaire = doc(id_op);
		   // Recuperation des informations
		    nb = formulaire.length;
		   // On compte le nombre d'<option />
		    nouvel_element = new Option(text, value, false, true);
 
		    formulaire.options[nb] = nouvel_element;
		}

et voici le code de la page popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function doc(id_op)
    {
	     if (document.layers)
	     { // NS 4 et <
		   return document[id_op];
		 }
		 if (document.all)
		 { // IE
		   return document.all[id_op];
		 }
		 if (document.getElementById)
		 {
		   return document.getElementById(id_op);
		 }
 
		}
 
 
    function valid()
    {
        value = doc('value').value;
        text = doc('id_n').value;
        opener.ajout('id_op', value, text);
    }
 
        <form id="formcache" class="form-signin" action="" method="post" onsubmit="valid();">
            <fieldset>
            <h2 class="form-signin-heading">Confirmation</h2>
                <div>
                    <center>L'opération <strong>"{{ name }}"</strong> à bien été ajouté."!!</center>
 
                    <input type="hidden" name="value" id="value" value=""  />
                    <input type="hidden" class="form-control" id="id_n" maxlength="30" name="name" value=""/></p>
                    <br>
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="submit" id="id_op" onclick="window.close();">Fermer la fenêtre</button>
            </fieldset>
        </form>

Je code en Django d'ou l'apparition de certaine balise mais cela ne change rien pour le code.

Du coup, j'ai -essayé- de transformer ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function doc(id_operation)
    {
	     if (document.layers)
	     { // NS 4 et <
		   return document[id_operation];
		 }
		 if (document.all)
		 { // IE
		   return document.all[id_operation];
		 }
		 if (document.getElementById)
		 {
		   return document.getElementById(id_operation);
		 }
 
		}
 
 
    function valid()
    {
        value = doc('value').value; //$('#value').text();
        text = doc('id_name').value;
        opener.ajouter('id_operation', value, text);
    }

en ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	$("form").submit(function(event) {
		$('#value').text();
		$('#id_n').text();
    });

Je ne suis pas trop sur de moi, et pour le code la page principale, je donne ma langue au chat !!

Merci

**NoSmoking** · 02/02/2015, 21h56

Bonjour,

Pour cela j'utilise du Javascript mais j'aimerais passer en Jquery.

c'est quand même une idée bizarre !!! jQuery n'est jamais que du javascript.

Ta fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function doc(id_op) {
  if (document.layers) { // NS 4 et <
    return document[id_op];
  }
  if (document.all) { // IE
    return document.all[id_op];
  }
  if (document.getElementById) {
    return document.getElementById(id_op);
  }
}

est quand même un collector en 2015

mais tu es sur la bonne voie avec ton value = doc('value').value; //$('#value').text();.

Prend quand même le temps de lire la FAQ jQuery et bien évidemment la documentation officielle qui regorge d'exemples.

**danielhagnoul** · 02/02/2015, 22h49

Un exemple basique de transaction AJAX en jQuery :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<form id="formcache">
    <fieldset>
        <h2>Confirmation</h2>
        <div>
            <p>L'opération à bien été ajoutée !</p>
            <p>
                <input id="value" name="value" value="57">
                <input id="id_n" name="name" value="Pierre Dupond">
            </p>
        </div>
        <input type="submit" value="Fermer la fenêtre">
    </fieldset>
</form>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$( function(){ // forme abrégée de $(document).ready(function(
 
    $( "#formcache" ).submit( function(){
 
        // debug, console, touche F12
        console.log( $( this ).serialize() );
 
        // value=57&name=Pierre+Dupond
 
        var jqXHR = $.post( "monfichier.php", $( this ).serialize() );
 
        jqXHR.done( function( data, textStatus, jqXHR ){
            // succès de la transaction, on doit traiter le contenu de data
            console.log( data, textStatus, jqXHR );
 
        });
 
        jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
            // échec de la transaction, gérer la catastrophe
            console.log( jqXHR, textStatus, errorThrown );
 
        });
 
        jqXHR.always( function( jqXHR, textStatus ){
            // la transaction est terminée
            // nettoyage
            // exécution d'un code dépendant
            console.log( jqXHR, textStatus );
 
        });
 
        return false;
    });
});

Ma FAQ jQuery

**cobra85** · 04/02/2015, 19h35

Bonjour à tous, j'ai un peu progressé:

Voici le code pour la page principale:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function doc(id_op){
	if $(''){
		return id_op=$('#id_op');
	}
};
function ajouter(id_op, value, text) {
	formulaire = doc(id_op);
	// Recuperation des informations
	nb = formulaire.length;
	// On compte le nombre d'<option />
	nouvel_element = new Option(text, value, false, true);
	formulaire.options[nb] = nouvel_element;
}

Pour ce code si je n'ai aucune idée pour la transposition

et le code de la fenetre popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function doc(id_operation){
	if $(''){
		return id_op=$('#id_op');
	}
});
function valid() {
	var value = $('#value').text();
    	var id_n = $('#id_n').text();
    	window.opener.$('id_op', value, id_n);
};

Je n'ai pas trouver l'équivalent de opener en jQuery pour faire passer un argument d'un fenetre enfant à une fenetre parents

**cobra85** · 04/02/2015, 20h48

Pour function doc(id_operation) comprendre function doc(id_op)

**danielhagnoul** · 04/02/2015, 22h19

Envoyé par cobra85

Je n'ai pas trouver l'équivalent de opener en jQuery pour faire passer un argument d'un fenetre enfant à une fenetre parents

jQuery c'est du JS ! Ce n'est pas parce que jQuery est disponible que vous pouvez négliger le JS.

D'autant que ES5 et le futur ES2015 (ex ES6) offrent des nouveautés particulièrement intéressantes.

Pour "opener", c'est simplement une propriété de l'objet "window".

**Bovino** · 05/02/2015, 09h15

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if $(''){...}

C'est quoi cette syntaxe ?

**cobra85** · 05/02/2015, 19h06

Salut,

J'ai du vouloir transformer ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function doc(id_op) {
  if (document.getElementById) {<------|
    return document.getElementById(id_op);
  }

**NoSmoking** · 05/02/2015, 21h29

Dans ce cas autant te familiariser tout de suite avec la notation jQuery et d’utiliser les nombreuse méthodes mise à ta disposition par la librairie.

Au risque de me répéter compulse la documentation, je t'aurais bien proposé un livre mais je crois savoir qu'on ne le trouve plus

**Bovino** · 06/02/2015, 08h03

Envoyé par NoSmoking

je crois savoir qu'on ne le trouve plus

Tu crois mal !

Mais ça me rappelle que je n'ai pas pris le temps de finir la mise en forme (notamment la coloration syntaxique).

**NoSmoking** · 07/02/2015, 10h00

Tu crois mal !

il ne me semble pas avoir vu d'annonce...et le lien dans ta signature serait donc à mettre à jour

**Bovino** · 09/02/2015, 08h02

Non, parce que comme dit, la mise en forme n'est pas encore finalisée...

Mais ma signature a été modifiée.

**Franck.H** · 09/02/2015, 11h18

Envoyé par NoSmoking

Dans ce cas autant te familiariser tout de suite avec la notation jQuery et d’utiliser les nombreuse méthodes mise à ta disposition par la librairie.

Au risque de me répéter compulse la documentation, je t'aurais bien proposé un livre mais je crois savoir qu'on ne le trouve plus

Ce livre est très bien aussi

**NoSmoking** · 11/02/2015, 18h33

Je veux bien te croire mais celui ci, je le connais, l'ais lu et il est très bien, facilement abordable et permet même de démystifier jQuery pour les plus réfractaires.

Passer du javascript au Jquery

jQuery

Discussions similaires

Partager

Partager