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.
Related
I am using jQuery UI controlgroup to style checkboxes in an HTML form. After the input values are processed by a PHP script, the results are displayed on the the same page along with the form itself, so that the user can adjust the filters. What I am trying to do, is to have the boxes that were checked previously remain checked after the form has been processed, so that the user sees what selection criteria were used. To achieve that I store all the PHP $_POST data in a JS variable using json_encode, which I'd like to use to iterate through the labels and mark those that were checked previously. The problem is that the only option of the controlgroup widget that I can use is classes with ui-controlgroup-item which shows every single label within the group as active, and for the life of me I cannot figure out how to make it conditional, e.g. so that I can use if(label[for=' + var.value +'])', var being <?php echo json_encode($_POST) ?> or something similar. Will appreciate any suggestions.
Here is the HTML:
<div id="currencyList">
<label for="gbp">GBP</label>
<input type="checkbox" value="gbp" name="currency[]" id="gbp" >
<label for="usd">USD</label>
<input type="checkbox" value="usd" name="currency[]" id="usd">
<label for="eur">EUR</label>
<input type="checkbox" value="eur" name="currency[]" id="eur">
</div>
And this is the JavaScript bit:
$( "#currencyList" ).controlgroup({
classes: {
"ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active"
}
});
After trying to find a solution for several days I decided to skip trying via the classes option and instead to move outside the controlgroup widget. So here is my not-so-pretty-but-working solution:
var postData = <?php echo json_encode($_POST) ?>;
$( "#currencyList" ).controlgroup();
$('#currencyList').children('label').each(function () {
if(postData.currency.indexOf($(this).attr("for")) >= 0){
$(this).addClass( "ui-checkboxradio-checked ui-state-active");
}
});
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;
}
});
});
With knockoutjs and jquery mobile, I need to create a list of checkboxes from an array. It seems the checkbox list is rendered, but it did not respond to click. http://jsfiddle.net/9zx7F/
I used a fieldset tag with data-role of controlgroup to build the list. I tried ul with listview as well, same issue.
Edit: further details - I found it seems related to timing of ko.applyBindings happens. I created a page with same code running on my localhost, it was okay. Then added a timer around ko.applyBindings, the issue happened again. http://jsfiddle.net/gonglei/9zx7F/12/
I solved this with two steps;
1) unwrapping the label from the input and hooking them together with 'for' attribute
<input type="checkbox" data-role="checkbox" data-bind="uniqueName: true, uniqueID: true, value: ID />
<label data-bind="uniqueIDFor: true" >Click me</label>
ko.bindingHandlers.uniqueIDFor = {
init: function (element) {
element.setAttribute("for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
ko.bindingHandlers.uniqueID = {
init: function (element) {
element.setAttribute("id", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
2) telling jqm to update the new content
$('input:checkbox').trigger('create');
I would change the model for this:
<!-- ko foreach: listItems-->
<input type="checkbox" name="itemsList" value="name" />
<span data-bind="text: name"></span>
<!-- /ko -->
the main thing to consider is the "value" property in the input control to render in the proper way.
Regards.
#tredder's solution works! Here's a fork of your fiddle using the attr data-bind attribute to bind the label, which to me looks cleaner: http://jsfiddle.net/aib42/AnKR6/
I've got a checkbox that I want hidden on the page. My obvious first attempt was the following:
<input type='checkbox' style='display:none' />
However, I noticed jquery mobile automagically wraps the checkbox in a div that looks like this:
<div class='ui-checkbox'>
<input type='checkbox' style='display:none;' />
</div>
I would assume that there's some kind of data- element that would prevent this additional styling, but haven't found it in the docs or elsewhere. It's easy enough to override the .ui-checkbox in css to hide it as well, but would prefer a more jquery mobile-standard approach. Does such a thing exist?
The attribute that prevents styling is data-role="none"
<input type='checkbox' style='display:none' data-role="none" />
See the Jquery doc: "Preventing auto-initialization of form elements"
For future users.
Just in case you want to disable for every form element or your forms are loading dynamically where you cannot edit markup use this.
$(document).on('pagebeforecreate', function( e ) {
$( "input, textarea, select", e.target ).attr( "data-role", "none" );
});
I have too many places to change inputs and add data-role="none"
The following code works for me:
<script>
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select,input";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
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);