i linked the style from the cdn
but no one icon is showed
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.common.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.light.css" />
<button id="myButton">click here</button>
$("#myButton").dxButton({
icon:'add'
});
do i need some other files to include?
i forgot something or i need something else
It works for me if there is nothing inside the button html element:
<button id="myButton"></button>
To set the button text, configure it in the button configuration like this:
$("#myButton").dxButton({
icon: 'add',
text: 'click here'
});
$("#myButton").dxButton({
icon: 'add',
text: 'click here',
type: 'default',
onClick: (ev) => alert('clicked')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.light.css" rel="stylesheet" />
<link href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.common.css" rel="stylesheet" />
<script src="https://cdn3.devexpress.com/jslib/17.1.5/js/dx.all.js"></script>
<button id="myButton"></button>
Related
This is my JS for the datepicker.
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
This is my asp server side control.
<asp:TextBox ID="txtage" runat="server" ReadOnly="true"></asp:TextBox>
I want when user reach on this textbox then one calender should open from which they can select age and that date should display into this textbox.
Please tell me how can i do this?
You have several problems. Your ID doesn't match. You're using txtage in one place and txtcity in another. Is that a copy paste error?
If you're using nested templated controls (or a master page), your ID's on the client side are likely different than on the server side. You can change how the ID's on the client side are generated like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
<td><asp:TextBox ID="txtage" runat="server" ClientIdMode="static" /></td>
You also haven't shown your code for making sure jQuery and jQuery UI are loaded on the page.
I just checked and this one works perfectly :
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testDatePicker.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="myTextBox"></asp:TextBox>
</div>
</form>
</body>
</html>
script.js
$(function() {
$("#myTextBox").datepicker();
});
I may advice you to remove the ReadOnly proprety since the datepicker will try to modify the textBox but not so sure.
Just add .ClientID with the textbox id as follows.
JS
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#<%=txtage.ClientID%>').datepicker();
});
});
Asp.Net takes a property that is TextMode That loads a calendar, which has to be equal "Date" - TextMode="Date".
Example:
<asp:TextBox ID="txtage" TextMode="Date" runat="server" ReadOnly="true"></asp:TextBox>
In the webform with sitemaster, i couldnt use the function of pikaday,but in the new webform i created for testing without sitemaster i could use the function. How do i solve the problems?
With sitemaster:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<link href="css/pikaday.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script>
var picker = new Pikaday({
field: document.getElementById('TextBox1'),
firstDay: 1,
format: 'YYYY-MM-DD',
minDate: new Date('2015-01-01'),
maxDate: new Date('2050-12-31'),
yearRange: [2015, 2050],
numberOfMonths: 1,
});
</script> </asp:Content>
Without sitemaster:
<body>
<form id="form1" runat="server">
<div>
<link href="css/pikaday.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script>
var picker = new Pikaday({
field: document.getElementById('TextBox1'),
firstDay: 1,
format: 'YYYY-MM-DD',
minDate: new Date('2015-01-01'),
maxDate: new Date('2050-12-31'),
yearRange: [2015, 2050],
numberOfMonths: 1,
});
</script>
</div>
</form> </body>
i have exactly the same problem and after doing research I found out the following: it seems that there's a css property that needs to be changed on the pikaday.css file, specifically on line 35:
.pika-single.is-bound{position: absolute !important}
Just add the !important next to the "position: absolute" statement.
Also in your javascript you have to reference the textbox like this:
var $txtDate = $("[id$=Client_Id_Generated_by_Aspx_page]")
This selector will find the reference of the textbox ID that you assigned on the ASPX page on your IDE (for example Visual Studio) at the end, according to the "$=" operator. This applies for .Net Frameworks 3.5 or less since it seems that on .Net Framework 4.0 or more there is a way to assign a ClientID on the server side for you to use it on the frontEnd (.js files for example).
I hope this will help you.
Cheers...
I have a content page in ASP.Net web app.
In that I am trying to use Jquery UI Autocomplete. But it does not work. What is wrong in this page? Here is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="contentMainBody" runat="server" >
<link href="Atlas_Css/menu.css" rel="stylesheet" type="text/css" />
<link href="Atlas_Css/jquery.simplyscroll.css" rel="stylesheet" type="text/css" media="all" />
<link href="Atlas_Css/Jquery%20UI.css" rel="stylesheet" type="text/css" />
<script src="JS_AtlasFly/jquery.js" type="text/javascript"></script>
<script src="Scripts/Validations.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.min.js" type="text/javascript"></script>
<script src="JS_AtlasFly/js-image-slider.js" type="text/javascript"></script>
<script src="JS_AtlasFly/accordian.pack.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-1.9.1.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function ()
{
var availableTags = [ <%= PassFname %> ];
$("#txtFname" ).autocomplete({
source: availableTags
});
}
</script>
<div id="testDiv" runat="server">
<asp:Label ID="lblName" runat="server" Text="F Name"></asp:Label> <asp:TextBox ID="txtFname" runat="server"></asp:TextBox>
</div>
NOTE: the server side variable, PassFname, I am populating in code behind .
In a normal asp.Net page , without using master page (within the same project), Autocomplete works fine.
What is wrong in this page? is it because of master page?
What is the solution for this?
Since the same code behind code works in another page, I am not including it here. I have checked it here also, the string variable is populated on page load. Only autocomplete is not binding.
Any help will be appreciated.
I found the solution to this. I used the clientId of the TextBox directly in
Javascript.
like this:
$("#ctl00_contentMainBody_txtFname").autocomplete({
source: availableTags
});
that solved the binding of autocomplete with the textbox's id.
BTW, using <%=txtFname.ClientID%> doesnot solve the issue. Instead the page stops rendering.
So I used the client Id from page source, and it works.
Thanks to all
I wish to bring attention to fields which have not passed model validation. In the case of a textbox, for example, could a red asterisk be printed?
Such as: #Html.EditorFor(m => m.UserName)<span title="The User Name is required.">*</span>
Have you tried something simple like this:
#Html.ValidationMessageFor(model => model.UserName, "*")
You need the following scripts:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
I am trying to implement a word count feature on some of my text areas that have been converted to wswgs' using ckeditor tutorial found here: http://www.n7studios.co.uk/2010/03/01/ckeditor-word-count-plugin/. This tutorial uses a custom plugin to count words for ckeditor. I get the correct word count but I am not able to see the color change to red when I surpass the maximum number of words allowed. I have used firebug to see how my text area looks like after it has been transformed into a wswg using ckeditor but I don't see anything strange. Here is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
$(document).ready(function () {
$(".cke_editor").ckeditor({
toolbar: 'custom'
});
});
<div class="form-row form-row-inline">
<%: Html.TextAreaFor(model => model.AssignmentText, new { #name = "table", #class = "cke_editor", #style = "display:none", #onchange = "setDirty(true)" })%>
<input name="tableWordCount" type="hidden" value="10" />
</div>
Here is the screen:
Any help greatly appreciated.
I finally figured it out. Html.TextAreaFor() asp.net mvc helper method takes, as a parameter, an object of html attributes as shown on the question code above. I originally had used the "name" property for the textarea so that it matches the "name property" on the ckeditor word count plugin. I had to instead use the "id" property.
ckeditor sample:
<html>
<head>
<title>CKEditor Word Count Demonstration</title>
<script type="text/javascript" src="jquery/jquery.1.4.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form action="#" method="POST">
<p>
<label for="content">Content with 250 word limit</label>
<textarea name="content" class="ckeditor">Lorem Ipsum.</textarea>
<input type="hidden" name="contentWordCount" value="250" />
</p>
</form>
</body>
</html>
my new fixed code:
<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
$(document).ready(function () {
$(".cke_editor").ckeditor({
toolbar: 'custom'
});
});
<div class="form-row form-row-inline">
<%: Html.TextAreaFor(model => model.AssignmentText, new { #id = "taxta", #class = "cke_editor", #style = "display:none", #onchange = "setDirty(true)" })%>
<input name="taxtaWordCount" type="hidden" value="10" />
</div>
So, the only thing I had to change is the "id" property. I hope this helps others. Again, Firebug was very helpful in delving through the html DOM and looking at how everything is rendered on the browser.