We Keep Coding

jquery and Jplist jquery plugin table data with many pages

$( '#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

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

How to interrupt a function when jquery tab is getting inactive?

I have a page with several jqueryui tabs. Each tab has a html page as content, which will be refreshed every second with new values of some variables.
The problem is, the values should not be refreshed, when the tab is inactive. (It's a traffic and perfomance problem)
So i tried following:
$(function() {
$( "#tabs" ).tabs({
activate: function( event, ui ) {
//tried some things here
if (ui.newTab.index() == 1){
setInterval("GetStatus()",1000);
}
}
});
});
it works halfway. The function "GetStatus" runs every second, when i open the Tab with index 1. But when i switch to another tab, the function still runs in background, and this is not desirable.
So I tried something like
ui.oldTab.empty(), ui.oldTab.unload() ....
But either I used it wrong, or its not that what i need to use.
Thanks for help in forward,
Flopo

You can keep a reference to the interval and clear it later:
$(function() {
var statusInterval;
$( "#tabs" ).tabs({
activate: function( event, ui ) {
//tried some things here
if (ui.newTab.index() == 1){
statusInterval = setInterval(function() { GetStatus(); }, 1000);
} else {
clearInterval(statusInterval);
}
}
});
});
Note that it's better to pass an anonymous function or function reference to setInterval, rather than a string.

Jquery .on not observing new elements that are added after load

I have the following jQuery code which watches for an ajax request and then shows / hides a spinner image when the request starts / ends.
This works fine on page load. However if I update part of the page with a new ajax link, this code no longer catches the ajax:before. Does anyone know if there is a solution to this without having to call unbind() and then re-call the code again?
$("*[data-spinner]").on('ajax:before', function(e) {
$('#' + $(e.target).data('spinner')).show();
});
$("*[data-spinner]").on('ajax:complete', function(e) {
$('#' + $(e.target).data('spinner')).hide();
});

Did you tried like
$("body").on("'ajax:before", "*[data-spinner]", function(){
$('#' + $(e.target).data('spinner')).show();
});
$("body").on('ajax:complete', "*[data-spinner]", function(e) {
$('#' + $(e.target).data('spinner')).hide();
});

$(document).on('ajax:before', '*[data-spinner]', function(e) {
$('#' + $(e.target).data('spinner')).show();
});
This is because jQuery binds its functions to the DOM on the pageload. If you try to bind your "data-spinner" that is not there yet jQuery will not find it and wont bind it.
However if you bind on document it can be found and we pass your '*[data-spinner]' as a 2nd parameter since its just a filter. jQuery will watch it only when you click something inside "document" so it will always be up-to-dated.

It should be something like
$(document).on("ajax:before", "*[data-spinner]", function(){
//...
});
Or you can use the parent element instead of document and it's better/faster, i.e.
$('#parent_element').on("ajax:before", "*[data-spinner]", function(){
//...
});
The prototype is
.on( events [, selector ] [, data ], handler(eventObject) )
Read more on jQuery website.

jQuery: Any way to "refresh" event handlers?

I have two divs, one that holds some stuff and the other with all possible stuff. Clicking on one of the divs will transfer items to the other div. The code I came up with is:
$("#holder > *").each(function() {
$(this).click(function(e) {
$(this).remove();
$("#bucket").append(this);
});
});
$("#bucket > *").each(function() {
$(this).click(function(e) {
$(this).remove();
$("#holder").append(this);
});
});
This one works perfectly, except that the event handlers need to be refreshed once I append or remove elements. What I mean is, if I first click on an element, it gets added to the other div, but if I click on this element again, nothing happens. I can do this manually but is there a better way to achieve this?

Try jquery live events .. the $.live(eventname, function) will bind to any current elements that match as well as elements added to the Dom in the future by javascript manipulation.
example:
$("#holder > *").live("click", function(e) {
$(this).remove();
$("#bucket").append(this);
});
$("#bucket > *").live("click", function(e) {
$(this).remove();
$("#holder").append(this);
});
Important:
Note that $.live has since been stripped from jQuery (1.9 onwards) and that you should instead use $.on.
I suggest that you refer to this answer for an updated example.

First, live is deprecated. Second, refreshing isn't what you want. You just need to attach the click handler to the right source, in this case: the document.
When you do
$(document).on('click', <id or class of element>, <function>);
the click handler is attached to the document. When the page is loaded, the click handler is attached to a specific instance of an element. When the page is reloaded, that specific instance is gone so the handler isn't going to register any clicks. But the page remains so attach the click handler to the document. Simple and easy.

Here you go, using the more intuitive delegate API:
var holder = $('#holder'),
bucket = $('#bucket');
holder.delegate('*', 'click', function(e) {
$(this).remove();
bucket.append(this);
});
bucket.delegate('*', 'click', function(e) {
$(this).remove();
holder.append(this);
});

EDIT: don't use live, it be deprecated!
Take advantage of the fact that events bubble. Using .on():
var = function( el1, el2 ) {
var things = $('#holder, #bucket');
things.each(function( index ) {
// for every click on or in this element
things.eq(index).on('click', '> *', function() {
// append will remove the element
// Number( !0 ) => 1, Number( !1 ) => 0
things.eq( Number(!index) ).append( this );
});
});
any click on any element (existing at the time of bind or not) will bubble up (assuming you haven't manually captured the event and stopped propagation). Thus, you can use that event delegation to bind only two events, one on each container. Every click that passed the selector test of the 2nd argument (in this case, > *, will remove that element and then append it to the alternate container as accesesed by things.eq( Number(!index) )

Have you looked at jQuery's live function?

The most Efficient way (dont load all event for all elements) it:
//NORMAL FUNCTION
function myfunction_click(){
//custom action
}
$('id_or_class_of_element').on('click', myfunction_click);
//LOAD OR REFRESH EVENT
$(document).on('click', 'id_or_class_of_element', myfunction_click);