e.preventDefault(); behaviour not working in Firefox? - events

I have this basic function for handling the key event, everything works great. However, in Firefox 9.0.1 it seems I can't prevent the default event which is showing of bookmarks.
Is there any solution to prevent the default behaviour in FF?
$(document).keydown(function(evt) {
if (evt.which == 66 && evt.ctrlKey) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
alert("Ctrl+B pressed");
return false;
}
});

Seems like some sort of bug regarding alert. Try this:
$(document).keydown(function(evt) {
if (evt.which == 66 && evt.ctrlKey) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
console.log("Ctrl+B pressed");
return false;
}
});
Doesn't open the Bookmarks Toolbar for me now. I assume you don't actually want to alert do you? I think you can just call your method as long as it doesn't contain an alert.

Related

Magento checkout jquery function null error

I'm getting error TypeError: $(...) is null and TypeError: $(...).visible is null.
In onepage checkout jquery function which is if($('checkout-step-shipping').visible() || $('checkout-step-shipping_method').visible())
Please let me know what may cause this problem
function styleRegionInterval() {
if (!intervalInit) {
styleRegion = setInterval(styleRegionInput, 500);
intervalInit = true;
}
}
function styleRegionInput() {
if($('checkout-step-shipping').visible() || $('checkout-step-shipping_method').visible()) {
clearInterval(styleRegion);
intervalInit = false;
shippingRegionUpdater.update();
}
}
Some days before i had removed shipping method but my checkout was working fine without it.
There is same on billing or register page of checkout to continue button as function calls there.
Try using jQuery('checkout-step-shipping').visible() instead of $('checkout-step-shipping').visible().
Your could should look like:
function styleRegionInterval() {
if (!intervalInit) {
styleRegion = setInterval(styleRegionInput, 500);
intervalInit = true;
}
}
function styleRegionInput() {
if(jQuery('checkout-step-shipping').visible() || jQuery('checkout-step-shipping_method').visible()) {
clearInterval(styleRegion);
intervalInit = false;
shippingRegionUpdater.update();
}
}

Test failure due to locator is not as expected

I have 'skip_testcases_on_fail' set to true and whenever there is a test failure due to css locator being incorrect, the other test methods in that file are not executed and the browser window remains open.
Is there a way to handle this issue?
One way to handle it is to check for the element using this.element (or browser.element) before doing anything else with it, such as getting text or clicking.
var self = this;
self.element('css selector', 'some_selector', function (present) {
if (present.status !== -1) {
self.getText('some_selector', function (result) {
if (result.status !== -1) {
console.log('result: ' + result.value);
self.click('some_selector');
}
});
}else{
// the selector was not found
}
})

AJAX getting onChange to work

