Ok, so my code is this so far:
$( document ).ready(function() {
// setup the initial display on page load
var menu_state = $.cookie('atd_gridlist');
// listen for the clicks
$('.gridselect').click(function() {
$.cookie('atd_gridlist', 'grid'); // update (or set) the cookie
$(".grid").css("display", "block");
$(".list").css("display", "none");
});
$('.listselect').click(function() {
$.cookie('atd_gridlist', 'list'); // update (or set) the cookie
$(".grid").css("display", "none");
$(".list").css("display", "block");
});
});
I need to also check to see if the cookie KEY has already been set, I think a case statement would work but I am not sure how to make the case read just the cookie atd_gridlist key values...
If it is gridselect I need to show the grid div and hide the list div, if it is listselect I need it to show the list div and hide the grid div, if it is not set at all, I want grid div loaded by default and hide the list. I also would like to expire the div every 7 days.
Any help in the right direction is appreciated. Thanks!
Would something like this do the job?
$(function() {
var grid = $('.grid');
var list = $('.list');
var stateCookie = 'atd_gridlist';
var SetStateCookie = function(value) {
$.cookie(stateCookie, value, { expires: 7, path: '/' });
}
var ShowByState = function(state) {
state = state || 'grid';
SetStateCookie(state);
if ('grid' === state) {
grid.show();
list.hide();
} else if ('list' === state) {
grid.hide();
list.show();
}
}
$('.gridselect').click(function() {
ShowByState('grid');
});
$('.listselect').click(function() {
ShowByState('list');
});
ShowByState($.cookie(stateCookie));
});
Related
I have the following jQuery code using jQuery UI
EDIT:
$(document).ready(function(){
$('#the-link-2').click(function(){
var array = ["test1","test2","test3","test4"]
var i = 1;
while (i<array.length) {
var newDiv = $(document.createElement('div'));
$(newDiv).html(array[i]).dialog({
buttons: {
'Previous': function() {
$(this).dialog("close");
i--;
},
'Next': function() {
$(this).dialog("close");
i++;
}
}
}
});
});
});
I am trying to loop through the items of the array (starting with item #1). The dialog box displays the item and moves to the previous/next item depending on which button the user clicks. It does not work (nothing gets fired). If I remove the "while" loop I do get the dialog box with the #1 item. Could anyone give me the right syntax to obtain the desired result please? Thanks.
I created a fiddle for this and updated your script. Instead of looping them just create a recursive function that does exactly what you want:
Script :
var array = ["test1", "test2", "test3", "test4"];
$('#the-link-2').click(function() {
var current = 0; // current data to show
createDialog(array[current], current); // create the dialog for current data
});
function createDialog(data, current) {
var $div = $('<div>'); // create a new div element
// add the html content of new div by passing array[current]
// and create the corresponding dialog
$div.html(data).dialog({
buttons: {
'Previous': function() {
if (current == 0) {
// do nothing if no more prev data
// or you can add some extra function here
// like close the dialog if no more prev data
return;
} else {
current--;
}
$(this).dialog("close").remove(); // close the dialog and remove the div
createDialog(array[current], current); // call createDialog again passing new current data
},
'Next': function() {
if (current == (array.length - 1)) {
// do nothing if no more next data
// or you can add some extra function here
// like close the dialog if no more next data
return;
} else {
current++; // increment current to next data
}
$(this).dialog("close").remove(); // close the dialog and remove the div
createDialog(array[current], current); // call createDialog again passing new current data
}
}
});
}
FIDDLE : HERE
I have been playing around with this for quite some time, and I do not know what is wrong. When I have a few links in a row, and keep fluttering my mouse cursor over them quickly every so often a tooltip will remain visible when it should go away (it is visible even after the cursor is no longer on the link).
I believe my code is logically valid, can someone else see if they know why a tooltip here and there would remain visible?
For a link of this type:
Link
Here is the code:
function tooltip(e) {
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).is(":hover")) { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}
I think the problem is that sometimes you mouseout before ajax post returns, therefore the tooltip is shown after you leave a link. As well as hiding on mouseout, how about setting a data attribute on the target link so that the AJAX return can check the attribute before showing the tooltip:
function tooltip(e) {
j$(e).data("hover", "true"); //turn on hover data-attribute
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).data("hover") == "true") { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
j$(e).data("hover", "false"); //turn offhover data-attribute
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}
DEMO
NOTE: demo uses a setTimeout to fake an ajax call
this is similar to a previous post where I wanted to sync my data source when the user changes rows in the grid (exactly as Access saves out a record)
In the post above am am shown how to do this when the user tabs into a new cell as follows...
function refreshFix1() {
kendo.ui.Grid.fn.refresh = (function (refresh) {
return function (e) {
this._refreshing = true;
refresh.call(this, e);
this._refreshing = false;
}
})(kendo.ui.Grid.fn.refresh);
kendo.ui.Grid.fn.current = (function (current) {
return function (element) {
// assuming element is td element, i.e. cell selection
if (!this._refreshing && element) {
this._lastFocusedCellIndex = $(element).index();
this._lastFocusedUid = $(element).closest("tr").data("uid");
// Added this For navigation mode
this._lastNavigationCell = this.tbody.find("tr:last td:last");
}
return current.call(this, element);
}
})(kendo.ui.Grid.fn.current);
kendo.ui.Grid.fn.refocusLastEditedCell = function () {
if (this._lastFocusedUid) {
var row = $(this.tbody).find("tr[data-uid='" + this._lastFocusedUid + "']");
var cell = $(row).children().eq(this._lastFocusedCellIndex);
this.editCell(cell);
}
};
The above gives us a function we can call (refocusLastEditedCell) after we sync the data source, and seems to work great.
I now want to do the same for when the grid is in Navigation mode. Following the above example, and the doco here , I added the following...
// Call this to go back to a cell in *navigation* mode
kendo.ui.Grid.fn.refocusLastNavigatedCell = function () {
var self = this;
if (this._lastNavigationCell) {
// try see if calling "async" using setTimeout will help
setTimeout (function(){
console.log("going back to navigation cell");
self.current(this._lastNavigationCell);
self.table.focus();
}, 10)
}
};
I then have the following code to call sync on the datasource...
vm.gridData.sync();
if (vm.editMode){
/ Go back to edit cell
grid.refocusLastEditedCell()
} else{
// Go back to navigation cell
grid.refocusLastNavigatedCell();
};
}
(full example here)
Unfortunately I do not seem to be going back to the same cell, it again just jumps to the top left cell.
Any ideas how to get it to work in this situation would be greatly appreciated.
Thanks in advance for any help!
You need to use the row uid and cell index as done in the original code; the <td> element you're trying to focus doesn't exist anymore once the grid gets rerendered. So you could do this:
kendo.ui.Grid.fn.current = (function (current) {
return function (element) {
// assuming element is td element, i.e. cell selection
if (!this._refreshing && element) {
this._lastFocusedCellIndex = $(element).index();
this._lastFocusedUid = $(element).closest("tr").data("uid");
// For navigation mode
var cell = current.call(this, element);
this._lastNavigationCellIndex = $(cell).index();
this._lastNavigationCellUid = $(cell).closest("tr").data("uid");
}
return current.call(this, element);
}
})(kendo.ui.Grid.fn.current);
and use it:
kendo.ui.Grid.fn.refocusLastNavigatedCell = function () {
if (this._lastNavigationCellUid) {
var row = $(this.tbody).find("tr[data-uid='" +
this._lastNavigationCellUid + "']");
var cell = $(row).children().eq(this._lastNavigationCellIndex);
this.current(cell);
}
};
You've got so many customizations now, you may want to extend the grid itself instead of replacing its methods one by one.
By the way, you could probably integrate all of this in the refresh method, so you don't have to explicitly call it:
kendo.ui.Grid.fn.refresh = (function (refresh) {
return function (e) {
this._refreshing = true;
refresh.call(this, e);
this._refreshing = false;
if (!this.options.editable) {
this.refocusLastNavigatedCell();
} else {
this.refocusLastEditedCell()
}
}
})(kendo.ui.Grid.fn.refresh);
I didn't understand why you want to refocus
this.tbody.find("tr:last td:last");
so I changed it for the (demo).
I have a function set up with the jQuery cookie plugin: https://github.com/carhartl/jquery-cookie, with the click function on .grid-block it stores each data-hook in an array, saves them as a cookie, then these chosen divs are viewable on the /itin/your-itin/ page. Here's a demo I've set up too: http://nealfletcher.co.uk/itin/ If you click on the .grid-block divs, this will add them to your itinerary, then when you navigate to: http://nealfletcher.co.uk/itin/your-itin/ only these divs are viewable and stored as a cookie for x amount of time. This works great, BUT if I then go back to add more divs, these are stored as a cookie, but the previous ones are wiped, I want to keep appending to the array, store it as a cookie, then when you navigate to: http://nealfletcher.co.uk/itin/your-itin/ it will display all your selections, even if they've been added separately. If that makes sense?
jQuery:
$(window).load(function () {
var cfilter = [];
var $container = $('.block-wrap');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.grid-block',
animationEngine: 'best-available',
filter: '.grid-block',
masonry: {
columnWidth: 151
}
});
$(".grid-block").click(function () {
var thing = $(this).attr("data-hook");
var test = "." + thing;
cfilter.push(test);
$.removeCookie('listfilter', {
path: '/itin/your-itin/'
});
// We need to set the cookie only once
// it stays at the url for 7 days
$.cookie("listfilter", cfilter, {
expires: 365,
path: '/itin/your-itin/'
});
});
if ($.cookie("listfilter") !== 'null') {
// console log just for testing
console.log($.cookie());
$('.block-wrap').isotope({
filter: $.cookie("listfilter")
});
return false;
} else {
// !! this part could be refactored
// as you don't really need to check against the url
// when the cookie doesn't exist show all elements
$('.block-wrap').isotope({
filter: ''
});
}
});
});
Any suggestions would be greatly appreciated!
Change var cfilter = []; to var cfilter = $.cookie("listfilter");
This way you load the changed cookie and add to it instead of overwriting it.
Better code practice would be to check if the cookie exists before using it though, but you get my hint.
You made an error in implementing my change:
if ($.cookie("listfilter") !== 'null') {
var cfilter = [];
} else {
var cfilter = $.cookie("listfilter");
}
is wrong, use
if ($.cookie("listfilter")) {
var cfilter = $.cookie("listfilter");
} else {
var cfilter =[];
}
I have a function that writes out to a cooke the value of the DIV that holds that data that I want to show, the cookie code works, the toggle code works but when the page refreshses, I can get the list of repeater elements, itterate through them, determine if the section should be hidden or not but I can't use visible, I can't use .show() or .hide(), I know this has to be easy but what am I over looking???
This is my working code for the slidetoggle that works and writes the true or false to the cooke based on the repeater title attribute:
$(document).ready(function () {
$("a.toggle").click(function () {
var inObj = $(this).parent().find('div#fader');
var inTitle = inObj.attr('title');
inObj.slideToggle('fast', function () {
docCookies.setItem(inTitle, inObj.is(':visible').toString());
});
});
});
This is the code block that I have the problem with, specifically, the .show() and the .hide() are not known methods, so I have the object in inObj[] collection, I am not sure how to cast this or deal with this in javascript.....
$(window).load(function () {
var inObj = $('div#fader');
for (var i = 0; i < inObj.length; i++) {
var objTitle = inObj[i].title;
var item = docCookies.getItem(objTitle);
if (item == "true") {
inObj[i].show();
}
else {
inObj[i].hide();
}
}
});
Use $(inObj[i]).show() and $(inObj[i]).hide().