We Keep Coding

Kendo Grid Failing in Test

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

JQuery location.href - events tracking

I've an offers page with many offers. Client wants to add tracking script to a one particular offer and track clicks on several buttons i.e. "More info", "Share it" and "Buy it".
I want to use the following:
if (window.location.href == "www.ddd.xx/theoffer") {
if $( "#target" ).click(function() { // run tracking script }
else if $( "#second_target" ).click(function() { // run another tracking script}
else if $( "#third_target" ).click(function() { // run another tracking script } };
does it look ok?
I will highly appreciate ur help!
BR,
Newbie

I am wondering if you are tracking your target page or current page.window.location.href means your current page url, or you can set it to jump to another page.
But no matter which page are you tracking, you should bind the click function with buttons first.
For current page, you can bind like this:
$( "#target" ).click(function() { // run tracking script });
$( "#second_target" ).click(function() { // run another tracking script});
$( "#third_target" ).click(function() { // run another tracking script});
This function are callbacks and wont run the tracking directly.It will only be triggered after you clicked the right button.
If you have a lot of buttons to do some similar work, seems you can add class="track_button" to all the <button>s, and bind like this:
$(".track_button").click(function(){
if (window.location.href == "www.dd/xx/the_offer") {
var curId = $(this).attr("id");
if(curId == "target"){
//do tracking 1
}
else if(....){
//do tracking n....
}
}
});

Page Change Event

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/

Change the wait cursor to default (auto) after the ajax call is complete using AjaxStop event (in Chrome)

I ran into this problem and from some google search I realized that this is probably a bug in Chrome and Safari browsers.
When I submit a form (basically , make an ajax call) the default cursor changes to wait cursor (hourglass) and when the ajax call is complete ( response ) the cursor changes to the default type (arrow). However, this only works well in IE and FF. In Chrome, the cursor still remains to be hourglass cursor until I do something like move the cursor or have an alert etc.
I tried a solution much like the one mentioned here which uses the Jquery's Ajax Stop and Start event to trigger actions but for some reason it doesn't work for me.
Below is my jsp/html code.
function SubmitForm()
{
globalAjaxCursorChange();
// some code to make Ajax call
}
function globalAjaxCursorChange()
{
$("html").bind("ajaxStart", function(){
$(this).addClass('busy');
}).bind("ajaxStop", function(){
$(this).removeClass('busy');
});
}
And this is my CSS code.
html.busy, html.busy * {
cursor: wait !important;
}
What am I missing or where am I wrong ? The solution as mentioned in the article seems pretty straight foward to me but doesn't work. Thanks much for any advise.

I'm not sure why the .bind variants didn't work, but when I googled for "jquery bind ajaxStart", this was the first search result.
As such, with just the tiniest change (that is, changing .bind("ajaxStart", to .ajaxStart( and the same with ajaxStop), I got your code to work, as shown below:
$(document).ready(function() {
// Global ajax cursor change
$("html")
.ajaxStart(function () {
$(this).addClass('busy');
})
.ajaxStop(function () {
$(this).removeClass('busy');
});
});

As of jquery 1.9 you should attach them to document.
// Makes the mousecursor show busy during ajax
//
$( document )
.ajaxStart( function startBusy() { $( 'html' ).addClass ( 'busy' ) } )
.ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

How to prevent repeat in jQuery function?

I have a simple jQuery function as
$('.button').click(function(){
$("#target").slideToggle().load('http://page');
});
By slideToggle behavior, every click cause a slide, but the problem is that it will load url again too.
How can I limit the load() function to be performed only once, but slideToggle() on every click. In other words, how to prevent load() (only load, not the entire function) in the subsequent clicks?

$('.button')
.on('click.loadPage', function() {
$("#target").load('http://page');
$(this).off("click.loadPage");
})
.on('click.slideToggle', function(){
$("#target").slideToggle();
});
and another way without global vars:
$('.button')
.on('click', function() {
if ( !$(this).data("loaded") ) {
$("#target").load('http://page');
$(this).data("loaded", true);
}
$("#target").slideToggle();
});

Have a variable (global) which says whether it has been loaded or not. E.g:
var loaded = false;
$('.button').click(function(){
if(!loaded){
$('#target').load('http://page');
loaded = true;
}
$("#target").slideToggle();
});
This will cause the slideToggle to occur on every click, but the page to load only the once. :)