I have a small issue but I cant seem to find the solution, currently im working on and app that uses Select2.js for DropDowns. It works fine and everything but it is currently filtering data using 'Contains' and I want it to filter using 'StartsWith' but I've looked at the documentation and inside the JS file and cant seem to find how to do it, anyone has any ideas of what should I do?
Thanks for your help!!
<input id="select2" class="input-xlarge" data-bind="value: selectedChoice, select2: { choices: choices, optionsValue: 'Id', optionsText: 'Description', placeholder: '--Select a Client--', minimumInputLength: 0, allowClear: true, focusElement: 'ContinueBtn' }, hasfocus: loaded" />
Related
I am working on code written by someone else.
Its a Reset Password form. The current client side validation works on most browsers including IE 10 and IE 11. On IE 9 the Confirm Password does not match error keeps getting displayed even though I am sure I am typing the exact same thing in both fields.
The code:
<div class="form-group">
<div class="input-group input-phone">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="Password" name="Password" class="form-control input-lg default-focus" data-val="true" data-val-required="Password is required." placeholder="Password" autocomplete="off">
</div>
<div class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></div>
</div>
<div class="form-group form-group-login-bottom">
<div class="input-group input-pin">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control input-lg" data-val="true" data-val-equalto="Confirm Password does not match." data-val-equalto-other="*.Password" placeholder="Confirm Password" autocomplete="off">
</div>
<div class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></div>
</div>
I searched a lot yesterday but none of the solution seems to work.
I tried: updating the jquery.validate.js and jquery.validate.unobtrusive.js files.
I tried debugging, in the jquery.validate.js file, this snippet,
// http://docs.jquery.com/Plugins/Validation/Methods/equalTo
equalTo: function( value, element, param ) {
// bind to the blur event of the target in order to revalidate whenever the target field is updated
// TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
var target = $(param);
if ( this.settings.onfocusout ) {
target.unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
$(element).valid();
});
}
return value === target.val();
},
target is the input field with id Password. On IE 10 and IE 11, alerting target.val()
returns the correct value of type in. On IE 9 it returns empty. Cannot figure out why it does not work on IE 9 specifically. Any suggestions would be helpful.
What versions of jQuery, jQuery validate and ASP MVC are you using?
I just created a fiddle using your html and including the latest versions of those libraries (jquery 2.1.0, validate 1.13 and validate-unobtrusive from MVC 5). I verified the validation works on IE9 (Mine is version 9.0.8112.16421)
However I have found this issue which means you may find this error in IE9 with incorrect html on your page. You could make sure you don´t have any open tags (like a <p> without its corresponding </p>). For example if in the fiddle you just add a <p> right before the <form> the validation stops working in IE9 but not in Firefox. (See this updated fiddle that doesn´t work on IE9)
In case this doesn´t help, I would check the library versions and any other library that you might be loading in your page that could interfere (If you could replicate your issue in a fiddle that would be great!). If nothing helps, you can try removing the validate-unobtrusive library from the fiddle (it is added on external references) and uncomment the JS code to manually use the validation plugin. At least that would let you find out if the issue is related with jquery.validate or with Microsoft´s jquery.validate-unobtrusive:
//This is commented in the fiddle. Only uncomment to try jquery.validate without jquery.validate-unobtrusive
$(document).ready(function () {
$("#testForm").validate({
debug: false,
rules: {
Password: {
required: true
},
ConfirmPassword: {
required: true,
equalTo: "#Password"
}
},
submitHandler: function (form) {
// just for the fiddle demo
alert('valid form submitted');
return false;
}
});
});
I've been looking every where, and the tutorial doesn't seem to work when I use it. I saw something like getfullmonth, getfullyears etc. ... anyway, I'm using this code:
My js:
<script>
YAHOO.namespace("example.calendar");
YAHOO.example.calendar.init = function() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", {PAGES:1});
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
</script>
And this is my HTML:
<input type="text" value="I WANT TO PUT THE SELECTED DATE HERE" id="datechoix" class="n-input2" name="datechoix" readonly="readonly" />
<div id="cal1Container" style="margin-top:15px;"></div>
Anyone got a good tutorial or a complete answer maybe?
You have to listen to the select-date-event. It fires if a user selects a date and holds the date information as arguments.
See this example:
http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/button/btn_example09.html
When I was using the DateBox1 I had this code to use the slidebox only for months and days:
<input name="calendarDaily" id="calendarDaily" type="date" data-role="datebox"
data-options='{"mode": "slidebox", "fieldsOrderOverride":["m","d"], "noButton": true, "centerWindow":true, "useInlineHideInput":true}' />
But with Datebox2 this options doesn't work and in this web http://dev.jtsage.com/jQM-DateBox2/demos/fullopt.html there is no reference to the options I want!
How can I with DateBox2 to do the same with the old Datebox1?
Thank you!
Check internationalization / localization section for more settings.
There's a slideFieldOrder setting, i.e. field order for slide mode, e.g. ['y', 'm', 'd']
I have a jQuery-UI autocomplete function that is loaded before the form it applies to is loaded.
$('#groupset').autocomplete({
source: 'ajax/php/leeruns.php',
minlength: 2,
select: function(event, ui) {
if(ui.item.groupset_id){
$('#groupsetdesc').val(ui.item.description);
if(groups.loaded!=ui.item.groupset_id)groups.load(ui.item.groupset_id);
} else {
$('#groupsetdesc').val('');
}
}
});
The relevant html is:
<div><label for='groupset'>Groupset Name</label>
<input name='filename' id='groupset' type='text' value='' ></div>
<div><label for='groupsetdesc'>Groupset Description</label>
<input name='groupsetdesc' id='groupsetdesc' type='text' value=''></div>
If I type "gr" into the input box, Firebug tells me that this JSON is returned:
[{"value":"Group_by_Column",
"groupset_id":"1",
"description":"12 groups, each of 8 wells from one column",
"create_date":"2010-02-24 13:27:26"},
{"value":"Group_by_Row",
"groupset_id":"2",
"description":"8 groups of 12 wells, each from 1 row",
"create_date":"2010-06-02 14:36:33"}
]
I expect to see a faux-dropdown including the entries returned from the autocomplete function. But no choices show up. This is replicable in IE8 and FF4. Any idea what I'm missing?
jQuery v1.5.1
jQuery-UI 1.8.11
This was a beast to solve as the problem wasn't with the autocomplete code at all. On the same page, I was also loading the jQuery validate plugin . Version 1.7 of validate has some sort of incompatibility with autocomplete. Once I upgraded validate to v1.8, autocomplete worked again.
I hope this helps someone else.
I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);