crazyvonzipper Newbie Poster

Hi al you wonderful daniweb peoplez :)

I am currently on a mission to write some cool javascript / jquery / ajax controls and now i realised that if I call the control multiple times it seems to lose scope.

I realise that this is a small design flaw, and would lie to know how I can correct this? I would like to create new instances for each call.

Here is the javascript that would create the control:

var testProperties = {
    testControlId: '',
    defaultText: 'Hello World',
};

$.fn.watermarkInput = function watermarkInput(newProperties) {
    // Make sure that all settings have been adjusted
    $.extend(testProperties, newProperties);

    // Grab the control to use it over functions without losing scope
    var thisControl = this;

    // Set the default watermark text value
    thisControl.val(testProperties.defaultText);

    // Assing events to clear and repopulate the text for a watermark
    this.focus(function () {
        watermarkInput_onFocus(thisControl);
    });

    this.blur(function () {
        watermarkInput_onBlur(thisControl);
    });
}

function watermarkInput_onFocus(thisControl) {
    if (thisControl.val() === testProperties.defaultText) {
        thisControl.val('');
    }
}
function watermarkInput_onBlur(thisControl) {
    if (thisControl.val() === '') {
        thisControl.val(testProperties.defaultText);
    }
}

And here is the html / javascript that would call the above javascript to create the control:

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="/jquery/jquery.js"></script> <script src="/test.js"></script> <script type="text/javascript">

            $(document).ready(function () {
                $("#txtTestText1").watermarkInput({
                    testControlId: 'myNewWaterMarkInput1',
                    defaultText: 'Hello World 1'
                });

                $("#txtTestText2").watermarkInput({
                    testControlId: 'myNewWaterMarkInput1',
                    defaultText: 'Hello World 2'
                });
            });

        </script> </head> <body> <input id="txtTestText1"> <br><br> <input id="txtTestText2"> </body> </html>

What I basically need is to create new instances for each control like the jquery UI controls would. allowing multiple calls on one page.