I have set up a form where the user can comment by entering their name, email and comment.
I want to run a validation on the input once the user leaves the #name field, but I can't get it to work please help.
$(document).ready(function() {
$('#name').on("change", function () {
var name = $('input[name=name]');
if (name.val()=='') { //A regex check will be added later on to check for invalid caracters
name.addClass('hightlight');
$('#name_error').show();
var error = true;
} else {
name.removeClass('hightlight');
$('#name_error').hide();
}
if ($(error).length) {
return false;
}
});
});
$('#name').focusout(function() {
//code
});
if you want it to trigger on leave than you can use:
$('#name').blur(function() {
//your code
}
Refer here: http://api.jquery.com/blur/
if you want to trigger on change than:
$('#name').change(function() {
//your code
}
Refer here:http://api.jquery.com/change/
You can use focusout instead of change
$(document).ready(function () {
$('#name').focusout(function () {
var name = $('input[name=name]');
if (name.val() == '') { //A regex check will be added later on to check for invalid caracters
name.addClass('hightlight');
$('#name_error').show();
var error = true;
} else {
name.removeClass('hightlight');
$('#name_error').hide();
}
if ($(error).length) {
return false;
}
});
});

iframe won't load correct hash in firefox

I have an iframe with a differing domain, I have no trouble resizing the iframe by communicating with the parent or the child using jQuery postMessage plugin. However, I have a single page app that scrolls through some steps and then loads in a results page via ajax. On this results page there are product links that need to load in the parent window. This works fine too. My problem is when the user clicks the back button, I want to regenerate and show the results, not the initial state of the page. On Chrome, this works fine but on Firefox it doesn't (when it's in an iframe, otherwise the url directly worked). It seems that Firefox ignores the hashes, cookies, pushState, etc that I've set. I'm not sure how to fix this, and any help would be appreciated.
First, I wanted to see if history api was available, when I call app.getResults() I check if it's available, otherwise set location.hash = "results". app.resultPageSetup(currentState) loads nicely the way I'd prefer because it skips the ajax call used to get the object, since I already saved it in the state.
var isHistory = function() {
return !!(window.history && history.pushState);
};
//This "if" is for a different part of the app. Just ignore.
if ($('.not_container2').length) {
setTimeout(function() {
app.setFrameHeight("2500");
}, 1000);
} else {
if ( isHistory() === true ) {
var currentState = history.state;
history.pushState('', '', '#steps');
if (currentState !== null ) {
$('.container').hide();
$('.container2').show();
app.resultPageSetup(currentState);
app.resultPageComplete();
} else {
$('.container').show();
$('.container2').hide();
setTimeout(function() {
if ($('.container').length){
app.setFrameHeight("610");
} else if ($('.not_container2').length) {
app.setFrameHeight("2500");
}
}, 1000);
}
} else {
//Firefox ignores this stuff. Chrome works. Doing without a cookie at all would be nice
if (location.hash === "#results" && $.cookie("results") === "true") {
$('.container').hide();
$('.container2').show();
app.getResults();
} else if (location.hash === "") {
$('.container').show();
$('.container2').hide();
$.cookie("results", null);
setTimeout(function() {
if ($('.container').length){
app.setFrameHeight("610");
} else if ($('.not_container2').length) {
app.setFrameHeight("2500");
}
}, 1000);
}
}
}
Here are the links: The parent is http://www.hhgregg.com/productfinder/tv (choose the first option) and the iframe source is http://hhgregg-finders.gst.api.igodigital.com
I could also leverage $.postMessage by setting hashes on the parent, but I had trouble with this as well. Here is the general idea there:
$(function() {
var iframe = $('#baseFrame');
var h;
var saved_state = "igo_steps";
$.receiveMessage(function(e){
var data = e.data.split("|");
var height = data[0];
var state = data[1];
if (!isNaN(height)) {
h = height;
} else {
h = "610";
}
iframe.attr("height", h);
if (saved_state !== state) {
window.location.hash = state;
$.postMessage(window.location.hash, '*', document.getElementById("baseFrame").contentWindow);
}
}, 'http://hhgregg-finders.gst.api.igodigital.com');
});

.bind() statement not working in jQuery Easy Confirmation plugin

Did anyone who used jQuery Easy Confirmation plugin run into this issue - the button upon which the confirm box is bound loses its original click event after the first click? I had to change the plugin code to this to make it work. The difference here is between .bind and .click. Can anyone explain why? Pls. let me know if my question is not clear. Thx!
Original plugin code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
$target.bind(type, this);
});
}
}
Changed (working) code:
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
//this is the difference
if(type == 'click')
$target.click(this);
else {
$target.bind(type, this);
}
});
}
}
Try using some alerts to see what's happening...
// Re-bind old events
var rebindHandlers = function () {
if (target._handlers != undefined) {
jQuery.each(target._handlers, function () {
if(type == 'click')
alert('$target.click(' + this + ');');
//$target.click(this);
else {
alert('$target.bind(' + type + ', ' + this + ');');
//$target.bind(type, this);
}
});
}
}

Resources