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.

Bootstrap Date and Time Picker not showing icons in MVC Razor

I´m trying to setup a date and time picker, but the icons (Calendar and Time) does not shows up. Here is my code:
<link href="#Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<div id="datetimepicker1" class="input-append date">
Date and Time Test
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
I´ve tried to change icon-time and icon-calendar to glyphicon-time and glyicon-calendar and no success.
Here is what I get:
Don´t know what to do.. I need help, please. Thanks.

The website for the tarruda bootstrap-datetimepicker.js that you are using says the plugin is not currently maintained. It does not appear to have been upgraded for Bootstrap 3.
I'd suggest one of these date/time picker plugins that are compatible with Bootstrap 3:
http://eonasdan.github.io/bootstrap-datetimepicker/
http://www.malot.fr/bootstrap-datetimepicker/
And if you really want to get the one you are using to work, you can try making manual changes to the JS and CSS. Follow the blog post "Datepicker for Bootstrap with Twitter Bootstrap 3.0" found at kenyontechnology. The post was written for the date-only plugin on which the date/time plugin you are using was forked, so I think the changes should mostly apply.

Textbox not show datepicker with javascript?

I'm using DevExpress develop my website...Now i'm use Aspxtextbox with jquery to display datepicker. I don't use AspxDateEdit because i can't apply my css...Here is my code:
Javascript
$(function () {
$("#<%= txtDate.ClientID %>").datepicker(
{ dateFormat: 'dd/mm/yy', minDate: 0 })
});
ASPX
<dx:ASPxTextBox Native="true" CssClass="span3" runat="server" ID="txtDate">
<ValidationSettings ErrorDisplayMode="Text" ErrorFrameStyle-ForeColor="Red" Display="Dynamic" ErrorTextPosition="Bottom" SetFocusOnError="true">
<RequiredField IsRequired="True" ErrorText="The value is required" />
</ValidationSettings>
</dx:ASPxTextBox>
When i view source code, input id = ContentPlaceHolder1_ctl00_txtDate..What's wrong in my code?

For the datepicker to work you need to reference both jQuery and THEN (note the order) -> jQuery UI.
So it will be something like this:
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/yourapp.js"></script>
I hope this helps.
EDIT
Also, not sure if the textbox ID is actually trimmed, so try to remove the spaces:
$("#<%=txtDate.ClientID %>")

Using tabs in asp.net mvc with jquery ui

I am trying to create tabs in my mvc application using jquery ui.
I tried the following code:
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li>Exploded pie slice</li>
<li>Normal pie chart</li>
</ul>
<div id="tabs-1">#(Html.Partial("PartialView1"))</div>
<div id="tabs-2">#(Html.Partial("PartialView2"))</div>
</div>
I saw something like the above code in jquery ui demo. Please advice me what I'm missing in my code because I only get two links instead of tabs and my two partial view pages are displayed in the index page.
Thanks,
Anandaraj

You haven't included the jQuery UI CSS file.
Either use the default skin, or pick one, or even build your own.
Bear in mind that you'll need all the images too, so follow my second link to download the whole theme (either an existing one or one you have built).

c# how to enable button ontextchange without posting back

so i have a lightbox in which pops up an aspx page with textboxes and two buttons (submit - disabled and cancel - enabled). I wanted to enable my submit button ontextchange. it works fine when opened separately (not as a lightbox) but when i let it run normally with the lightbox function everytime ontextchange gets triggered the whole page refreshes disabling the lightbox.
<asp:TextBox ID="textBox1" runat="server" OnTextChanged="OnTextChanged_AttributesEdited" autopostback="true">
protected void OnTextChanged_AttributesEdited(object sender, EventArgs e)
{
btnSubmit.Enabled = true;
}
now if i take out the "autopostback=true" it then will not trigger the the ontextchanged. was wondering if is it better if javascript will be the way to go for enabling the button or is there a way where i can prevent the postback when ontextchanged is triggered?
thanks a lot!

I think this would be a prime use for some jQuery in your application. Without posting back to the server for enabling / disabling a button, this would look a lot smoother, load faster and keep your current page state intact. An example might be as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#textBox1").change(function() {
$("#btnSubmit").removeAttr("disabled");
});
});
</script>
Just put the above script tag in your HTML, just before closing the body tag.
An even better solution, however, would be to assign a specific CSS class to all the textboxes that should inherit that behaviour. Assuming that you assign a CSS class called "someCssClass" to all those textboxes, your script would then look something like this:
<script type="text/javascript">
$(document).ready(function() {
$("input.someCssClass").change(function() {
$("#btnSubmit").removeAttr("disabled");
});
});
</script>

I'd use jQuery as mentioned by #FarligOpptrenden, but if you don't have it and just want plain javascript, this should work.
Input within your lightbox:
<input type="text" id="textbox" onKeyUp="enableSubmitButton()" />
<input type="button" id="submitButton" value="Submit" />
<input type="button" id="cancelButton" value="Cancel" />
Javascript:
<script type="text/javascript">
function enableSubmitButton()
{
document.getElementById('submitButton').disabled = false;
document.getElementById('cancelButton').disabled = true;
}
</script>
You could also do your enabling/disabling buttons on load in javascript:
<script type="text/javascript">
window.onload = function () {
document.getElementById('submitButton').disabled = true;
document.getElementById('cancelButton').disabled = false;
}
</script>