I'm hoping you can help me with an issue that I can't solve.
When I updated wordpress to the latest version, select2 lost the functionality to show the latest posts.
The above image is the example of what is happening. Instead it should search and show a list of the last posts by default, without the need to write anything.
The javascript code that we built to circumvent the situation should correct this behaviour, but the trigger is not working properly and only works when a key is pressed inside the box.
Question: Has anyone ever had this problem?
$(document).ready(function () {
var select2_open;
// open select2 dropdown on focus
$(document).on('focus', '.select2-selection--single', function (e) {
select2_open = $(this).parent().parent().siblings('select');
$('.select2-search__field').val(' ');
// trigger keydown event, currently not working
$('.select2-search__field').trigger('keyup.search');
});
});
Related
I tried to disable auto focus of input search inside select2 especially on mobile to disable keyboard popup. However, as documented here:
select2 will not be triggering the native events. select2 will also
not be triggering non-native versions of the events, which is less of
an issue as we still have the option to add the native events without
breaking compatibility.
So the only way I could do is to try to get every input box inside select2 that was currently on focused and set lose focus, but has no luck.
$("select").select2().on("select2-open",":input",function(){
setTimeout(function(){
$(":focus").blur();
}, 50);
});
Is there any possibility that I could achieve that result above? Thanks.
Finally, I managed to find solution which works just fine for me as below:
/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
$('.select2-search input, :focus,input').prop('focus',false).blur();
}
$("select").select2().on("select2-open", hideSelect2Keyboard);
$("select").select2().on("select2-close",function(){
setTimeout(hideSelect2Keyboard, 50);
});
Tested on Tablet, and iOS device. In function hideSelect2Keyboard(), I searched for every current focus element, include input field which could be used to initialized select2, setting .prop('focus',false) which will remove focus and consequently disable keyboard popup on select2-open and select2-close event, by chaining .blur() is to remove focus border from element. Then I attached this function to select event open and close and it works just fine.
I hope this will help other who searching for this as me too. Thanks.
I think I've found a solution for select v3 - tested in v3.5.4.
We can use the option shouldFocusInput, which must be a function that should return true or false.
So initialize the plugin with the following code:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
return false;
}
});
});
Codepen demo: https://codepen.io/andreivictor/pen/JmNzvb
If you want to disable the auto-focus only on mobile devices, my approach is to use Modernizr library, which can test for the existence of Touch Events in the browser.
So the complete code should be:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
if (Modernizr.touch) {
return false;
}
return true;
}
});
});
I am not sure why, but the above solutions didn't work for me. But this one worked-
$('select').on('select2:open', function (event) {
$('.select2-search input').prop('focus',false);
});
I am struggling to interact with my google place autocomplete results within my integration tests.
var placeSelector = '.pac-container .pac-item:first-child';
exports.runTest = function(test) {
casper.waitForSelector('input.street-address'); // wait for page to load
casper.sendKeys('input.street-address', 'fake address here', {keepFocus: true});
casper.waitUntilVisible(placeSelector);
casper.then(function() {
casper.click(placeSelector); // THIS DOES NOT DO ANYTHING
// if its possible to trigger the event in the context of the page, I
// could probably do so. However, I've scoured google's docs and cannot find the
// event that is fired when a place is clicked upon.
casper.evaluate(function() {
//google.maps.places.Autocomplete.event.trigger(???);
});
});
var formVal;
casper.then(function() {
formVal = casper.evaluate(function () {
return $('input.street-address').val();
});
});
};
With the previous code, there is no result and the input is not populated nor are the suggested results hidden.
How can I simulate the action of a user entering in an address to the autocomplete input and proceeding to click upon one of the suggested results?
A few resources that I have come across asking similar questions:
How to "simulate" a click on a Google Maps Marker?
https://developers.google.com/maps/documentation/javascript/events?csw=1#EventsOverview
I had this same question. After digging around in the Places Autocomplete source code, I came up with the following, which you can include in your CasperJS test, or modify as needed:
https://gist.github.com/jadell/8b9aeca9f1cc738843eca3b4af1e1d32
casper.then(function () {
casper.sendKeys('input.street-address', 'fake address here', { keepFocus: true });
casper.page.sendEvent('keydown', 0);
casper.page.sendEvent('keyup', 0);
});
casper.waitUntilVisible('.pac-container .pac-item', function () {
casper.page.sendEvent('keydown', casper.page.event.key.Down);
casper.page.sendEvent('keydown', casper.page.event.key.Enter);
});
Basically, don't try to simulate a mouse click on the result, use Down Arrow and Enter keys to select the first result.
The autocomplete listens for key down and up events before triggering, which the sendKeys method does not send, so we send some null key events with sendEvent. Then, wait until the resutls container appears, and send Down Arrow and Enter key events to select the first result.
The autocomplete input element does not have a click event attached, so sending it a click will have no effect.
Try a keydown event:
casper.page.sendEvent('keydown', someKey);
I was unable to simulate the actual clicking of an autocomplete result, however it was possible to accomplish the same result by utilizing the down arrow and enter keypresses.
After typing your text into the autocomplete input and being sure to keep the focus, simply include the following lines of code and your result will be properly set by the google places autocomplete API
casper.then(function() {
casper.page.sendEvent('keypress', casper.page.event.key.Down);
casper.page.sendEvent('keypress', casper.page.event.key.Enter);
});
casper.thenEvaluate(function() {
$(inputSelector).blur();
}, placeSelector, inputSelector);
That code will select the first autocomplete result.
The custom CSS class .btn-loading disables the button and sets its text to loading state:
$(document).on('click', '.btn-loading', function() {
var btn = $(this);
btn.button('loading');
// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
Rollbar.error("Button stuck");
btn.button('reset');
}, 10000);
});
// Be sure to remove any loading state on page refresh
$(document).on('ready page:load', function() {
$('.btn-loading').button('reset');
});
Example button
button type="submit" class="btn btn-primary btn-loading" data-loading-text="Processing..." Continue
When the button is pressed, text is changed to 'Processing...' and the button is disabled preventing multiple submits.
However, sometimes in development and production, the button gets stuck in the loading state and for some reason does not cause the submit and/or rendering of the new page. The setTimeout is firing multiple times a day on the production server. We are having hard times producing the problem on the development consistently.. it happens randomly now and then.
Rollbar's statistics shows that it's not browser specific nor a single button+action that's causing it. So the cause is not a slow server response either.
Any idea what might be causing this and how to fix it?
I faced similar problem some time back and solved the same with a different approach. Try to follow the below steps to solve your problem.
HTML:
Change your button type from “Submit” to “Button”. This will give you full control to execute your scripts.
<button type="button" class="btn btn-default" id=”SubmitButton”>Submit</button>
JQUERY:
On Button Click, you need to disable the button. This will immediately stop users to click again. Then you can change the button text to "Processing". Below script will guide you make it happen.
$(function () {
$('#SubmitButton').click(function (e) {
e.preventDefault();
//Disable Button to avoid multiple clicks
$(this).attr("disabled", true);
// Change the button text to “Processing”
$(this).text(‘Processing’);
// Write Your Validation Scripts
// If Validation Fails - $(this).text(‘Submit’); $(this).attr("disabled", '');
// Else Submit Form
//Submit the Form
$("#targetForm").submit();
})
})
To prevent multiple submit you can use $.one() function also. and add remaining logic.
When the button is pressed, text is changed to 'Processing...' and the
button is disabled preventing multiple submits.
-- Note that there's not part in your code snippet that disables the button.
// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
// if(stuck){
Rollbar.error("Button stuck");
btn.button('reset');
// } // end-if
}, 10000);
-- It looks like your fallback will always be executed. Shouldn't be executed when the button is stuck?
The setTimeout is firing multiple times a day on the production
server.
-- Because your button is never disabled, and because there is no condition restricting it from firing on being clicked.
Moreover, there's no jQuery method like button(). It looks like you're using jQueryUI, which you should have mentioned as well. But jQueryUI + Bootstrap seem like a weird combination, to me.
I'm working on an issue here that only occurs in IE8/9
We have 2 search boxes. One in the header that uses jQuery's Autocomplete, and the other which is specifically for an archiving feature we have on certain pages. What should happen is if the Autocomplete searchbox is in focus and we hit Enter after typing something in, it searches with that value. Easy enough.
However, in IE8/9, no matter which text box has focus, the Enter key will trigger that event.
Here's what we've got:
jQuery(".autocomplete").keydown(function(event) {
if (jQuery(".autocomplete").is(":focus")){
var query;
if (event.which === 13) {
event.preventDefault();
query = this.value;
return window.location.href = "/search?q=" + query;
}
}
});
I've also tried .keypress() and it yields the same result. We're using jQuery 2.0.0
Our team is relatively new to jQuery, so we're probably just doing this wrong.
It should only be firing on searchboxes with the .autocomplete class, and only if that particular box has focus.
Thanks!
I apologize, apparently a different team had added a .js file that was interfering with the operation of this jquery script in our file.
So I have this very simple JS function that selects all the text in the ASP.NET texbox (input):
function selectAllText(textbox) {
textbox.focus();
textbox.select();
}
..and it gets called like this on the click event:
$("#<%=Textbox1.ClientID %>").click(function () { selectAllText(jQuery(this)) });
The problem is no matter how many times a user clicks in the text box all of the text is always selected. I understand why this is occuring (based on the way my code above is), but it doesn't work well when the user tries to click in the middle of a word to get the cursor back to make a modification to the text.
How do I modify this JS to tell if the text is already highlighted and then deselect the text? This was on subsiquient click, the user can get the single cursor on a precise clicked location to make a modification.
I am trying to get the documentation on the .select() method to see if I could do if(!textbox.select()), but I am having a hard time finding it, so post any doc links as well if you have them.
EDIT: This problem and need for a workaround seems to be for IE (I am using IE9). In Chrome the behavior by default is what I need, but this is for an intranet application that runs on IE, so it appears I need an explicit workaround.
Thanks!
Is it necessary to do the .focus() in this function? You could instead attach a simple .select(); to the onfocus event (.bind('focus', function(){..})): http://jsfiddle.net/EGHzj/
Try this
$(document).ready(function(){
$('input').bind('click',function(){
if($(this).hasClass('selected')){
$(this).toggleClass('selected');
}else{
this.focus();
this.select();
$(this).toggleClass('selected');
}
});
});
This should work in IE also,
http://jsfiddle.net/rAqgw/7/
function selectAllText(textbox) {
// if there isn't selected text.
if (textbox[0].selectionEnd) {
textbox.focus();
textbox.select();
}
}
$('#txt').click(function() {
selectAllText($(this));
});
Live DEMO