DotNetNuke - jQuery - Why is this jQuery Watermark plugin not working?

Question

I'm using DNN 5.4 with the default google api jquery reference:

I have confirmed that jquery.min.js is loading. I don't know if there's other jQuery (other than the plugin) that needs to be loaded.

I'm utilizing the Google Code jQuery Textbox Watermark Plugin (Link)

Web Dev Toolbar & Firebug suggest that both jQuery and the Watermark Plugin are loading. This code is sitting near the top of my skin .ascs:

 <script type="text/javascript" src="/js/watermark/jquery.watermark.min.js"></script>

The following code works (when the inputs are wrapped in form tags) in basic html document. However, when placed inside either a DNN skin or DNN module, it fails to work and generates a javascript here.

<script language="javascript" type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            jQuery("#xsearch").watermark("Leave blank for USA");
        })
    })(jQuery);
</script>

SearchString: <input type="text" id="xsearch" name="xsearch" />
<input type="button" value="search" id="xsubmit" name="xsubmit"   />

The Error (FireBug):

jQuery("#xsearch").watermark is not a function
[Break on this error] jQuery("#xsearch").watermark("Leave blank for USA"); 

This alternate code produces the same error:

<script language="javascript" type="text/javascript">
    jQuery.noConflict();
    jQuery(function () {
        jQuery("#xsearch").watermark("Leave blank for USA");
        jQuery("#xsubmit").click(
            function () {
                jQuery("#xsearch")[0].focus();
            }
        );
    });
</script>

And finally, the same error is produced when I replace jQuery with $

It feels like a conflict of some sort, but I'm lost on what to do next.

Thanks in advance for your time

Answer 1

Hi , I noticed this is because :

<script type="text/javascript" src="/js/watermark/jquery.watermark.min.js">

should be

<script type="text/javascript" src="js/watermark/jquery.watermark.min.js">

If you are having js folder in your skin root. You can see FireBug's net tab to make sure your script reference is loading properly. I'm judging this because I've done lots of dnn development and the link you referenced will become http://www.mydomain.com/tabId/80/js/watermark/jquery.watermark.min.js when http://www.mydomain.com/tabId/80/Default.aspx is served