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.