I'm using a combination of QUnit, and Karma to run some tests in Chrome. I want to test the functionality of a certain UI element in Kendo UI's Grid. However that element is represented with a link and some custom styling. In production this code works just fine, however in test executing the click event like I do below causes the browser to navigate to another page. I thought maybe I could prevent default on each link and button on the page but that didn't work as expected. Does anyone else have any ideas? Here's my test code:
QUnit.test("Do the arrows do something once I click on them?",
function(assert) {
var done = assert.async();
createShiftsGrid("#shifts-grid-test", "", "fooBaseURL", "subgridUrl/");
gridHTML = $("#shifts-grid-test");
$('a').click(function (e) {
e.preventDefault();
});
setTimeout(function(){
var arrowIcons = $(gridHTML).find(".k-icon.k-plus");
var oneIcon = $(arrowIcons[0]);
oneIcon.click();
assert.expect(0);
done();
}, 3000);
}
);
I think the problem is you are initiating the click event with the JQuery click function instead of dispachEvent.
In JQuery you can trigger event using the trigger function
$( "#foo" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
In plain JavaScript you need to use the createEvent and dispachEvent function. See this link. Here is some code I have used before.
//dispach a clicks clicks on events
var evObj = document.createEvent('MouseEvents');
evObj.initEvent('click', true, false);
$('#target1').each(function () {
this.dispatchEvent(evObj);
});
Related
$( '#list' ).on( "click", ".list-item", function( event ) {
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
$('.list-item').not($this).removeClass('selected');
});
Hello, I have a problem with the line $('.list-item').not($this).removeClass('selected'); which doesn't work for div present in another pages when navigated. thank you for your help.
I don't know that particular plugin, but I looked into it and it seems it caches the 'other' pages somewhere while they are not displayed. At the moment your script is executed the elements are not existing in the DOM.
You will have to run a code similar to yours everytime the plugin loads a page:
// event "loadNewPage" is not an actual event; you will have to figure out which callbacks/hooks/events your plugin offers
$( '#list' ).on( "loadNewPage", function( event ) {
$('.list-item').removeClass('selected');
});
This only works if your changes are cached as well, otherwise you will have to save the selected element in your javascript and reselect it everytime the plugin displays a page.
In the JPList plugin, when you navigate only the content of the div elements are replaced and not the complete div. So, you'll have to reset the selected class upon navigation or any such event.
While initializing the plugin with default options use 'redrawCallback'
i.e.,
redrawCallback: function() {
$('.list .selected').removeClass('.selected');
}
The above code will reset the selected class upon the div.
and also update your code to be
$( '#list' ).on( "click", ".list-item", function( event ) {
$('.list .selected').removeClass('selected');
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
});
Try this approach, as this would first remove the existing selected class from the elements and add selected class to clicked element
I'm having some difficulty getting a script to execute. I am new to HTML and JQuery.
Using Google Sheets and Google Apps Scripts:
I have 3 files in question:
'sidebar.html'
'popup.html'
'scriptsJS.html'
Scripts for both 'sidebar' and 'popup' are all in 'scriptsJS'.
The button "#btnRefreshData" is bound to a button in 'sidebar'; this button, and associated scripts work as expected.
I am trying to trigger this same button from another script that is bound to different buttin in 'popup.html', but the call is ignored.
The script below is in 'scriptsJS.html', and is bound to a button in 'popup.html':
$( '#btnOpenSelectedItem' ).click(function() {
this.disabled = true;
var item = $( "#resultsList" ).find(':selected').val();
google.script.run
.withSuccessHandler(
function(msg, element) {
element.disabled = false;
doThis();
google.script.host.close();
})
.withFailureHandler(
function(msg, element) {
showStatus(msg, 'error');
element.disabled = false;
})
.withUserObject(this)
.openSelectedItem(item);
});
The script above executes correctly; my data loads, then it calls 'doThis':
function doThis () {
alert ('do this called');
$( "#btnRefreshData" ).trigger( "click" ); //<-- ignored
};
The script above displays an alert successfully (for testing), then attempts to trigger #btnRefreshData. #btnRefreshData is bound to 'sidebar.html', and causes the data in the sidebar to re-populate.
Again, all these scripts are in the same file, but when I call #btnRefreshData (bound to 'sidebar.html) from 'popup.html', it is ignored.
I'm hoping to find a way to trigger this event. Thank you for any help you can give me.
I will guess that this is an event delegation issue, how are you binding the click handler for #btnRefreshData? If You are not delegating it, try to delegate it as follows:
$( "#btnRefreshData" ).on( "click", function() {} ); //My guess on how you are binding it.
$( document ).on( "click", "#btnRefreshData", function() {} ); //Delegating the event.
Apps script uses caja to compile the code. For design some of the options you can get on normal javascript are disabled and triggering click programatically is one of them. This is why the code you mentioned is ignored.
In this case it would be better to call the methods that are executed when clicking the button "#btnRefreshData" inside your doThis method.
Here you can find a little bit of explanation on that: https://code.google.com/p/google-caja/issues/detail?id=1404
https://developers.google.com/apps-script/guides/html/restrictions#restrictions_in_native_and_emulated_mode
I have a modal that uses jQuery to popup on (document).ready.
$(document).ready(function() {
$("#openModal").toggleClass("target");
});
$(window).one( "click", function() {
$( "#openModal" ).toggleClass("target");
});
It works fine on desktop, but on iOS Safari it doesn't close on tap.
I read about the cursor:pointer fix, but it doesn't want to work in this scenario. I'm guessing this is because the event is binded to the window while the cursor is binded to the element.
And I obviously can't put body{cursor:pointer;}
What could this be caused by ?
Using .one will only trigger this for the first click on the window, therefore if you tapped (clicked) on the window before the modal opens, the function will not run again. Try using this:
$(window).on( "click", function() {
$( "#openModal" ).toggleClass("target");
});
Edit after your response:
I guess you want the modal to open only once on document ready, then do it like this, avoid using toggleClass and use this instead:
$(document).ready(function() {
$("#openModal").addClass("target");
});
$(window).click(function() {
$( "#openModal" ).removeClass("target");
});
$(window).one('click touchstart', function () {
$( "#openModal" ).toggleClass("target");
});
I use this script to show popup tho people who want to quit my website. However, my website has some banner. When clicking banner, the new window browser will be opened, so the popup will appear. So, how to disable mouseleave function when open new windows ?
Jquery: How to disable mouseleave function when open new windows ?
$(document).bind('mouseleave', function(event) {
window.location.href = "http://your-website.com";
});
You are using the bind method to bind to an event. Similarly you can use the unbind to revoke the event binding.
Sample Code:
var handler = function() {
alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );
Try out this link
and link
First, you have to declare your event handler like this
var myHandler = function(event) {
window.location.href = "http://your-website.com";
};
$(document).bind('mouseleave', myHandler);
Then call this when you want to remove it from the document
$(document).unbind('mouseleave', myHandler);
My Fiddle
http://jsfiddle.net/sx9Rt/2/
My problem
I have a page, called page1. After I navigate to page2, I want to CHANGE page1 so that next time it is visited, it will look in a certain way (for example, background-color blue). I want to make this change only AFTER the end of the transition to page2.
I was trying to correctly use the pagecontainerchange event in JQM 1.4 and it wouldn't work for me. I don't want to use the pagechange event because it has been deprecated.
Updated FIDDLE
The pagecontainershow event of the pagecontainer widget runs after the animation to the new page is complete. In the event you can check the toPage or prevPage properties to figure out where you came from and where you are going.
$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
var prevPageID = ui.prevPage.prop("id");
if (prevPageID == "page1"){
toDoAfterTransition();
}
});
Fiddle updated: http://jsfiddle.net/sx9Rt/13/
Use this:
$( ":mobile-pagecontainer" ).on( "pagecontainerhide", function( event, ui ) {
$("#page1").css('background', 'blue');
});
API doc: http://api.jquerymobile.com/pagecontainer/
You can use Javascripts setInterval function to check the visibility of the page.
var prevPage;
$(document).on('click', 'a[data-role="button"]', function(){
prevPage = $(this).parents('[data-role="page"]');
var checkVisibility = setInterval(function() {
if(!$(prevPage).is(':visible')) {
$(prevPage).css('background', 'blue');
clearInterval(checkVisibility);
}
}, 10);
});
Fiddle: http://jsfiddle.net/sx9Rt/11/