Take the "Terms of Service" example found on the developers page. If you click on "Ok," I want the page to redirect elsewhere. I'm modifying this code to show an image and the "Ok" button is really a delete button. I have everything working, except I'm not sure how to tie that button into an action.
function picFunction(theurl) {
var imgBox = new Facebox({
ajaxDelay: 100,
draggable: false,
title: 'Terms and conditions',
url: theurl,
submitValue: 'Delete',
submitFunction: function() {
imgBox.fade();
var confirm = new Facebox({
width: 200,
title: 'Confirm',
message: 'Are you sure you want to delete?',
submitValue: 'Yes',
cancelValue: 'No',
submitFunction: function() {
confirm.close();
imgBox.close();
},
cancelFunction: function() {
confirm.fastclose();
imgBox.unfade();
}
});
confirm.show();
}
});
imgBox.show();
}
You need to update the window location to reload the page at the given URL. So your inner submitFunction should look something like this, you don't need to worry about closing the Facebox because the page will redirect anyway.
submitFunction: function() {
window.location = 'http://www.pagetosendto.com'
}
Related
I am developing a chrome extension. I am trying to get the selected/highlighted text from the active tab and do something with it. For now, say all the extension does is writing what the selected text is on a popup. I can't seem to do it. I tried a lot of methods. content script, background scripts. Nothing works. in my manifest.jsonI have permissions for activeTab, contextMenus. I tried multiple functions that take the selected text but nothing works. Example of some functions
const text = (window.getSelection) ?
window.getSelection().toString() :
document.selection.createRange().text;
console.log(text)
chrome.contextMenus.create({
id: 'selectionGetter',
title: 'send selected text',
contexts: ['selection'],
});
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"},
function(response){
const url=response.url;
const subject=response.subject;
const body = response.body;
console.log(body)
});
});
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"},
function(response){
sendServiceRequest(response.data);
});
});
Would love your help
See How to access the webpage DOM rather than the extension page DOM? for full explanation, here's a quick illustration:
chrome.tabs.executeScript({code: 'getSelection().toString()'}, ([sel] = []) => {
if (!chrome.runtime.lastError) {
document.body.textContent = 'Selection: ' + sel;
}
});
If you have default_popup declared in manifest.json then put this code in popup.js, and put <script src=popup.js></script> in popup.html. It will run each time the popup is shown.
Otherwise put it inside chrome.browserAction.onClicked listener in the background script.
I created a Chrome extension. The function works fine in a single page.
Currently the problem is that how to check if the extension has been activated in each tab. So I can re-initialise the toolbar icon.
Steps to reproduce:
1. In page A, active the extension, change toolbar icon to close icon.
2. Open a new page B, the icon still keep using close icon.
I just want to make the toolbar icon reflect to each page.
I try to use tabs onUpdated, but it will affect the extension activated page.
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
chrome.browserAction.setIcon({
path: "images/logo.png"
});
});
You could call chrome.browserAction.setIcon() passing tabId key, like:
chrome.browserAction.setIcon({
tabId: my-tab-id,
path: {"images/logo.png"}
});
You could also update the icon from background to all tabs, when some condition happens, so you could do something like this:
if (someCondition) {
chrome.tabs.query({}, function(tabs) {
tabs.forEach(tab => {
chrome.browserAction.setIcon({
tabId: tab.id,
path: {"images/logo-A.png"}//ICON A
});
});
});
} else {
chrome.tabs.query({}, function(tabs) {
tabs.forEach(tab => {
chrome.browserAction.setIcon({
tabId: tab.id,
path: {"images/logo-B.png"}//ICON B
});
});
});
}
My Google Chrome Extension currently retrieves the ImageURL which was right-clicked from the menu, but that's not enough. I also need to do this:
Get the DIV Element inside which this specific Image was clicked.
Get some text strings stored inside this DIV, or in sub-DIVs, next
to the clicked image.
So far I have this, which is working:
background.js
// Add context menu for Images
chrome.contextMenus.create({
"title": "Get this Image",
"contexts": ["image"],
"onclick" : getInfo
});
function getInfo(e)
{
var imgURL = e.srcUrl;
// Set up an event which Content will receive
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {url: imgURL}, function(response) {
alert('Response in Background');
});
});
}
contentscript.js
// Listener for Background Event Sends
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
// print Image Src URL in a custom Content-created place
divHTML = request.url;
document.getElementById('infoDiv').innerHTML = divHTML;
});
Where do I do the extra work to analyze the DOM tree and retrieve extra surrounding elements? In the Background or in the Content?
I changed the entire question because I didn't provide enough info's at the first run: thanks goes to #Sergio.
There are alot of things not working in IE.
When I do addEvent('domReady').... It's even more bad(it doesn't gets executed but if I refresh the page... it works).
Is there a proper way to handle that IE stuff in MooTools?
note:
working on every browser on the whole planet except IE*
edit: added the complete source code of ajax cart.
This code it correct, it's just for understanding purpose only:
ajax_cart.js
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: 'changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct'+(new Date().getTime())
},
initialize: function() {
var cart = this;
this.elem = $(this.options.elem_id);
if (this.elem) {
this.elem.addEvent(this.options.event, function() {
cart.viewCart();
});
}
},
getCart: function() {
var cart = this;
var myHTMLRequest = new Request.HTML({
url: cart.options.url,
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
//console.log(responseHTML);
if (!cart.cartDiv) {
cart.cartDiv = new Element('div', {'class':'ajax-cart'});
cart.cartDiv.fade('hide');
cart.cartDiv.inject(cart.elem);
cart.cartDiv.addEvent('mouseleave',function() {
this.fade('out');
});
}
cart.cartDiv.innerHTML= responseHTML;
cart.cartDiv.fade('in');
},
onFailure: function(xhr) {
console.log(xhr.responseText);
}
}).get();
},
viewCart: function() {
if (this.cartDiv) {
this.cartDiv.fade('in');
} else {
this.getCart();
}
}
});
This code works on every browser except IE, only after refreshing the page, it works.
in index.html
if(Browser.ie) {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
} else {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
}
In some versions of Internet Explorer (ie. IE6) a script tag might be executed twice if the content-type meta-tag declaration is put after a script tag.
The content-type should always be declared before any script tags.
See here http://mootools.net/docs/core/Utilities/DOMReady
I guess there is no solution so I had to find a workaround for this.
What I did:
Since my problems were solved by refreshing the page, I did this in meta tag.
<meta http-equiv="Expires" content="-1" />
It might help someone else, when it comes up to fixing IE refreshing bugs.
I'm using the jquery-ui-map plugin and my test page (test.html) loads a Google Map correctly when I click the button. This SAME test.html don't work if a load it from another jquery mobile page. What I'm doing bad or what I'm missing? Next the significant code:
Javascript in the header (like in the example for the basic map):
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({
'center': mobileDemo.center,
'zoom': mobileDemo.zoom,
'disableDefaultUI':true,
'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
And the html (sorry, I can't post the HTML code because it's interpretatded, but the link is below):
http://www.medlifesolutions.com.mx/locations/mobile/test.html
As I said, this works perfect if I write test.html in the browser directly but if comes from another page:
http://www.medlifesolutions.com.mx/locations/mobile/main.php
it simply ignores a "click" or touching the button to show the map. Thanks in advance for your help.
One problem I see in your code is the use of live. It is recommended to replace live with on.