I am trying to use materialize tool tip for the first time using the example shown on its website. However, the tool tip is not showing up. What am I missing? Here is the link to the fiddle : https://jsfiddle.net/L013uvms/5/
<textarea id="causative_micro_organisms" class="materialize-textarea tooltipped" data-position="top" data-tooltip="I am a tooltip" required="" aria-required="true"></textarea>
<label for="causative_micro_organisms">What are the LIKELY causative Micro-organisms?</label>
I have also initialized the tool-tip
$(document).ready(function() {
$('select').formSelect();
$('.tooltipped').tooltip();
})
as docs of materialize website add these before document ready
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems, options);
});
related link https://materializecss.com/tooltips.html
I cannot make this jsFiddle work but it works in the browser: http://jsfiddle.net/vtortola/jYq2X/
I am trying to add a new custom rule to compare two fields. The custom adapter works, it is being called and setting the options. But the custom method is never called.
I am executing this JS on DOM ready:
$.validator.addMethod("customequal-method", function (val, el, p) {
var $other = $(el).closest('form').find('input[name=' + p.other + ']');
return $other.length && $other.val() == val;
});
$.validator.unobtrusive.adapters.add("customequal", ["other"],
function (options) {
options.rules["customequal-method"] = options.params;
options.messages["customequal-method"] = options.message;
});
$(function(){
$.validator.unobtrusive.parse($('#myform'));
$('[type=button]').click(function(e){e.preventDefault(); $('form').valid();});
$('input[type=text]').blur();
})
These are the fields in HTML:
<input type="text" name="StartDate2" id="StartDate2" value="2"
data-val="true" data-val-customequal="xx xxx" data-val-customequal-other="EndDate2"/>
<input type="text" name="EndDate2" id="EndDate2" value="3"
data-val="true" data-val-customequal="xx xx" data-val-customequal-other="StartDate2"/>
I have been trying different things but nothing seems to work.
Any idea?
Your fiddle is not working because:
all your code runs in the DOM ready so you are adding your custom unobtrusive.adapters.add after the unobtrusive.validator plugin called unobtrusive.parse(document) which registers all the inputs without your custom validator
if you call .validate() multiple times it only registers the rules for the first time and does not override them on subsequent calls. So although you've called unobtrusive.parse again in the DOM loaded this time with the custom adapter added it still won't have any effect.
So you have two ways to fix it:
Register your custom adapters before the DOM loaded event, you can do this with changing your fiddle to use
"No wrap - in <head>"
Demo JSFiddle.
Or
Remove the already added validator object with using $('#myform').data('validator', null) before calling unobtrusive.parse manually:
$(function () {
$('#myform').data('validator', null);
$.validator.unobtrusive.parse($('#myform'));
$('[type=button]').click(function (e) {
e.preventDefault();
$('form').valid();
});
$('input[type=text]').blur();
})
Demo JSFiddle.
I'm working on some internationalization using jQueryUI. I have a DatePicker control on a form that is properly working in the French language.
When I select a date, for example August 15, 2012, the DatePicker will display 15 Aoû, 2012 as I would expect. My issue however, is that when the form is posted, the value of the DatePicker is posted as '15 Aoû, 2012' which now needs to be translated on the server before it can be saved properly.
My question is, is there a built-in way inside the jQueryUI DatePicker so that I can have it always post to the server in a consistent format, regardless of which language the control is being displayed in? If there isn't a built-in way, what options exist for achieving this?
I realize that I can change the dateformat to something like 08/15/2012 instead of using the textual representation, however this isn't what I want to do.
There's 2 configuration options for that: altField and altFormat. http://api.jqueryui.com/datepicker/#option-altField
If you specify an altField, that field will be updated too, and will have the altFormat.
Normally you will want make the altField a hidden field, soyou can ignore the regular field and send to db the altField.
As you'll have noticed, supplying a dateFormat works well for newly entered dates, but it does not alter the value attribute which was already supplied to the date input field. It took me some time and I'm not sure whether this solution is ideal, but here's my situation explained and the code which solves it. Might help others with the same problem in the future. In my example I'm using dd/MM/yyyy as the display format.
The page contains any number of date input fields, which may or may not already have a value attribute supplied in the format yyyy-MM-dd, as specified by W3C.
Some browsers will have their own input control to handle dates. At the time of writing, that is for instance Opera and Chrome. These should expect and store a date in the abovementioned format, while rendering them according to the client's regional settings. You probably do not want/need to create a jqueryui datepicker in these browsers.
Browsers which don't have a built-in control to handle date input fields will need the jqueryui datepicker along with an 'alt', invisible field.
The invisible, alt input field with the yyyy-MM-dd format must have the original name and a unique id in order for forms logic to keep working.
Finally, the yyyy-MM-dd value of the display input field must be parsed and replaced with its desired counterpart.
So, here's the code, using Modernizr to detect whether or not the client is able to natively render date input fields.
if (!Modernizr.inputtypes.date) {
$('input[type=date]').each(function (index, element) {
/* Create a hidden clone, which will contain the actual value */
var clone = $(this).clone();
clone.insertAfter(this);
clone.hide();
/* Rename the original field, used to contain the display value */
$(this).attr('id', $(this).attr('id') + '-display');
$(this).attr('name', $(this).attr('name') + '-display');
/* Create the datepicker with the desired display format and alt field */
$(this).datepicker({ dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" });
/* Finally, parse the value and change it to the display format */
if ($(this).attr('value')) {
var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
$(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
}
});
}
<input type="text" name='fieldName' id="datepicker" value="" style="width: 100px;" />
<script type="text/javascript">
$( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );
$( "#datepicker" ).datepicker();
</script>
It appears someone else had this question or a similar one prior to yours.
If you read this stackoverflow answer, the author was trying to show the date in one format and pass the data to MySQL in another format.
The prior answer in that link gets you set up to access the selected value as a variable. Now all you need is to wire in a parseDate to your selected date variable.
<script type="text/javascript">
$('#cal').datepicker({
dateFormat: 'dd M yy',
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
}
});
</script>
Check the parseDate link for settings and formatting.
Hope this helps!
Basically, you should not re-format the date. Instead, you should read JavaScript's Date object from Datepicker, via getDate() method. Then, you need to pass it to server.
The question is how. Basically, what you want is some common format. If you use JSON the answer is very simple, just put date object and JSON's stringify() function will automatically format it to ISO8601.
As you may see from Wikipedia, ISO8601 was designed to interchange date and time reliably, therefore that's what you should use.
It might be helpful to know that modern web browsers support Date object's toISOString() method.
As #Pawel-Dyda mentioned,
There's a
getDate() method
var currentDate = $( ".selector" ).datepicker( "getDate" );
Here's an example of what it returns: Wed Jan 20 2016 00:00:00 GMT+0300.
You can parse it in Javascript, PHP, in SQL or whatever.
MySQL parsing examlple:
select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');
Returns:
2016-01-20 00:00:00
Solution working for ASP.NET
#using (Html.BeginForm("ActionName", "ControllerName"))
{
#Html.HiddenFor(m => m.DateFrom)
#Html.HiddenFor(m => m.DateTo)
<div class="form-group">
#Html.LabelFor(m => m.DateFrom)
<input id="datepicker-date-from" type="text" class="form-control datepicker" value="#Model.DateFrom.Date.ToString("dd.MM.yyyy")"/>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DateTo)
<input id="datepicker-date-to" type="text" class="form-control datepicker" value="#Model.DateTo.Date.ToString("dd.MM.yyyy")" />
</div>
<input type="submit" class="btn btn-sn btn-primary" value="Download" />
}
#section scripts {
<script type="text/javascript">
$(function () {
$("#datepicker-date-from").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateFrom),
altFormat: "yy-mm-dd"
});
$("#datepicker-date-to").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateTo),
altFormat: "yy-mm-dd"
});
});
</script>
}
I'm displaying some form data in a jquery dialog. Everything works fine when I do this the first time. I can see the "my value" string in the dialog. If I reopen the dialog again for the second time the form value is no longer visible. Check out this jsfiddle to try it out yourself. This is the code:
var dialog;
$("#b1").click(function(){
dialog = $("<div></div>").html("<p><input id='input1' type='text'></p>").dialog({
autoOpen:false,
});
$("#input1").val("my value");
dialog.dialog("open");
});
This bug only happens when I add the html tags dynamically. If I use a static html block everything works fine. Any idea what is wrong here? Thanks!
That is because you are not destroying the old
<input id='input1' type='text'>
so when you call
$("#input1").val("my value");
it sets the value of first
<input id='input1' type='text'>
it finds in the DOM.
I use jquerylive plugin to add additional css classes to .field-validation-error class like this:
$(".field-validation-error").livequery(function () {
$(this).addClass('ui-state-error ui-corner-all');
});
when I get some spans with this class generated by jquery.validate the above code works, but at 2nd validation it doesn't.
here is the live link: http://mrgsp.md:8080/awesome/person
click on create after click save to get validation messages and click again on save
Why not hook your function into the same event that triggers validate()?
Update
I read the other comments and saw you were using xVal, read up a bit on jQuery.Validate as well. jQuery.Validate ties in with many events and registering on the event handlers would be messy. The reason that livequery works first time is that the labels are generated if they don't previously exist so that creation event makes the function run, everytime after this the label is just hidden/shown so it doesn't get triggered again but jQuery.validate's showLabel function resets the classes.
The ideal place is in xVal by making one small change in the xVal.jquery.validate.js file. In the _ensureFormIsMarkedForValidation method are the lines:
ensureFormIsMarkedForValidation: function(formElement, options) {
if (!formElement.data("isMarkedForValidation")) {
formElement.data("isMarkedForValidation", true);
var validationOptions = {
errorClass: "field-validation-error",
All you should need to do is change errorClass to:
errorClass: "field-validation-error ui-state-error ui-corner-all",
This is because xVal is doing the setting up of the validate plugin.
Can you not just the the errorClass option?
$(".selector").validate({
errorClass: "field-validation-error ui-state-error ui-corner-all"
})
Or maybe:
$.validator.setDefaults({
errorClass: "field-validation-error ui-state-error ui-corner-all"
});