select2 chrome onchange not fired the first time - xpages

Hello I have a problem with Select2 component because this code that capture onChange event:
$(document).ready(
function() {
x$("#{id:comboBox1}").select2().on("change", function(e) {
XSP.partialRefreshPost("#{id:divView}",{
onStart: function () {
// do something when the partial update is finished
alert("start...")
},
onComplete: function () {
// do something when the partial update is finished
alert("stop...")
}
});
} )
}
);
Generate in Google Chrome this error that doesn't resolve x$() function (If you reload the page work)
In Internet Explorer work well..I don't know how solve.
Uncaught TypeError: undefined is not a function home.xsp:129x$ home.xsp:129j jquery-1.11.0.min.js:2k.fireWith jquery-1.11.0.min.js:2n.extend.ready jquery-1.11.0.min.js:2K jquery-1.11.0.min.js:2
Have someone any suggest?
Tnx you

Try using XSP.addOnLoad() instead of $(document).ready() in order for your function to run when the document has been fully loaded by XPages.

Related

NightmareJS screenshot callback

I'm using this framework to make screenshots of several urls. The process of taking the screenshot is async, and the method does not provide a way to execute a callback, and I want to execute a callback when each screenshot is made on this script:
nightmare = new Nightmare();
urls.forEach(function (url) {
nightmare.goto(url).screenshot(path);
});
nightmare.run(function () {
console.log('finished all');
});
Any ideas how can I do this?
I found a way to do this, with the "use" method for executing plugins.
nightmare = new Nightmare();
urls.forEach(function (url) {
nightmare.goto(url).screenshot(path).use(function () {
console.log('finished one');
});
});
nightmare.run(function () {
console.log('finished all');
});
This appears to be the purpose of the run() method. You probably want to set up and run each screenshot within the loop, since the screenshot() method relies on the phandomjs method render(), and render() is strictly synchronous (at least as of a year ago):
urls.forEach(function (url) {
nightmare = new Nightmare();
nightmare.goto(url).screenshot(path).run(function(err, nightmare) {
console.log('this executes when your screenshot completes');
// run() appropriately tears down the nightmare instance
});
});
console.log('finished all');
You don't gain any asynchronous benefits from setting up all the screenshots at once, and "finished all" is guaranteed to only run once all screenshots have been rendered.
Alternatively, in the nightmarejs source, it looks like screenshot() does take a second done parameter that appears to be a callback, but it passes it directly into the phantomjs render() method, and as seen in the above link there was some resistance to allowing that method to take a callback.

Bootstrap Select2 open a loading dialog onStart partial refresh

I need to show a ext lib Dialog after the user select a combobox (I use a Select2 of BootStrap for XPages).
The alert code function work well, but the XSP.openDialog not .
I've found a old stackoverflow question about this but I don't understand how can I solve my problem. Any ideas?
Tnx a lot
$(document).ready(
function() {
x$("#{id:comboBox1}").select2().on("change", function(e) {
XSP.allowSubmit();
XSP.partialRefreshPost("#{id:divView}",{
onStart: function () {
// do something when the partial update is finished
//alert("start...") -- this WORK
XSP.openDialog("#{id:dialog1}"); //this doesn't work
},
onComplete: function () {
// do something when the partial update is finished
//alert("stop...") -- THIS WORK
XSP.closeDialog("#{id:dialog1}"); //this doesn't work
}
});
} )
}
);
I've found a solution with XSP.allowSubmit();, magic Sven Hasselbach!:
$(document).ready(
function() {
x$("#{id:comboBox1}").select2().on("change", function(e) {
XSP.partialRefreshPost("#{id:divView}",{
onStart: function () {
// do something when the partial update is finished
//alert("start...") -- this WORK
XSP.allowSubmit();
XSP.openDialog("#{id:dialog1}");
},
onComplete: function () {
// do something when the partial update is finished
//alert("stop...") -- THIS WORK
XSP.allowSubmit();
XSP.closeDialog("#{id:dialog1}");
}
});
} )
}
);

add onClick listener ChromeOS webview

I would like to get the event when the user click on anywhere on the webview.
I tried to add a listener like :
function EnablelistenerClick() {
webview.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
// DO SOMETHING
});
}
But I catch none of the event. Is it possible to catch event like onClick when the user click on a tag div with onClick="javascript:...." ?
Finally I found a way by using webview.addEventListener('loadstart', function(e) {
console.log("loadstart");
});

autosave function Ajax Mode - second part

Hi I have try to realize that...but I have some problem with CKeditor control:
autosave function in Ajax mode
With Firebug I see the POST sending for a simple field (text for example) but the post of CKEDITOR is not correct (I see only the initial value when I open the XPages)
have anyone any idea?
P.S. I have add this code into the onstart function:
for(var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].updateElement();
}
Now I see the POST with correct HTML...don't seem work
Ok I have resolve the problematic I have insert this native RichText code in top of my XPages:
function CKEDITOResubmit(idCKEDITOR){
var rte=dijit.byId(idCKEDITOR);
var txta=XSP.getElementById(idCKEDITOR+'_h');
if(!rte || !txta) return;
txta.value = rte.getValue();
var mod=XSP.getElementById(idCKEDITOR+'_mod');
mod.value=rte.isModified(txta.value);
return true;
}
When start automatic routine of Update:
executeOnServer('autoSaveDoc',null,
{'valmode': 1,
onStart:function() {
for(var instanceName in CKEDITOR.instances) {
CKEDITOResubmit(instanceName)
}
btn.innerHTML="saving....";console.log("autosave start"); },
onComplete:function() {btn.innerHTML="saved!"; console.log("autosave complete")},
onError: function() {btn.innerHTML="error saving"; console.log("autosave error") }
})

Backbonejs, "Object #<Object> has no method apply" when setting model attribute inside a Collections.each

I made and initialized my model with the "change:status" event like this
Box = Backbone.Model.extend({
initialize: function() {
this.on('change:status', this.changed, this);
},
changed: function() {
$('.changed').text('I changed'); // Testing if the 'change:status' is fired
}
});
My Box collections is setup this way
BoxList = Backbone.Collection.extend({
model: Box,
initialize: function() {
this.on('add', this.addOne, this);
socket.on('box-status-change', this.boxStatusChanged, this);
},
boxStatusChanged: function(box) {
Boxes.each(function(model) {
if(model.get('changed') == box.changed) {
model.set({status: 'changed'});
}
});
},
addOne: function.... // Some code removed
});
Boxes = new BoxList();
Checking in Chromes web developer tools, the attribute status was set to changed properly but an error Uncaught TypeError: Object #<Object> has no method 'apply' occured. The change:title event of the model was not fired. Is there something I miss when adding the event to the model?
By the way, I'm using the backbone-iosync.js for the Backbone.sync method...
Backbone uses an internal attribute called changed on models:
http://backbonejs.org/#Model-changed
changed model.changed
The changed property is the internal hash containing all the
attributes that have changed since the last "change" event was
triggered. Please do not update changed directly. Its state is
maintained internally by set and change. A copy of changed can be
acquired from changedAttributes.
Rename your callback to something else and that works
Box = Backbone.Model.extend({
initialize: function() {
this.on('change:status', this.changedState, this);
},
changedState: function() {
console.log('changed');
}
});
A Fiddle to reproduce your problem http://jsfiddle.net/NrTPk/ and a modified version http://jsfiddle.net/NrTPk/1/

Resources