We Keep Coding

How to use Jquery Number Format plugin within an asp.net TextBox?

I've used this plugin with an html input and it worked with no problems,
however, when I try to implement using an asp.net textbox it doesn't work at all
Does someone know how can I implement it within a textbox from asp.net?
or maybe know if its possible to do so.
This is what I want to achieve using an asp.net textbox:
http://opensource.teamdf.com/number/examples/demo-as-you-type.html
Thank you so much, I really hope someone can enlighten me
UPDATE: code added.
asp.net control:
<asp:TextBox ID="txtNumberFormat" runat="server"></asp:TextBox>
References:
<script type="text/javascript" language="javascript" src="../../js/jquery.number.js"> </script>
<script type="text/javascript" language="javascript"src="../../js/jquery.number.min.js"></script>
JavaScript Code:
<script type="text/javascript">
$(function(){
$('#txtNumberFormat.ClientID').number( true, 2 );
});
</script>

Your jQuery is looking for a control that is literally named "txtNumberFormat.ClientID". You need
$('#<%= txtNumberFormat.ClientID %>').number( true, 2 );
so asp.net resolves the fully qualified client id inside your selector.

jquery watermark not working after form.reset

I have jQuery WaterMark on Textbox field. Link
When user click on Refresh button i am trying to reset the form with clearing textbox from codebehind. It clear perfectly but it also don't show the WaterMark
May be it is that watermark works on OnBlur event and it is not firing.
Using that in the head tag (Note: nothing in the asp textbox)
<script src="../../jquery/watermark/jquery.watermarkinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#txtAccounts").Watermark("Type something to search Accounts", "gray");
});
</script>
Edit:
It is also not working after any post event

According the website you've provided, are you using the $.Watermark.ShowAll(); after the reset of your form?
Update
If you are able to move the reset to the clienside, you can use the ShowAll(); like this:
<script src="../../jquery/watermark/jquery.watermarkinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#txtAccounts").Watermark("Type something to search Accounts", "gray");
});
$("#TheIdOfYourButton").click(function(){
$("#TheIdOfYourForm")[0].reset();
$.Watermark.ShowAll();
});
</script>

Second JavaScript code is always overriding the first

I am using 2 separate JavaScript refs...see below...
<script src="../scripts/jsKeyboard.js" type="text/jscript"></script>
<script src="../scripts/DOB_Validate.js" type="text/jscript"></script>
I am calling each Javascript through an onfocus event using two seperate asp:Textbox...see below:
<asp:Textbox id="txtFirstName" runat="server" onfocus="jsKeyboard.focus(this);clean(this);" placeholder="Touch Here To Enter First Name" autofocus top="50%"></asp:Textbox>
<asp:TextBox ID="TextBox1" runat="server" onfocus="board.focus(this);clean(this);" placeholder="MM/DD/YYYY"
maxlength="10" Width="5%"></asp:TextBox>
I have two scripts inside the head of the page that initialize the keyboard with the corresponding .js external ref (see two separate .js scripts above)...
Scripts inside head:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
});
</script>
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
});
</script>
However...the second script inside the head is always overriding the other...
How can I fix this issue??? Thank you...

Both of your functions look exactly the same. I am going to assume you want the same functionality for both? If that's the case, you are hooking into the same element 'txtContent'. You need to have the other script hook into 'TextBox1'.
For txtContent:
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
$("#txtContent").val(initText);
});
</script>
And TextBox1:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
$("#TextBox1").val(initText);
});
</script>
You also may want to consider changing the name of TextBox1.

JavaScript works locally but not when deployed to webserver

I'm deploying some code to a website and when I do the JavaScript does not run. I get the error:
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object.
The code it is using is
#model MVCMasterDetail.DataAccess.cwwoLoadCurrentWorkOrderActualsResult[]
<script type="text/javascript">
$(document).ready(function () {
$(".grid-toggle").click(function () {
$(this).closest("table").find("tbody").show();
});
$(".hide-rows").click(function () {
$(this).closest("table").find("tbody").hide();
});
});
</script>
#Html.Partial("MasterDetailMasterPartial")
And what calls uses it is:
<td colspan="4"> Details<br/>Show- Hide</td>
Any help is appreciated.

Based off your comment in Ashley Ross's answer, it looks like your trying to add jQuery using a relative path. it also looks like you're using MVC. In MVC, the way you want to reference a file in html is:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")"></script>
Also, it doesn't matter if your script tag goes in the head tag or not. The only difference it makes is loading. By putting it in the head tag, you're telling the browser to download the js file before it begins to load the body, which can be nice, but can also increase page load times. For faster page download, you actually want to put your script tags towards the bottom of your body tag, which defers downloading the js file until after the rest of the page has loaded. This results in faster page load times, but can cause some funky behaviors if you aren't anticipating it.

You need to include jQuery before any other scripts. It sounds like you have something like
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
instead of
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
Check that it appears in your HTML source before any other scripts that use it.

you have to add reference to jquery lib in <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

fancyBox and aspx c# integration

Trying to get my head around how to integrate fancyBox with an aspx c# website.
For example where does this code go:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
the Site.master page? or each individual .aspx file?
How about this one:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
I assume this goes in the html part:
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

Put this between the <head> tags on the master page.
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
I'd put this on your page
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
and then your link and images etc, where you need them.

You can place it on Master page one time, and there is no problem if you do not have any fancybox class on the page.
All the script code, go on master page, the html code can be anywhere (master or other pages that use the master).

When you have downloaded the fancybox it comes with a bunch of samples right click on the .html page and view the source that makes you easier how to use them.
Here is the demo for you