I need to excute a function after opening a Dialog.
I tried with the following:
Liferay.Util.openWindow({
dialog: {centered: true},
id:'myID',
title: 'Title',
uri: _url
});
alert("Loading Complete");
I get the alert() after the opening of dialog but before the request is complete.
How can I execute a function after loading of the Dialog and after the request is completed?
I tried with success but doesn't work:
Liferay.Util.openWindow({
dialog: {centered: true},
id:'myID',
title: 'Title',
uri: _url
}).on("success", function(){
alert("Loading Complete");
});
If you are opening a local view / jsp of portlet using that _url, I would recommand to call that functionToBeExecuted on window.onload or jQuery document.ready in that respective jsp.
However, if not, there is still a work-arround you can try with i.e. to add delay (setTimeout) to the functionToBeExecuted as following:
Show Dialog
<script type="text/javascript">
function showDialog(){
AUI().ready(function(A) {
Liferay.Util.openWindow({
dialog: {centered: true},
id: 'myID',
title: 'Title',
uri: _url
});
setTimeout(functionToBeExecuted, 3000);
});
}
function functionToBeExecuted(){
alert('Called!');
}
</script>
NOTE: functionToBeExecuted is the name of the function, you desire to call.
Related
I have 'orders page' where orders should appear and could be changed with ajax without reloading the page. How do i make it to change specific boolean in mongoDB on a button click? Also i need to refresh page every time a new order comes up without reloading the page.
It works great with reloading the page with routing, but i need AJAX.
Script.js
$('.confirm').click(function(){
event.preventDefault();
event.stopPropagation();
$.ajax({
url: 'order/' + $(this).attr('data-id') + '/confirm',
type: 'POST',
contentType: 'application/json',
success: function(){
}
});
});
index.ejs
<form class="confirm" data-id="<%= order.id %>" method="POST">
<button class="btn btn-success btn-lg" type="submit"><i class="fas fa-check"></i> Priimti</button>
</form>
orders.js
router.post('/order/:id/confirm', isLoggedIn, function(req, res){
Order.findOneAndUpdate({_id: (req.params.id)}, { $set: { isConfirmed: true, isDone: false } }, { returnOriginal: false }, (err, result) => {
if (err){
console.log(err);
}
});
});
So the site should be updating orders parameters such as 'isConfirmed' from false to true in mongoDB on a click of a button without reloading. Also ALL orders should appear on the site without reloading as well.
You need to use the success: function(someVar) part of your ajax call. This tells your code what it should do after the call is made, and any context you pass from your route will be accessible through someVar. For example:
assuming your index.html looks like this, and that you are using jQuery:
$.ajax({
url: 'order/' + $(this).attr('data-id') + '/confirm',
type: 'POST',
contentType: 'application/json',
success: function(data){
//code to change the html of "someDiv"
$('#someDiv').html(data['someData']);
}
On a side note, I would recommend always passing e in your functions, instead of calling event.preventDefault() because event by itself doesn't work on Firefox sometimes. For example:
$('.confirm').click(function(e){
e.preventDefault();
...
Lastly, I don't think you need the event.stopPropagation.
I use notification in my Web application (nodejs), every time when i refreshe my page /notes i click on my notification and in console i have the message toto. My probleme is : if i refresh seven times my page, in console i have seven messages toto. How can i resolved this probleme.
Thanks
Code :
router.get('/notes', passportConfig.isAuthenticated, function(req, res) {
notifier.notify(
{
title: 'My awesome title',
message: 'Hello from node, Mr. User!',
icon: path.join(__dirname, 'coulson.jpg'),
sound: true,
wait: true
},
function(err, response) {
// Response is response from notification
}
);
notifier.on('click', function(notifierObject, options) {
console.log("toto");
});
});
notifier.on(...) is an event listener. Once is iniciated it will be active until you remove event listener.
Problem is with your function scope. notifier.on() event listener should be iniciated only once.
Try pull off notifier.on() logic from router.get() function scope.
Every time you reloaded page that created another one event listener :)
notifier.on('click', function(notifierObject, options) {
console.log("toto");
});
router.get('/notes', passportConfig.isAuthenticated, function(req, res) {
notifier.notify(
{
title: 'My awesome title',
message: 'Hello from node, Mr. User!',
icon: path.join(__dirname, 'coulson.jpg'),
sound: true,
wait: true
},
function(err, response) {
// Response is response from notification
}
);
});
I would like to link to chrome://history page in a button of an extension I'm working, but with href="chrome://history" the console says Not allowed to load local resource: chrome://history/
What can I do?
Thanks and greetings
Edited:
I'm trying with this:
The button I want to trigger with the event has .btn-history class.
In content.js:
function messaging(){
chrome.runtime.sendMessage({command: "openHistory"});
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementsByClassName('btn-history')[0].addEventListener('click', messaging);
});
In background.js:
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(command == "openHistory") {
chrome.tabs.create({'url': 'chrome://history'});
}
});
But doesn't work.
If you are using jquery, you can have a button in your html, like so:
<button id="historyBtn">History</button>
And in your javascript you can use define an event handler for the button using jquery:
$(function(){
$("#historyBtn").click(function(){
chrome.tabs.create({url: "chrome://history"});
});
});
If you would like to change the currently active tab to open history, you can replace the chrome.tabs.create line in the above snippet with something like:
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.update(tabs[0].id, { url: "chrome://history" });
});
Hope this helps :)
I want to create a Chrome extension with a browser action onClicked which provides the same functionality as the following bookmark:
javascript:(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
However, I struggle to correctly translate the javascript code of the bookmark into the logic of a Chrome extension. I thought the best to is to to put the exact code of the bookmark into a separate script create_feed_url.js and execute it in background.js. My background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
// Run the bookmark code
chrome.tabs.executeScript(null, {file: "create_feed_url.js"});
// Open a new tab for a valid url resulting from create_feed_url.js
var feed_url = "http://page2rss.com/page?url=" + tab.url;
chrome.tabs.create({"url": feed_url});
Yet the code in create_feed_url.js somewhat runs not sucessfully. There is no feed URL generated, resulting in a non existing value for feed_url.
My questions:
Could you please help me to find out why I cannot just put the code of the bookmark into create_feed_url.js and run it?
Is this approach of executeScript recommendable in my case or is there a better way translating a bookmark into an extension?
I solved it with a workaround calling the URL that generates the new feed in a new tab before closing it and finally jumping to the tab with the final RSS feed URL. This solution does not require create_feed_url.js but relies completely on background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
// Original bookmark JS code
//(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
var create_feed_url = "http://page2rss.com/api/page?url=" + encodeURIComponent(tab.url); //+ "&callback=page2rss_bookmark_urlr"
var feed_url = "http://page2rss.com/page?url=" + tab.url;
chrome.tabs.create({"url": create_feed_url, active: false}, function(tab) {
chrome.browserAction.setBadgeText({text: 'wait'});
setTimeout(function() {
chrome.tabs.remove(tab.id, function(tab) {
chrome.browserAction.setBadgeText({text: ''});
});
}, 5000);
});
setTimeout(function() {
chrome.tabs.create({"url": feed_url, active: true}, function(tab) {
chrome.tabs.onUpdated.addListener(function( tabId , info ) {
if ( info.status == "complete" ) {
chrome.browserAction.setBadgeText({text: 'done', tabId: tabId});
}
});
}); }
, 1000);
});
Based on Rob's comment above of using a content script approach I tried to implement it. However, clicking on the browser icon does not trigger the content script create_feed_url.js through content_script.js. I tried to debug the code but neither the Developer Tools nor the inspect element tool show any error.
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "content_script.js"});
});
content_script.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL("create_feed_url.js");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
create_feed_url.js:
(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='//page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
manifest.json:
{
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"background" : {
"scripts": ["background.js"],
"persistent": false
},
"web_accessible_resources": ["create_feed_url.js"],
"browser_action" :
{
"default_icon" : "rss-19.png",
"default_title" : "Create RSS feed for this page"
},
"manifest_version": 2
}
I've read through all of the related errors, and I think this case is a bit different. I'm trying to send a message from the background context to a content script. E.g.
chrome.tabs.query({
currentWindow: true,
active: true
}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {
name: name,
args: args
}, function(response){
if (!response) return callback('You tried to message a tab that does not exist');
});
});
This will throw a Port error if the open tab was loaded before the extension was installed. To recreate:
Open a new tab and load a web page
Navigate to the extensions tab and reload the local unpacked extension
Navigate back to the web tab and invoke the extension via a Browser Action--it will throw the Port error unless the web page is manually reloaded.
Is there a workaround for this?
Instead of sending a message, programatically insert a content script and use the callback's results:
chrome.tabs.query({
currentWindow: true,
active: true
}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {
code: 'location.href',
runAt: 'document_start',
allFrames: false // Run at the top-level frame only to get
// just one result
}, function(results) {
var result = results[0];
console.log(result); // Example
});
});
Instead of specifiying the code in a string, you can also run a file by using file: 'code.js' instead of code: '...'.