jquery and Jplist jquery plugin table data with many pages - javascript

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

Related

How to sync slideToggle() elements so they expand/collapse all together regardless of current state?

I'm trying to show/hide sections using triggers based on classes. So it's easy to throw the trigger class on any element and it will slideToggle the next show/hide element class in the DOM.
The first part works fine. Now I'm adding a trigger to expand/collapse ALL elements. Trouble is, I can't figure out how to sync their states.
For example: I click on 3 of 8 elements so they slide open and become visible, the other 5 are still closed... Now when I click my expand/collapse all trigger, using slideToggle just switches their states so I end up with 3 closed and 5 open.
How do I get their states to sync regardless of what their current state is?
I've been trying to figure out the conditionals to check if the trigger has the opened or close class on it, then toggle the next element, but I've only made a mess so far.
Here's my code:
jQuery( document ).ready( function( $ ) {
// The element to hide/reveal
$( '.bodhi-hide-reveal' ).hide();
// The trigger to hide/reveal
$( '.bodhi-reveal-trigger' ).click( function( e ) {
e.preventDefault();
// Target only the next element to hide/reveal and toggle it
$( this ).next( '.bodhi-hide-reveal' ).slideToggle();
// Toggle the trigger class
$( '.bodhi-reveal-trigger' ).toggleClass( 'opened closed' );
});
// Expand/collapse all button
$( '.expand-collapse-all' ).click( function( e ) {
e.preventDefault();
// Find all hide/reveal elements and toggle them all together
$( 'body' ).find( '.bodhi-hide-reveal' ).slideToggle();
});
});
Just a class named "opened" is enough to detect if the next div is open or close. So I write an IF/ELSE block to decide whether to slideUp or SlideDown. Also you have to decide what would you do when some of divs are expanded? Do you want to collapse all or expand all? I prefer to collapse all first. So I search to find an opened one (using array length) and if I find it, I collapse all divs, elsewhere I expand all:
Also there are some inefficient selectors like $( 'body' ).find(). I also replace those selectors with efficient ones:
jQuery( document ).ready( function( $ ) {
// The element to hide/reveal
$('.bodhi-hide-reveal').hide();
$('.bodhi-reveal-trigger').removeClass("opened");
// The trigger to hide/reveal
$('.bodhi-reveal-trigger').click( function( e ) {
e.preventDefault();
// Target only the next element to hide/reveal and toggle it
$(this).next('.bodhi-hide-reveal').slideToggle();
// Toggle the trigger class
$(this).toggleClass('opened');
});
// Expand/collapse all button
$('.expand-collapse-all').click( function( e ) {
e.preventDefault();
//Check if there is at least one open div:
if ($('.bodhi-reveal-trigger.opened').length){
$('.bodhi-reveal-trigger').removeClass("opened")
$('.bodhi-hide-reveal').stop().slideUp();
}
else {
$('.bodhi-reveal-trigger').addClass("opened")
$('.bodhi-hide-reveal').stop().slideDown();
}
});
});

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

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/

jQuery Mobile no styling after using Ajax .load()

I'm using an Ajax call to get a list of checkboxes to appear in a panel after the user presses login. The data loads in fine but there is no JQM styling on it, its only the default browser styling. The id of the checklist is filterlist, and the div where I want to put it is called test1.
javascript:
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
});
Try using
$(document).on('click', '#loginbutton', function() {
$( "#test1" ).load( "test.html #filterlist" );
$( "#test1" ).trigger ('create');
});
this will apply the jquery mobile styling to the newly created elements, if it is loading a page you might try 'pagecreate' instead

jquery 1.9.1 on event not working

With Jquery v1.5.2 following function works, I have upgraded jquery to 1.9.1 live has been replaced to on function. if I change live to on. its not working.
I changed on to live and included the migration plugin its working. how can I use this with on function
$( ".pop-up" ).live(
"click",
function( event ){
// get the id of the item clicked on
var id = $(this).attr('id');
alert(id)
// block the href actually working
return( false );
});
Try this
Instead of document you could use the selector that already exists in DOM, If this element is added dynamically to the DOM at a later time.
$(function(){
$(document).on("click", ".pop-up",
function( event ){
// get the id of the item clicked on
var id = $(this).attr('id');
alert(id)
// block the href actually working
return( false );
});
});

Categories