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.
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 have a SharePoint List that I wish to view it on a custom aspx file.
The SharePoint List is named - "AM_Code"
Inside the List, there are multiple columns but I just want those rows with the column 'Title' that is not null.
The data will then be displayed on the screen.
The code as follows:
<%# Page Language="C#" %>
<html dir="ltr">
<head runat="server">
<META name="WebPartPageExpansion" content="full">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing JQuery with Sharepoint List</title>
</head>
<body>
<form id="form1" runat="server">
</form>
<script type="text/javascript" language="javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "AM_Code",
CAMLViewFields: "<Query><Where><IsNotNull><FieldRef Name="Title" /></IsNotNull></Where><OrderBy><FieldRef Name="Title" Ascending="True" /></OrderBy></Query>",
completefunc: function (xData, Status) {
$(xData.responseXML).find("[nodeName='z:row']").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
});
});
</script>
<ul id="tasksUL"/>
</body>
</html>
However nothing was being displayed. Please advise if I have miss anything.
CAMLViewFields: "<Query><Where><IsNotNull><FieldRef Name="Title" /></IsNotNull></Where><OrderBy><FieldRef Name="Title" Ascending="True" /></OrderBy></Query>",
this doesn't seem right to me
Actually I found my own answer.
The CAMLViewFields contain the following in order to work:
"<Query><Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where><OrderBy><FieldRef Name='Title' Ascending="True" /></OrderBy></Query>",
Hope it help anyone who is also looking for such solution.
I should be sleeping but this is really bugging me. I can't get a simple javascript alert box to display in my asp.net project. Hopefully someone can see what I'm doing wrong. My test page is this:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="JSTest.aspx.cs" Inherits="Proj.JSTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Header" runat="server">
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" language="javascript" >
$(document).ready(function() {
alert("Working");
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Main" runat="server">
</asp:Content>
The masterpage is pretty standard as well. Here's the header part of it (which I figure is the key bit)
<head runat="server">
<title></title>
<%--<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> --%>
<link href="App_Themes/Default/Default.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="Header" runat="server">
</asp:ContentPlaceHolder>
</head>
I know I must be missing something obvious - probably just need sleep :D. But if anyone can see why this isn't working, that would be great!
Thanks!
Try putting it in another script tag, but without the src attribute.
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
alert("Working");
});
</script>
Or put it in a separate file and include the file using the src attribute.
<script type="text/javascript" language="javascript" src="myJSFile.js"></script>
You are encosing document ready inside the script tag which references jquery. Put that in another script tag like below.
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" language="javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Working");
});
</script>
Should be like...
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" language="javascript" ></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Working");
});
</script>
When you got a bug in javascript code, Firebug and Web inspector will be your best friend.
You can see what's wrong in the page. It might that jQuery library not loaded, the produced HTML contains error, missing tags, etc.
Using Firebug or Web Inspector, you can know what is wrong in the page.
include that script within
<script type="text/javascript>
$(document).ready(function() {
alert("Working");
});
</script>