Creating a JQueryscript for GM - Trouble by rewriting the JS code

Question

Hello all,

after trying to solve the problem without and with help I'm still stuck. My aim was writing a GM-script with JS. Someone told me to use jQuery because of its simplicity. Well, I started learning JS last week and my head is full of information. What I need is hint/start/beginning/whatever telling me how to rewrite the script into a fine working jQuery-script. Well, I read some manuals, but somehow I just cannot figure it out. It might be that I misunderstood the syntax of jQuery which can't be hard to unserstand. At least I relived the manuals...

This is how the script should work: 1. I created 3 functions. One for checking whether the inputfields contain numbers and only allow digits, commas, points and some controls. A second to replace characters and alert if sth. is badly wrong. The third to sum up four fields and put the result in the fifth. 2.I created two functions for each field. One function hides the text, one function shows the text by clicking 'a'. 3. At least I created a table with all inputfields and text it should contain. 4. By clicking a special button the note appears(I still have to write that...)

It's a big deal for me putting all the information together and writing a good and goodlooking(and I know it is not - yet) script.

I really hope I you can help me. I just need a beginning...

The following is the code I wrote. It won't work in GM because of the used document.write function because of the sandbox, etc. :-(

checks whether the inputfields contain numbers, only allows digits, commas, points and some controls

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;
}

replaces any character by '.',doesn't allow characters at the beginning and end

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();
}

}
}

sums up field1-field4, result appears in field5

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;

}

function to expand and clap information

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";
}

creates a table with all needed and wished structures

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>");

A big thank you to all helping me find a solution. Faili

Answer 1

Ok, here's some semi-random pointers.

1) Greasemonkey currently does not play nice with jQuery 1.4, so use jQuery 1.3.2. Incorporate it into your GM script by adding this line to the header:

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

.
.
2) Stuff like this:

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

.
Becomes this with jQuery:

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

The jQuery version will work much better across different browsers, too.

.
.
3) A very handy jQuery reference is at: http://www.jqapi.com/

.
.
4) Here is a sample Greasemonkey script with your table-create, refactored the jQuery way. It works, as-is on the Google homepage. Adjust the header and TargetNode to match your target site. : (Warning: This sample script will create your table, but you can't bind the onClicks, etc., this way in a Greasemonkey script. See: GM pitfalls.)

// ==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>"
    );
}