how to use javascript in a jquery based jsfiddle?

Question

i am working on a jsfiddle and have selected that the framework used is 'onload, jquery 1.8.2'.

i have also called in the following resources:

jquery.multipage.js
jquery.validate.min.js

both these scripts, as well as the html and css defined in jsfiddle, are outputting the expected results.

i am also however trying to add some pure javascript to achieve some onfocus and onblur effects.

my question is:

with the above environment, how do i add the following javascript to the jsfiddle:

<script type="text/javascript">
function clearText(field){
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>

the jsfiddle in its current state is here:

http://jsfiddle.net/eJKQn/139/

thank you.

jQuery _is_ JavaScript. There's no difference. It's like asking if you can use PHP in a WordPress theme. — powerbuoy, Oct 10 '12 at 05:00

score 1 · Accepted Answer · answered Oct 10 '12 at 04:58

1

window.clearText = function(field){
   if (field.defaultValue == field.value) field.value = '';
   else if (field.value == '') field.value = field.defaultValue;
};

The window object is your true global namespace, which you can reference to define variables and functions w/in other enclosures. Use the above, notice the only thing that changed is the first line and the semi-colon at the end.

answered Oct 10 '12 at 04:58

vol7ron

40,809
21
119
172

thank you very much, this worked perfectly! updated jsfiddle: http://jsfiddle.net/eJKQn/141/ – user1063287 Oct 10 '12 at 05:02

score 0 · Answer 2 · answered Oct 10 '12 at 04:54

I don't think it matters where or how you add the pure Javascript. If you do need to do this (mostly in your own app), separate jQuery and Javascript like

// pure Javascript
function clearText(field){   
    if (field.defaultValue == field.value) field.value = '';   
    else if (field.value == '') field.value = field.defaultValue;   
}

// jQuery
$(function() {
    // all your jQuery scripts
});

score 0 · Answer 3 · answered Oct 10 '12 at 04:56

0

Use 'no wrap (head)' for this script then manually write onload or ready functions for jquery

answered Oct 10 '12 at 04:56

Zahid Riaz

2,879
3
27
38

score 0 · Answer 4 · answered Oct 10 '12 at 04:58

Inside Script tag you can freely use both jQuery and Javascript together

There are two major rules as far as i know

Anything inside document.ready will become private. So , the scope will be limited
the jQuery object is a wrapper of javascript normal object. So , little care has to be taken when mixing javascript and jQuery

how to use javascript in a jquery based jsfiddle?

4 Answers4