Création d'un JQueryscript pour GM - Trouble par réécriture du code JS

Question

Après avoir essayé de résoudre le problème sans et avec de l'aide, je suis toujours bloqué. Mon but était d'écrire un GM-script avec JS. Quelqu'un m'a dit d'utiliser jQuery en raison de sa simplicité. Eh bien, j'ai commencé à apprendre JS la semaine dernière et ma tête est pleine d'informations. Ce dont j'ai besoin, c'est d'une astuce, d'un début, d'un truc qui me dise comment réécrire le script en un jQuery-script qui fonctionne bien. J'ai lu quelques manuels, mais je n'arrive pas à comprendre. Il se peut que j'aie mal compris la syntaxe de jQuery, qui ne doit pas être difficile à comprendre. Au moins, j'ai revu les manuels...

Voici comment le script devrait fonctionner : 1. J'ai créé 3 fonctions. Une pour vérifier si les champs de saisie contiennent des chiffres et n'autorisent que les chiffres, les virgules, les points et certains contrôles. Une deuxième pour remplacer les caractères et alerter si quelque chose est mal fait. La troisième pour faire la somme de quatre champs et mettre le résultat dans le cinquième. 2.j'ai créé deux fonctions pour chaque champ. Une fonction cache le texte, une fonction affiche le texte en cliquant sur 'a'. 3. J'ai au moins créé un tableau avec tous les champs de saisie et le texte qu'ils doivent contenir. 4. En cliquant sur un bouton spécial, la note apparaît (je dois encore l'écrire...).

C'est une grosse affaire pour moi de rassembler toutes les informations et d'écrire un bon et beau (et je sais que ce n'est pas - encore) script.

J'espère vraiment que vous pourrez m'aider. J'ai juste besoin d'un début...

Voici le code que j'ai écrit. Il ne fonctionnera pas dans GM à cause de la fonction document.write utilisée, à cause du bac à sable, etc.

vérifie si les champs de saisie contiennent des nombres, n'autorise que les chiffres, les virgules, les points et certains contrôles.

function check(event) {

var keycode;
if (window.event) {
keycode = window.event.keycode;
} else if (event) {
keycode = event.which;
} else {
return true;
}
if (47 < keycode) {
if (keycode < 58) {
return true;
}
}
var keycodeascii = new Array(0,8,44,46);
while (keycodeascii.length > 0) {
if (keycode == keycodeascii.pop()) {                      
return true;
}
}
return false;
}

remplace n'importe quel caractère par '.', n'autorise pas les caractères au début et à la fin.

function replace(id) {
with(id) {

var oldValue = value;
var newValue = oldValue.replace(/\W+/g, ".");
newValue = newValue.replace(/\W+$/g, "");
newValue = newValue.replace(/^\W/g, "");
value = newValue;

//alerts if digits are split by more than character
var digits = newValue.split(".");
if (digits.length >= 3) {
alert("Sie haben " + (digits.length -1) + " Sonderzeichen verwendet. Bitte korrigieren Sie Ihre Eingabe.");
field.focus();
}

}
}

additionne les champs 1 à 4, le résultat apparaît dans le champ 5.

function calculate() {

var summe = (1*window.document.getElementById('field1').value) + (1*window.document.getElementById('field2').value) + (1*window.document.getElementById('field3').value) + (1*window.document.getElementById('field4').value);

window.document.getElementById('field5').value = summe;

}

fonction d'expansion et de claquement des informations

function show() {
document.getElementById("huhu").style.display = "inline";
document.getElementById("field1_show").style.display = "none";
document.getElementById("field1_hide").style.display = "inline";
}
function hide() {
document.getElementById("huhu").style.display = "none";
document.getElementById("field1_show").style.display = "inline";
document.getElementById("field1_hide").style.display = "none";
}

function expandCom() {
document.getElementById("huhu1").style.display = "inline";
document.getElementById("field2_show").style.display = "none";
document.getElementById("field2_hide").style.display = "inline";
}
function clapCom() {
document.getElementById("huhu1").style.display = "none";
document.getElementById("field2_show").style.display = "inline";
document.getElementById("field2_hide").style.display = "none";
}

function expandOut() {
document.getElementById("field3div").style.display = "inline";
document.getElementById("field3_show").style.display = "none";
document.getElementById("field3_hide").style.display = "inline";
}
function clapOut() {
document.getElementById("field3div").style.display = "none";
document.getElementById("field3_show").style.display = "inline";
document.getElementById("field3_hide").style.display = "none";
}

function expandTest() {
document.getElementById("field4div").style.display = "inline";
document.getElementById("field4_show").style.display = "none";
document.getElementById("field4_hide").style.display = "inline";
}
function clapTest() {
document.getElementById("field4div").style.display = "none";
document.getElementById("field4_show").style.display = "inline";
document.getElementById("field4_hide").style.display = "none";
}

function expandEff() {
document.getElementById("field5div").style.display = "inline";
document.getElementById("field5_show").style.display = "none";
document.getElementById("field5_hide").style.display = "inline";
}
function clapEff() {
document.getElementById("field5div").style.display = "none";
document.getElementById("field5_show").style.display = "inline";
document.getElementById("field5_hide").style.display = "none";
}

crée un tableau avec toutes les structures nécessaires et souhaitées

document.write("<table border='1' cellpadding='10' cellspacing='0'><tbody>");
document.write("<tr>");
document.write("<td bgColor='#FFFFDD'>");

document.write("<table border='0' cellpadding='0' cellspacing='2'><tbody>");
document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field1' name='field_analysis' size='5' value='' onkeypress='return check(event)' onChange='replace(field1)'>");
document.write("<a onClick='show()' id='field1_show'>Text</a><a 'onClick='hide()' id='field1_hide' style='display: none'>Text</a><br><div id='huhu' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field2' name='field_communication' size='5' value='' onkeypress='return check(event)' onChange='replace(field2)'>");
document.write("<a onClick='expandCom()' id='field2_show'>Text</a><a onClick='clapCom()' id='field2_hide' style='display:none'>Text</a><br><div id='huhu1' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field3' name='field_outworking' size='5' value='' onkeypress='return check(event)' onChange='replace(field3)'>");
document.write("<a onClick='expandOut()' id='field3_show'>Text</a><a onClick='clapOut()' id='field3_hide' style='display:none'>Text</a><br><div id='field3div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field4' name='field_testing' size='5' value='' onkeypress='return check(event)' onChange='replace(field4)'>");
document.write("<a onClick='expandTest()' id='field4_show'>Text</a><a onClick='clapTest()' id='field4_hide' style='display:none'>Text</a><br><div id='field4div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("<tr>");
document.write("<td>");
document.write("<hr>");
document.write("<input type='text' id='field5' name='field_effort'size='5' value='' OnFocus='calculate()' onkeypress='return check(event)' onChange='replace(field5)'> ");
document.write("<a onClick='expandEff()' id='field5_show'>Text</a><a onClick='clapEff()' id='field5_hide' style='display:none'>Text</a><br><div id='field5div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("</tbody></table>");

    document.write("</td>");
    document.write("</tr>");
    document.write("</tbody></table>");

Un grand merci à tous ceux qui m'ont aidé à trouver une solution. Faili

Answer 1

Ok, voici quelques conseils semi-aléatoires.

1) Greasemonkey n'est actuellement pas compatible avec jQuery 1.4, utilisez donc jQuery 1.3.2. Incorporez-le dans votre GM script en ajoutant cette ligne à l'en-tête :

// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

.
.
2) Des trucs comme ça :

document.getElementById("huhu").style.display = "none";
document.getElementById("field1_show").style.display = "inline";
document.getElementById("field1_hide").style.display = "none";

.
Devient ceci avec jQuery :

$("#huhu").css          ('display', 'none');
$("#field1_show").css   ('display', 'inline');
$("#field1_hide").css   ('display', 'none');

La version jQuery fonctionnera également beaucoup mieux sur différents navigateurs.

.
.
3) Une référence très pratique sur jQuery se trouve à l'adresse suivante : http://www.jqapi.com/

