We Keep Coding

jQuery alternate clicks do something

Okay, so this little bit of code either posts and then updates #arrival, or it removes it and replaces it with standard text. One click posts, one click resets. The problem I'm having, and cannot figure out, is that the code as is requires two clicks to do the initial posting, and then one click to remove and one click to post again ad infinitum. But it first requires two clicks to get to working.
Any help would be appreciated.
$(document).ready(function(){
$("#change").click(function(e) {
e.preventDefault();
var data = {};
$.each($('input[name^="u\\["]').serializeArray(), function() {
var vv = this.name.replace(/u/, '' ).replace(/(\[[]\])$/,'');
data[vv] = this.value;
});
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$.ajax({
type : "POST",
cache : false,
url : "napad.php?n=<?=$_GET['n']?>&o=<?=$_GET['o']?>&arrival",
data : {'X': data},
success: function(data) {
$("#arrival").html(data);
}
});
} else {
// even clicks
$('#arrival').contents().remove();
$('#arrival').append('Arrival Time: Normal');
}
$(this).data("clicks", !clicks);
});
});

If you saying you doesnt want it firing 2 times but you want it trigger the event one time clicking.
try to add this on you jquery function.
$("#change").unbind("click").click(function() {
// Your code
});
Let me know if it works. Thanks. :)

Destroy Function on AngularJS

I have a page in my project that contains several categories and each category has a Flexslider with images. Each category is displayed once and clicking another, the former is hidden and clicked appears, similar scheme with Tabs.
I need that when I click on another category, it destroys the function of Flexslider initialised in the former category and is executed in this category.
Here's what I've done so far, without success:
Function that starts Flexslider:
vm.sliderCol = function () {
setTimeout(function () {
$('.sliderCol').flexslider({
animation: "slide",
controlNav: false
})
}, 1000)
}
Function that enter the category button:
vm.clicou = function(){
$('.sliderCol').flexslider("destroy")
setTimeout(function () {
vm.sliderCol()
}, 1000)
}
Until then I tried to destroy the Flexslider do not know if there is some method to stop performing the function and start it, can anyone help?

With ng-click on each category playing the role, I managed to destroy the slider and start it again with the following function:
vm.clicou = function(){
$('.sliderCol').flexslider("destroy");
$('.sliderCol').removeData("flexslider");
setTimeout(function () {
vm.sliderCol();
}, 100);
}

Using modifier keys with WebdriverIO v4

I was wondering if anyone knew how to do the equivalent of 'keydown' and 'keyup' events with WebdriverIO? I currently have the following code:
// required pages
var LibraryPage = require('../../pageobjects/library.page.js');
describe('Delete Button', function(){
before(function (){
LibraryPage.open('/library/list/1/');
});
it('Delete button shows correct number of images', function (){
browser.keys('Ctrl');
LibraryPage.Image('asset1.jpg').click();
LibraryPage.Image('asset3.jpg').click();
LibraryPage.Image('asset5.jpg').click();
expect(LibraryPage.DeleteButton.getAttribute("title")).to.equal("Delete 3 assets");
});
});
// Library Page Object
DeleteButton: { get: function () { return browser.element('div[title^="TODO: Delete "]'); } },
Asset: { value: function(assetName) { return browser.element('tr*=' + assetName); } },
I want to hold the CTRL key while selecting images to multi-select.
What I have read indicates that the keys function should be sticky until it gets nulled out, but that’s not what I am experiencing.. Each item gets clicked without the CTRL button being held.
Using WebdriverIO v4 (synchronous JS).
Any help would be much appreciated, thanks!

Fill select on click with Knockout

I'm having a trouble when I'm trying to load the data of select.
Once the page is loaded, when I do my first click on the select it doesn´t show nothing, any data.
I close it and when I click again on the select it shows me the data.
http://jsfiddle.net/r3AA9/19/
Any suggestion?
HTML
<div>
<select data-bind="options: values, value: option, optionsCaption: 'Selecione...', event: { click: onClickSelect }" ></select>
<label data-bind="text: option"></label>
JS
var ViewModel = {
option : ko.observable(),
values : ko.observableArray()
};
ViewModel.onClickSelect = (function() {
//Simulate server side
setTimeout(function()
{
ViewModel.values(["one", "two", "three"]);
}, 2000);
});
ko.applyBindings(ViewModel);
Any suggestion?

there is a way to do this.
try this code
ViewModel.onClickSelect = function (v, e) {
var sel = e.target;
if (sel.childNodes.length === 1) {
sel.childNodes[0].innerText = 'Loading...'
setTimeout(function () {
sel.childNodes[0].innerText = 'Selecione...'
ViewModel.values(["one", "two", "three"]);
sel.blur();
v.openSelect(sel);
}, 2000);
}
};
//to open 'select' programmatically
ViewModel.openSelect = function (element) {
if (document.createEvent) {
var e = document.createEvent("MouseEvents");
e.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(e);
}
else if (element.fireEvent) element.fireEvent("onmousedown");
};
ko.applyBindings(ViewModel);
Demo JSFiddle

It's natural.
When you load the page for the first time, the values array is empty, so there are nothing to show in the dropdown. Then when you click on the drop down, you trigger the select, which invokes this code:
setTimeout(function()
{
ViewModel.values(["one", "two", "three"]);
}, 2000);
What this code does is, after waiting two seconds, it loads the 3 values in the drop down list. So, if you close the drop down list, and click on it again at least 2 seconds later, the options are there. If you do it quickly enough you'll realize that clicking again in the drop down before the 2 seconds go by, the select is already empty.
So the code is working perfectly, as expected. For your question it's impossible to know what you was trying to do.

ckeditor not auto saving if changes done by editor

Following is my js code which works fine when i add new values or give enter space etc. Basically the following code calls a function after 5 seconds after the last key is pressed to save textarea values. The issue I am facing is the function does not make any call if i use editor to change the content within itself like bold the text, underline etc without pressing any key on the editor. Kindly let me know how can I modify the following code so it gets trigger on last change after 5 seconds?
CKEDITOR.replace( 'editor1', {
on: {
instanceReady: function() {
},
key: function() {
onautosave(); // Function which makes call after 5 seconds to save values
}
}
});
function onautosave(){
if(autosave_timer)
clearTimeout(autosave_timer);
autosave_timer = setTimeout(save, 5000);
}

Try using the on change event, that might work better for you:
CKEDITOR.replace('editor1', {
on: {
instanceReady: function() { },
change: function() {
onautosave(); // Function which makes call after 5 seconds to save values
}
}
});
function onautosave() {
if (autosave_timer) {
clearTimeout(autosave_timer);
}
autosave_timer = setTimeout(save, 5000);
}