I am using VS2012 and trying to use Modernizr in a new ASP.Net 4.5 Web Forms application to display the JQuery datepicker if the browser (IE 11) doesn't support it.
I have made sure that Modernizer, JQuery and JQuery UI NuGet packages are installed. In the Default.aspx page I have added the following script block to the first asp:Content container.
<script type="text/javascript">
if (!Modernizr.inputtypes.date) {
alert("your browser doesn't support date input type");
$("input[type=date]").datepicker();
}
</script>
I can see the alert but the datepicker never shows when I click on the input field which is defined as:
<asp:TextBox ID="TextBox5" runat="server" type="date" placeholder="e.g. 31/12/2014" ></asp:TextBox>
In a simple HTML page it is working fine and I can see the datepicker.
Instead of $("input[type=date]").datepicker(); The following script is working fine in IE 11.
<script type="text/javascript">
if (!Modernizr.inputtypes.date) {
$(function () {
$("input[type='date']")
.datepicker()
.get(0)
.setAttribute("type", "text");
});
}
</script>
It seems that IE 11 has partial support of date that's why we need to change the type back to text after the jQuery datepicker is attached to the input.
Related
I am developing website by using ASP.NET and I am using CKEditor as a richtextbox. In there everythings works fine.
I am using this code to achieve it
<asp:TextBox ID="txtDescription" runat="server" Width="100%" TextMode="MultiLine" Rows="15" AutoComplete="off" ClientIDMode="Static" MaxLength="6000"></asp:TextBox><br />
<script src="//cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></script>
<script type="text/javascript">
window.onload = function () {
CKEDITOR.replace('txtJobDescription');
CKEDITOR.config.htmlEncodeOutput = true;
};
</script>
So everythings works fine.When I save the content of the textbox I am using
HttpUtility.HtmlDecode(txtDescription.Text)
to do it.
Probelem is when I read the saved text from DB and assigned it to Ckeditor text box all the updatepanels in that page are not working.(Which are working properly)
To assign it I am using this code.
DataTable dt=new DataTable
dt = objBLL.Get();
txtName=Text= dt.Rows[0]["name"].ToString();
txtDescription.Text = dt.Rows[0]["description"].ToString();
If I comment the last statement all the updatepanels are working properly.
I tried this with tinymce also. Probelem is same.
Whats wrong with my code?
I am answering to my own question.
You can either set page ValidateRequest=off at the page level. But this will make other textboxes also post HTML content.
So to avoid that use ValidateRequestMode=disabled in specific control.
This will allow only the selected control posting the HTML tags to server.
I use the jquery datepicker. I have the following input in the updatePanel:
<input id="DateMask" type="text" />
and js code:
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$(document).ready(function () {
SetD();
});
Using jQuery:
<script src="/scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.js" type="text/javascript"></script>
When I press enter on my page it clears my input, and I do not post anything to the server. I've managed to solve the problem by writing <asp:textbox> instead of <input>, but why is it so?
and found the topic here
But once again why does it work this way?
This is related to the difference between 'standard' HTML controls, and .NET server controls.
When you use a standard HTML <input> in .net, you are in charge of everything relating to it - quite simply, population of the initial value and later retrieval through Request.Form.
The advantage that the server controls - including, as you've noticed, <asp:textbox> - bring is that the ASP.Net framework now handles most of the messy parts for you. Thus, any text that you enter is available in the code-behind as a property of the object, and when control returns back to the page the textbox is re-populated with the same value it had beforehand.
I'd suggest having a read of a few background topics that discuss this, primarily the ASP.Net server controls overview at http://support.microsoft.com/kb/306459.
I have an asp.net AsynFileUpload control on the page and an html image tag that fires the AsyncFileUpload click event. Works fine in Firefox, Chrome and Safari but not IE.
Example
<script type="text/javascript">
function GetFile() {
document.getElementById("<%=AsyncFileUpload1.ClientID %>").click();
}
</script>
<ajaxToolkit:AsyncFileUpload runat="server" ID="AsyncFileUpload1" />
<img id="flImage1" src="images/upload.png" onclick="GetFile()" />
The uploader works fine in IE if I just use the uploader control. But I need an image on the page that will fire the uploader control click event.
When I click the image that fires the JavaScript GetFile() function, it then calls the click event for the AsynFileUpload control. I can then select my file for upload. Once I select the file I get a JavaScript alert "Access is denied".
Anyone know what the issue is and how to get around it?
Thanks in advance.
I use something like this:
document.getElementById('<%= this.AsyncUpload.ClientID %>' + '_ctl02').click();
I'm completely new to JQuery and MVC.
I'm working on a pet project that uses both to learn them and I've hit my first snag.
I have a date field and I want to add the JQuery datepicker to the UI. Here is what I have done:
Added <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
to the site.master
Inside my Create.aspx (View), I have
<asp:Content ID="Create" ContentPlaceHolderID="MainContent" runat="server">
<h2>
Create a Task</h2>
<% Html.RenderPartial("TaskForm"); %>
</asp:Content>
and inside "TaskForm" (a user control) I have:
<label for="dDueDate">
Due Date</label>
<%= Html.TextBox("dDueDate",(Model.Task.TaskID > 0 ? string.Format("{0:g}",Model.Task.DueDate) : DateTime.Today.ToString("MM/dd/yyyy"))) %>
<script type="text/javascript">
$(document).ready(function() {
$("#dDueDate").datepicker();
});
</script>
As you can see, the above checks to see if a task has an id > 0 (we're not creating a new one) if it does, it uses the date on the task, if not it defaults to today. I would expect the datepicker UI element to show up, but instead I get:
"Microsoft JScript runtime error: Object doesn't support this property or method" on the $("#dDueDate").datepicker();
Ideas? It is probably a very simple mistake, so don't over-analyze. As I said, this is the first time I've dealt with MVC or JQuery so I'm lost as to where to start.
datepicker() is a jQuery UI method, it looks like you are only using jQuery.
You need to download and include jQuery UI in addition to jQuery
Make sure you download the version compatible with jQuery 1.3.2.
You have included jQuery library, but not jQueryUI library. You have to do that with something like this:
<script src="../../Scripts/jqueryui-1.8.1.min.js" type="text/javascript"></script>
You'll need to include JQuery UI as well to get datepicker.
Ok so I'm not very familiar with Jquery as to know the possible cause of this, but I've been assigned to find out why the datepicker doesn't work porperly on a client's computer (it prints out the date without slashes like this: 24112008
So when I test the webform, I see it doesnt even pop up in Firefox (the client's browser too) nor chrome, only in IE8.
In the scriptManager we have:
<script src="http://www.website.com/Script/jquery.min.js" type="text/javascript"></script>
<script src="http://www.website.com/Script/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.website.com/Script/jquery-ui-i18n.min.js" type="text/javascript"></script>
and in the webform:
$(function pageLoad(sender, args) {
// Datepicker
$.datepicker.setDefaults($.extend({ showMonthAfterYear: false }, $.datepicker.regional['']));
$(".dates").datepicker($.datepicker.regional['es']);
});
The textbox that uses it goes like this:
<asp:TextBox ID="txtFeNac" CssClass="dates" style="margin-left: 7px" runat="server" ></asp:TextBox>
I'm not familiar with regionalizing the datepicker but I'll try to help. What do you mean by "it prints out the date without slashes"? The datepicker only runs on the client, so the date format when the page loads is set in the code-behind file when the field is populated or through data binding.
jQuery is usually initialized in $(document).ready or pageLoad in ASP.NET (if there's an update panel present). I'm not sure what the effect of "$(function pageLoad(sender, args)" will be.
I would start by changing the client side code to the following then working in the 'es' regionalization once that works.
$(document).ready(function() {
$('.dates').datepicker({ showMonthAfterYear: false, onSelect: function() {} });
});
The onSelect: function() {} option works around a bug in IE or FF, I don't remember which.
I'm not sure if this relates to your problem or if it's just a piece of confusion on my part: should you have a element that adds the jquery.datepick.js file (or other file with the datepicker plugin) to your page?
I don't see it in your code samples. Is it packaged with jquery-ui in your case?