Click not firing first time after rebind with live() method - drupal-views

I understand that this is a probably a noob-ish question, but I've had no luck with the other threads I've found on the same topic.
I've devised a workaround to hack a views exposed filter to hide and show products with a stock count of "0". The exposed filter for the stock count (input#edit-stock) is hidden with CSS and inside a custom block is a link to manipulate the form and trigger the query (with ajax). This is working great, but with one exception - after resetting the form with the views-provided "reset" button, toggle() will not rebind properly to the link, and click won't fire the first time. Works fine on the 2nd click. I'm sure that the solution is very simple, but I'm at a loss..
How to rebind toggle() effectively?
Sorry, I'm unable to provide a live example. Many thanks for any input.
CUSTOM BLOCK:
<a id="toggle" href="#">exclude</a>
JQUERY:
$(document).ready(function () {
var include = function () {
$('input#edit-stock').attr('value', 0).submit();
$('a#toggle').html('include');
};
var exclude = function () {
$('input#edit-stock').attr('value', '').submit();
$('a#toggle').html('exclude');
};
$('a#toggle').toggle(include, exclude);
$('input#edit-reset').live('click', function (event) {
$('a#toggle').unbind('toggle').toggle(include, exclude).html('exclude');
});
});

if i get the problem right you need to reset the toggle. Why instead of unbind toggle and rebinding it you just don't simulate a click if the link is == to include?
$(document).ready(function () {
var include = function () {
$('input#edit-stock').attr('value', 0).submit();
$('a#toggle').html('include');
};
var exclude = function () {
$('input#edit-stock').attr('value', '').submit();
$('a#toggle').html('exclude');
};
$('a#toggle').toggle(include, exclude);
$('input#edit-reset').live('click', function (event) {
//if the link is include, click it so that it resets to exclude, else do nothing
if ($('a#toggle').html() == 'include'){
$('a#toggle').click();
}
});
});
fiddle here: http://jsfiddle.net/PSLBb/
(Hope this is what you were looking for)

Related

How to send Keyboard keys in protractor like TAB

I need to select an element, send values to it, press tab and then send new values.
I can select the element and send values to it but am not being able to send TAB from my keyboard and then send new value.
I used ptor first but then it is being obsoleted, I now am trying to do same by using browser.key but its not working for me.
Please Help !
i wrote a snippet and tested it against google.de (not .com! maybe you have to adjust this) and when sending TAB the next element gets the focus (in this case it's the search button).
the snippet:
describe('Test', function () {
it('should browse to google', function () {
browser.ignoreSynchronization = true;
browser.driver.get('https://www.google.de');
expect(browser.getCurrentUrl()).toEqual('https://www.google.de/');
});
it('should unfocus the search field', function () {
var search = element(by.name('q'));
search.sendKeys(protractor.Key.TAB);
browser.sleep(3000); // 3s to take a look ;)
});
});

issue with JQuery toggle

I think I typed the code right, but when it runs, p fades out and in. (the toggle is in tab %)
Code
It's because you're calling this function directly after it.
$(function(){
$('p').fadeOut();
});
Take a look at this.
http://jsfiddle.net/8Wv7M/8/
You need to combine the fadeIn() method with the toggle() method. There is a method specific to combining toggle with fade: fadeToggle()
If you don't care about the fade effect, then nevermind had a working example above (comment 2).
See this jsFiddle
$(document).ready(function () {
$('#tabs').tabs();
$('button').button();
$('button').click(function () {
$('p').fadeToggle('slow');
});
});

How to fire place_changed event for Google places auto-complete on Enter key

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;
}
});

jquery regarding toggle ()

I need to toggle an element ONLY if it is not disabled.
jQuery("#sbutton").toggle(
function () {
if (!jQuery(\'input[name^="choose"]\').attr ( "disabled" )) {
jQuery(\'input[name^="choose"]\').attr ( "checked" , true);
}
},
function () {
jQuery(\'input[name^="choose"]\').removeAttr("Checked");
}
)
Is the IF condition possible?
What you probably want to do (thanks Frédéric):
jQuery("#sbutton").click(function() {
if (jQuery('input[name^="choose"]').is(':disabled'))
return false;
if (jQuery('input[name^="choose"]').is(':checked'))
jQuery('input[name^="choose"]').removeAttr("checked");
else
jQuery('input[name^="choose"]').attr("checked", true);
});
or simply
jQuery("#sbutton").click(function() {
var checkbox = jQuery('input[name^="choose"]');
if (checkbox.is(':disabled'))
return false;
checkbox.attr('checked', !checkbox.is(':checked'));
});
The problem with your code is that you expect the evaluation on disabled to be evaluated on every button click and use the first function if true. It's only called on every other click though, and the other function doesn't care if it's disabled or not. It checks the check box no matter what. You have to either bind on the click event, like I've done, or bind to and unbind from the toggle event depending on whether or not the button is disabled.
In the future it would be easier to help you if you present your code as a fiddle (http://www.jsfiddle.net) and describe more thoroughly what you're trying to do and what it is that's not working.

jquery selection with .not()

I have some troubles with jQuery.
I have a set of Divs with .square classes. Only one of them is supposed to have an .active class. This .active class may be activated/de-activated onClick.
Here is my code :
jQuery().ready(function() {
$(".square").not(".active").click(function() {
//initialize
$('.square').removeClass('active');
//activation
$(this).addClass('active');
// some action here...
});
$('.square.active').click(function() {
$(this).removeClass('active');
});
});
My problem is that the first function si called, even if I click on an active .square, as if the selector was not working. In fact, this seems to be due to the addClass('active') line...
Would you have an idea how to fix this ?
Thanks
Just to give something different from the other answers. Lonesomeday is correct in saying the function is bound to whatever they are at the start. This doesn't change.
The following code uses the live method of jQuery to keep on top of things. Live will always handle whatever the selector is referencing so it continually updates if you change your class. You can also dynamically add new divs with the square class and they will automatically have the handler too.
$(".square:not(.active)").live('click', function() {
$('.square').removeClass('active');
$(this).addClass('active');
});
$('.square.active').live('click', function() {
$(this).removeClass('active');
});
Example working: http://jsfiddle.net/jonathon/mxY3Y/
Note: I'm not saying this is how I would do it (depends exactly on your requirement) but it is just another way to look at things.
This is because the function is bound to elements that don't have the active class when you create them. You should bind to all .square elements and take differing actions depending on whether the element has the class active:
$(document).ready(function(){
$('.square').click(function(){
var clicked = $(this);
if (clicked.hasClass('active')) {
clicked.removeClass('active');
} else {
$('.square').removeClass('active');
clicked.addClass('active');
}
});
});