Following the examples at this page I'm trying to navigate a user from the login page to the home page but it doesn't seem to be working. Here's the code
var page;
exports.onNavigatingTo = function(args){
page = args.object;
const frame = page.frame;
page.bindingContext = loginVM;
console.log(frame); //undefined
if(settings.hasKey('token')){
frame.navigate({
moduleName: 'home/home-page',
clearHistory: true
});
}
}
With this I get an error "TypeError: Cannot read property 'navigate' of undefined
This code does work however
const frameModule = require('ui/frame');
var page;
exports.onNavigatingTo = function(args){
page = args.object;
page.bindingContext = loginVM;
if(settings.hasKey('token')){
frameModule.topmost().navigate({
moduleName: 'home/home-page',
clearHistory: true
});
}
}
The docs seems to be using the first style of code everywhere. Why is it not working?
Related
I have a repeater that loads info from SQLite and works well. The user has options to take photos which are stored both in their photo library and in a temp folder. On reloading the page I need to reload the images to for a sliding gallery of thumbnails under the relevant section in the repeater.
The Image repeater is defined as
<Repeater items="{{ images }}" id="{{ repeaterphotoid }}">
<Repeater.itemTemplate>
<Image src="{{localurl}}" width="75" height="75" visibility="{{photoevidence === 'y' ? 'visible' : 'collapse'}}" />
</Repeater.itemTemplate>
</Repeater>
And my code is
exports.takePic = function(args){
var page = args.object;
camera.requestPermissions().then(
function success(){
var livesite = appSettings.getString("livesite");
var images=[];
var whichcamera = args.object;
var options = {saveToGallery: true, keepAspectRation: true, height: 1024 };
var gallery = args.object.page.getViewById("images-"+whichcamera.id);
var source = new imageSourceModule.ImageSource();
camera.takePicture(options).then(function(imageAsset){
var img = new imageModule.Image();
source.fromAsset(imageAsset).then((imageSource) => {
var auditDB = new sqlite("my.db", function(err, db){
if (err){
alert("Failed to open the database", err);
} else {
var tempfilename = livesite+"-"+whichcamera.qid+"-";
db.all("SELECT filename FROM images WHERE filename LIKE '"+tempfilename+"%'").then(rows =>{
//console.log("Images rows="+rows.length+1);
if (rows.length == 0){
imageCount = 1;
}
else
{
imageCount = rows.length+1;
}
var livesite = appSettings.getString("livesite");
// var path = filesystem.path.join(filesystem.knownFolders.documants().path,"photos")
var folder = filesystem.knownFolders.documents();
var filename = livesite+"-"+whichcamera.qid+"-"+imageCount+".jpg";
var imgPath = filesystem.path.join(folder.path,filename);
var saved = imageSource.saveToFile(imgPath,"jpg");
if (saved){
var livesite = appSettings.getString("livesite");
var liveaudit = appSettings.getString("liveaudit");
db.execSQL("INSERT INTO images (localurl,remoteurl,syncd,siteid,filename,question) VALUES(?,?,?,?,?,?)",[imgPath,'-','n',livesite,filename,whichcamera.qid])
var imageList = [];
var tempfilename = livesite+"-"+whichcamera.qid+"-";
var imageSQL = "SELECT localurl,remoteurl,filename FROM images WHERE filename LIKE '"+tempfilename+"%'";
db.all(imageSQL).then(rows =>{
for (var row in rows) {
imageList.push({
localurl: rows[row][0],
filename: rows[row][2]
});
}
const imagesource = fromObject({
images: imageList
});
imagesource.set = ("images", imageList);
var imageholder = args.object.page.getViewById("repeat_"+whichcamera.id);
imageholder.bindingContext = imagesource;
});
};
});
};
});
});
}).catch(function (err) {
alert("Camera Error "+err.message);
})
//alert("Taking Pic with camera "+whichcamera.id);
},
function failure(){
alert("You must allow this app access to the camera and your photos library.")
});
}
Binding to the questions works as expected but I cannot bind the images to the image repeater, nothing happens. Obviously missing something but going code blind.
I am trying to embed into the editor an uploaded image. My filebrowserUploadUrl is /api/m/image and it seems to be working fine. After I clicked the Send it to the Server button, there is a script error as follows:
image.js?t=H4PG:19 Uncaught TypeError: Cannot read property 'setCustomData'
of undefined
at textInput.onChange (image.js?t=H4PG:19)
at textInput.n (ckeditor.js:10)
at textInput.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
at textInput.setValue (ckeditor.js:619)
at textInput.setValue (ckeditor.js:545)
at a.q (ckeditor.js:841)
at ckeditor.js:31
at Object.callFunction (ckeditor.js:31)
at image?CKEditor=editor&CKEditorFuncNum=1&langCode=en:1
The last line in the above is the call to filebrowserUploadUrl and the response from that is:
window.parent.CKEDITOR.tools.callFunction(1, '/images/bulletins.jpg', 'Uploaded successfully');
The Uploaded successfully message is shown in an alert. The Preview box under Image Info tab is not updated. But if I clicked OK to close the dialog, the image (bulletins.jpg) is embedded in the editor alright.
What could be causing the error and how do I fix it?
I found what was causing it. I wanted to set the default tab when the insert image dialog is launched to the Upload tab. I use the following code:
CKEDITOR.on("dialogDefinition", function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === "image") {
dialogDefinition.onShow = function() {
this.selectPage("Upload");
}
}
});
When the above code is used, that error happens when a file is uploaded.
I was having same issue, and after using proposed solution from vikram, editor was generating error while pasting image link into the text. Better approach here, not to completely override default onShow method, but add more to it in the following way:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var oldOnShow = dialogDefinition.onShow;
var newOnShow = function () {
this.selectPage('Upload');
this.hidePage('Link');
// change tabs order
$('a[title=Upload].cke_dialog_tab').css('float', 'left');
};
dialogDefinition.onShow = function () {
oldOnShow.call(this, arguments);
newOnShow.call(this, arguments);
};
}
});
After debugging a lot I found a solution on this.
If you will see onChange method of txtUrl textBox in image.js
See line number 507 and 513
you will understand cause of this error.
at line 513 setCustomData is called.
original.setCustomData( 'isReady', 'false' );
CKEDITOR.on("dialogDefinition", function(ev) {
var dialogName = ev.data.name;
//current editor
var editor = ev.editor;
var dialogDefinition = ev.data.definition;
if (dialogName === "image") {
dialogDefinition.dialog.on('show', function(e){
var dialogBox = e.sender;
//This line is the answer of your question
//this line will get rid of the error setCustomData
dialogBox.originalElement = editor.getSelection().getStartElement();
this.selectPage("Upload");
});
}
});
I use Sails.js, which is based on Node.js. For the upload I use Dropzone. To display the pictures I use owl-carousel.
When I add a new picture and I try to display it I receive the following error:
"NetworkError: 404 Not Found - http://localhost:1337/superrare/b004421de079bb2531cc5cd6346d202d/dde8221dc9e0b750479cedd3924af191/dde8221dc9e0b750479cedd3924af191.png"
If I open the above link in another tab I can see the image, because it exists at the specific path.
If I refresh the page I can see the picture in the owl carousel, with the same path that is displayed above.
If I modify the Dropzone code for testing purposes, on success add to carousel an older picture, the picture will be displayed -> imagePath = '/superrare/b004421de079bb2531cc5cd6346d202d/d845a68e5a57acf2f879bcd50966cc11/d845a68e5a57acf2f879bcd50966cc11.png';
So only when I try to add a new picture path I receive a 404 error...
If I add a delay of 5 seconds, the error is the same 404.
Here is my code
Dropzone.options.mydropzone = {
autoProcessQueue: false,
init: function () {
var imageName, imagePath, imageID;
var submitButton = document.querySelector("#submit-all");
myDropzone = this; // closure
this.on("success", function (file, responseJson) {
imageName = responseJson.createdAt;
imagePath = responseJson.path;
//imagePath = '/superrare/b004421de079bb2531cc5cd6346d202d/d845a68e5a57acf2f879bcd50966cc11/d845a68e5a57acf2f879bcd50966cc11.png';
imageID = responseJson.id;
var content = '<div class="item"><div id="visinput" class="container-img">'+
'<img file-id="' + imageID + '" src="' + imagePath + '">'+
'</div></div>';
// get owl element
var owl = $("#owlUpload");
// add item to owl carousel
setTimeout(function () {
owl.data('owlCarousel').addItem(content);
}, 5000);
document.getElementById("serverFile").value = fileProcess;
});
},
paramName: "file",
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
I'm creating a firefox extension using Add-on SDK, which will display all the tab details including memory, title and url. I have tried to get the tab title using require("sdk/tabs"); tab package.
Below is the sample code:
popup.js
<body>
<ul>
<li>
Settings
</li>
</ul>
<script type="text/javascript" src="popup.js"></script>
</body>
popup.js
var tab_button = document.getElementById("tab_list");
tab_button.addEventListener("click", function() {
addon.port.emit("GET_TABS");
});
main file: index.js
const buttons = require("sdk/ui/button/action");
const { TogglePanel } = require("popupPanel");
var button = buttons.ActionButton({
id: "mem-tools",
label: "tabs info listing",
icon: {
"16": "./tab.png",
},
onClick: handleClick
});
let togglePanel = new TogglePanel();
function handleClick(state) {
togglePanel.panel.show({position:button});
}
Panel file: popupPanel.js
var Panel = require('sdk/panel');
var self = require('sdk/self');
var { MemoryHandler } = require('memory-handler');
var memoryHandler = new MemoryHandler();
function TogglePanel() {
this.panel = new Panel.Panel({
width: 150,
height: 200,
contentURL: self.data.url("popup.html")
});
this.panel.port.on("GET_TABS", function() {
memoryHandler.getAllTabs();
});
}
exports.TogglePanel = TogglePanel;
memory-handler.js
var tabs = require('sdk/tabs');
function MemoryHandler() {
return {
getAllTabs: () => {
for(let tab of tabs) {
console.log(tab.title);
}
}
}
}
exports.MemoryHandler = MemoryHandler;
This code only fetching all tab titles from the main window and child window, but not from all other new window's tabs which is opening using _blank attribute.
Note: we can easily recreate the issue just create an html page and use the below code:
Visit me
The page open using the "_blank" attribute is not coming under the tabs array.
Any help is appreciated.
Thanks in advance!!
We can get all the titles from all the window tabs by creating a custom array.
index.js
var memoryHandler = new MemoryHandler();
tabs.on('ready', function(tab) {
memoryHandler.addTabDetails({id: tab.id ,title: tab.title, url: tab.url});
});
If you want to get the title which is setting by using javascript after page load, you can inject a mutation observer code in the content script of tab
memory-handler.js
var presentTabs = []
function MemoryHandler() {
return {
addTabDetails: (tab_array) => {
presentTabs.push(tab_array);
}
}
}
exports.MemoryHandler = MemoryHandler;
On my site I use one core/frame PHP file. If user hit one of my link (like contact, our about..etc..) the content loaded via ajax. I use the following snippet to achieve this:
var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
$(container_div).animate({opacity:0},
function(){ // the callback, loads the content with ajax
$(container_div).load(url, //only loads the selected portion
function(){
$(container_div).animate({opacity:1});
}
);
});
},
ajaxify_links: function(elements){
$(elements).click(function(){
AjaxContent.getContent(this.href);
return false;
});
},
init: function(params){
container_div = params.containerDiv;
content_div = params.contentDiv;
return this;
}
}
}();
I need help how to integrate a preloading, so if visitors hit one of my link (for example the gallery menu) will see a little loading image, because now they see the big white nothing for long - long seconds.
Add loading image beforing ajax call and after you get response from server simply replace that image with data like the one below
function(){ // the callback, loads the content with ajax
$(container_div).html("<img src='loading.gif' />");//add image before ajax call
$(container_div).load(url, //only loads the selected portion
function(){
$(container_div).html(data);//replace image with server response data
$(container_div).animate({opacity:1});
}
Try this
var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
$(container_div).html('Loading...'); //replace with your loading img html code
$(container_div).load(url, //only loads the selected portion
function(){
$(container_div).css({opacity:0});
$(container_div).animate({opacity:1});
});
},
ajaxify_links: function(elements){
$(elements).click(function(){
AjaxContent.getContent(this.href);
return false;
});
},
init: function(params){
container_div = params.containerDiv;
content_div = params.contentDiv;
return this;
}
}
}();