Pretty sure i'm going the complete wrong direction with this. I want to click an object, then delete it by pressing the 'd' key.
<script>
$('#In_Play .card').click().keypress(function(event) {
if (event.keyCode == '100') {
$(this).remove();
}
});
</script>
I think something like this would work:
$('#In_Play .card').click(function(){
$(this).data('delcandidate', true).focus();
}).keypress(function(event){
if($(this).data('delcandidate') == true && event.keyCode == '100'){
$(this).remove();
}
}).blur(function(){
$(this).data('delcandidate', false);
});
the thing is keypress will only be fired on elements that can have focus (inputs, a). I think you can extend this to other elements by adding a tabindex but im not sure how cross browser any of this is going to be.
Related
I am using the area select plugin. By default it responds to a ctrlKey box drag. And by default Leaflet boxZoom responds to a shiftKey box drag. All good so far. However a ctrlKey + shiftKey box drag triggers the Leaflet boxZoom and the area select plugin. I would like it to trigger just the area select plugin instead. Any suggestions?
If you have a look at Leaflet's source code for the BoxZoom map handler, you can see the line where it checks for a pressed shift key plus primary (""left"") mouse/pointer button to start the box zoom:
_onMouseDown: function (e) {
if (!e.shiftKey || ((e.which !== 1) && (e.button !== 1))) { return false; }
And you want to change that to check for ctrlKey, so that the box zoom doesn't start if it's set to true, something like:
if (!e.shiftKey || e.ctrlKey || ((e.which !== 1) && (e.button !== 1))) { return false; }
The question is how to do this without rewriting or breaking up everything. An approach is to monkey-patch that method from the BoxZoom handler's prototype while keeping a reference to the old one, e.g. something like:
var oldBoxZoomMouseDown = L.Map.BoxZoom.prototype._onMouseDown;
L.Map.BoxZoom.prototype._onMouseDown = function(ev) {
// Worry only about ctrlKey...
if (ev.ctrlKey) { return false; }
// ...and let the previous event handler worry about shift and primary button
oldBoxZoomMouseDown.call(this, ev);
}
Note that it'll work only when done before the map has been instantiated. There are other approaches, such as replacing the method of the BoxZoom instance after the map has been instantiated, and creating a subclass of the BoxZoom handler. Reading about javascript's prototypal inheritance and Leaflet's way of dealing with OOP is recommended at this point.
I have this code in my Custom code section of an event based rule in DTM. I am trying to fire the rule upon the Enter key press. The input is not within a form element. How to I get the Keycode scoped into my custom page code? Any help would be appreciated!
jQuery(this).keypress(function (e) {
if (e.keyCode == 13) {
var frmData = 'search:new:submit';
var inpData = jQuery(this).siblings('input').val().trim().toLowerCase();
_satellite.setVar('frmData', frmData);
_satellite.setVar('inpData', inpData);
return true;
}
});
I got it to fire by switching the event type to Keypress and using this simple code. -cheers
if (event.keyCode == 13){
return true;
}
in bootstrap-tagsinput on press enter key for next tag form is submitted!
what is the solution?
$("#inputID").tagsinput();
First, you'll want to map 'Enter' to your tagsinput's confirmkeys option, then you'll need to call preventDefault() on your enter key to prevent the form from being submitted. In my solution, it only prevents submission by enter key while the user is focused in the tags input field.
To add a bit of redundancy, I also re-map the enter key to a comma in the input field, just to be sure.
$('#tags-input').tagsinput({
confirmKeys: [13, 188]
});
$('#tags-input input').on('keypress', function(e){
if (e.keyCode == 13){
e.keyCode = 188;
e.preventDefault();
};
});
Just also an FYI, Enter key is mapped as 13, and comma is 188 in JS.
Try this:
$('.bootstrap-tagsinput input').keydown(function( event ) {
if ( event.which == 13 ) {
$(this).blur();
$(this).focus();
return false;
}
})
Go to tagsinput.js
Find line:
self.$container.on('keypress', 'input', $.proxy(function(event) {
Before the end of this function add following:
if (event.which == 13) {
return false; // dont submit form !!
}
Enter key is register for postback form . that's why a case has been happened that when you hit 'enter' key it trigger the 'postback' event so the form goes to submitted .
solution :
on page load reserve the enter key for tag input :
#using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { onkeydown = "return event.keyCode!=13" }))
if using asp.net mvc framework this is a simple example .
This work for me
$('.bootstrap-tagsinput input[type=text]').on('keydown', function (e) {
if ( event.which == 13 ) {
$(this).blur();
$(this).focus();
return false;
}
});
The cancelConfirmKeysOnEmpty option is set to true by default, but when set to false calls .preventDefault on the tag delimeter keydown event. Set it to false.
This solution also fixes the issue of a "carried comma".
cancelConfirmKeysOnEmpty: false,
// If the field is empty, let the event triggered fire as usual
if (self.options.cancelConfirmKeysOnEmpty === false) {
event.preventDefault();
}
I'm a beginner/intermediate level developer/programmer. I've got jQuery-UI-Tabs that I'm building in jQuery like so (they show up and function fine):
var paymentTabs = $('<div id="paytabs">');
...
var paymentTabList = $('<ul>');
paymentTabs.append(paymentTabList);
if($.inArray('check',options.methods) != -1){
paymentTabList.append('<li>Pay with an E-Check</li>');
paymentTabs.append(payByCheck);
}
if($.inArray('card',options.methods) != -1){
paymentTabList.append('<li>Pay with a Credit/Debit Card</li>');
paymentTabs.append(payByCard);
}
if($.inArray('code',options.methods) != -1){
paymentTabList.append('<li>Business Office Use Only</li>');
paymentTabs.append(payByCode);
}
paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});
paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});
Binding to them does not work:
$( "#paytabs" ).on( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});
Neither does this:
$( "#paytabs" ).bind( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});
I also tried tabsactivate instead of tabsselect. I tried selecting by class and by id. I tried selecting transverse and walking the DOM. Eventually, I'm going to use the function that I bind to the tab, to add a 3% fee to the billing total. I will also make this function change the JSON key, attribute "required" to "true" for a specified input element. This is critical for me to get this function bound... I really appreciate the help.
Look here: http://api.jqueryui.com/tabs/#event-activate
Bind to the tab 'activate' event. So when a tab is clicked the activate function is fired.
Like This:
$("#paytabs").tabs({
activate: function( event, ui ){
/* do something here */
}
});
or
$("#paytabs").on( "tabsactivate", function( event, ui ){
/* do something here */
});
Here is what worked for me. Aran's solution worked in part (thank you Aran).
Step One:
Bind to tabs activate as Aran described, but directly on the element as it is instantiated. There is no need for an element selector if you do this.
billing_div.append('<h3>Payment Information</h3>');
var paymentTabs = $('<div id="paytabs">').tabs({select: function( event, ui ) {alert("tab has been clicked.");}});
billing_div.append(paymentTabs);
Step Two:
Add classes manually/problematically. remember to include ui-tabs-selected only for the tab which tab is selected at page load.
var paymentTabList = $('<ul>').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
paymentTabs.append(paymentTabList);
if($.inArray('check',options.methods) != -1){
paymentTabList.append('<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Pay with an E-Check</li>');
paymentTabs.append(payByCheck);
}
if($.inArray('card',options.methods) != -1){
paymentTabList.append('<li class="ui-state-default ui-corner-top">Pay with a Credit/Debit Card</li>');
paymentTabs.append(payByCard);
}
if($.inArray('code',options.methods) != -1){
paymentTabList.append('<li class="ui-state-default ui-corner-top">Business Office Use Only</li>');
paymentTabs.append(payByCode);
}
The click seems to fire the event and set the cookies but pressing enter to submit doesn't set the cookies and instead the page redirects without the cookies.
function locationAuto() {
$('.search-location').focus(function () {
autocomplete = new google.maps.places.Autocomplete(this);
searchbox = this;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var thisplace = autocomplete.getPlace();
if (thisplace.geometry.location != null) {
$.cookie.raw = true;
$.cookie('location', searchbox.value, { expires: 1 });
$.cookie('geo', thisplace.geometry.location, { expires: 1 });
}
});
});
The .search-location is a class on multiple textboxes.
There is a submit button that takes the values from the cookies and redirects (server side)
Adapted from Jonathan Caulfield's answer:
$('.search-location').keypress(function(e) {
if (e.which == 13) {
google.maps.event.trigger(autocomplete, 'place_changed');
return false;
}
});
I've encountered this problem as well, and came up with a good solution. In my website I wanted to save the autocomplete.getPlace().formatted_address in a hidden input prior to submission. This worked as expected when clicking the form's submit button, but not when pressing the Enter key on the selection in the autocomplete's dropdown menu. My solution was as follows:
$(document).ready(function() {
// Empty the value on page load
$("#formattedAddress").val("");
// variable to indicate whether or not enter has been pressed on the input
var enterPressedInForm = false;
var input = document.getElementById("inputName");
var options = {
componentRestrictions: {country: 'uk'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
$("#formName").submit(function(e) {
// Only submit the form if information has been stored in our hidden input
return $("#formattedAddress").val().length > 0;
});
$("#inputName").bind("keypress", function(e) {
if(e.keyCode == 13) {
// Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.
// We change this variable to indicate that enter has been pressed in our input field
enterPressedInForm = true;
}
});
// This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
if(autocomplete.getPlace() !== undefined) {
$("#formattedAddress").val(autocomplete.getPlace().formatted_address);
}
// If enter has been pressed, submit the form.
if(enterPressedInForm) {
$("#formName").submit();
}
});
});
This solution seems to work well.
Both of the above responses are good answers for the general question of firing a question when the user presses "enter." However - I ran into a more specific problem when using Google Places Autocomplete, which might have been part of the OP's problem. For the place_changed event to do anything useful, the user needs to have selected one of the autocomplete options. If you just trigger 'place_changed', the if () block is skipped and the cookie isn't set.
There's a very good answer to the second part of the question here:
https://stackoverflow.com/a/11703018/1314762
NOTE: amirnissim's answer, not the chosen answer, is the one to use for reasons you'll run into if you have more than one autocomplete input on the same page.
Maybe not the most user friendly solution but you could use JQuery to disable the enter key press.
Something like this...
$('.search-location').keypress(function(e) {
if (e.which == 13) {
return false;
}
});