.
.
4) Voici un exemple de Greasemonkey script avec votre table-create, remaniée à la manière de jQuery. Il fonctionne, tel quel, sur la page d'accueil de Google. Ajustez l'en-tête et TargetNode pour correspondre à votre site cible : ( Attention : Cet exemple de script créera votre tableau, mais vous ne pouvez pas lier l'option onClick s, etc., de cette façon dans un script de Greasemonkey. Voir : Les pièges de GM .)

// ==UserScript==
// @name           jQuery Test/Demo
// @namespace      Google
// @include        *.google.tld/
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

/* Optional:
window.addEventListener ("load", Greasemonkey_main, false);
*/
$(document).ready (Greasemonkey_main);

function Greasemonkey_main ()
{
    /*--- Get the first node inside the id="main" span (Google.com)
        If that's not there, then get the first node of the html body.
    */
    var TargetNode  = $("#main *:first");
    if (!TargetNode)
        TargetNode  = $("body *:first");

    $(TargetNode).after
    (
          "<table border='1' cellpadding='10' cellspacing='0'><tbody>"
        + "<tr>"
        + "<td bgColor='#FFFFDD'>"
        + "<table border='0' cellpadding='0' cellspacing='2'><tbody>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field1' name='field_analysis' size='5' value='' onkeypress='return check(event)' onChange='replace(field1)'>"
        + "<a onClick='show()' id='field1_show'>Text</a><a 'onClick='hide()' id='field1_hide' style='display: none'>Text</a><br><div id='huhu' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field2' name='field_communication' size='5' value='' onkeypress='return check(event)' onChange='replace(field2)'>"
        + "<a onClick='expandCom()' id='field2_show'>Text</a><a onClick='clapCom()' id='field2_hide' style='display:none'>Text</a><br><div id='huhu1' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field3' name='field_outworking' size='5' value='' onkeypress='return check(event)' onChange='replace(field3)'>"
        + "<a onClick='expandOut()' id='field3_show'>Text</a><a onClick='clapOut()' id='field3_hide' style='display:none'>Text</a><br><div id='field3div' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field4' name='field_testing' size='5' value='' onkeypress='return check(event)' onChange='replace(field4)'>"
        + "<a onClick='expandTest()' id='field4_show'>Text</a><a onClick='clapTest()' id='field4_hide' style='display:none'>Text</a><br><div id='field4div' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<hr>"
        + "<input type='text' id='field5' name='field_effort'size='5' value='' OnFocus='calculate()' onkeypress='return check(event)' onChange='replace(field5)'> "
        + "<a onClick='expandEff()' id='field5_show'>Text</a><a onClick='clapEff()' id='field5_hide' style='display:none'>Text</a><br><div id='field5div' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "</tbody></table>"
        + "</td>"
        + "</tr>"
        + "</tbody></table>"
    );
}