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.
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 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 Ember.js to implement a lightbox containing a Google Map. The problem is that when the map is in the lightbox it renders shifted up and to the left of where I expected it to be. The left over space on the bottom and right is just a blank area where you cannot drag the map. When I render the same map view in the main page, there is no problem. I also noticed that if I open the developer tools (in Chrome and Firefox), the map becomes correct. I have no idea why that is.
Here's the JSFiddle: http://jsfiddle.net/hekevintran/qt5k4/9/.
Screenshot (the bottom map is in the lightbox):
HTML:
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/x-handlebars" data-template-name="buttons">
<button {{action "openBox" }}>Open Box</button>
<button {{action "closeBox" }}>Close Box</button>
{{view App.MapView}}
</script>
<script type="text/x-handlebars" data-template-name="lightbox">
<div style="
background-color: lightgray;
border: 2px solid #000000;">
{{view App.MapView}}
</div>
</script>
JavaScript:
App = Ember.Application.create({});
App.MapView = Ember.View.extend({
installMap: function () {
var mapOptions = {
// San Francisco
center: new google.maps.LatLng(37.773429,-122.424774),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(this.$()[0], mapOptions);
},
didInsertElement: function () {
this.$().css(
{'height': '350px',
'width': '350px'}
);
this.installMap();
}
});
Lightbox = Ember.Object.extend({
isVisible: false,
open: function () {
this.set('isVisible', true);
},
close: function () {
this.set('isVisible', false);
},
view: function () {
var controller = this;
return Ember.View.extend({
templateName: 'lightbox',
controller: controller,
isVisibleBinding: 'controller.isVisible'
})
}.property()
});
lightbox = Lightbox.create();
Ember.View.create({
templateName: 'buttons',
controller: Ember.Object.create({
openBox: function () {
lightbox.open();
},
closeBox: function () {
lightbox.close();
}
})
}).append();
lightbox.get('view').create().append();
The problem is that you are creating the map in the lightbox when you first load your page. This happens when you call lightbox.get('view').create().append(); at the end of your JavaScript page.
But the lightbox is not visible yet, and that confuses the Maps API. You could probably work around the problem by triggering a resize event on the map after opening the lightbox, but it's better by far to avoid creating the map and the lightbox view until you need them.
That fixes the problem, and as a bonus your page loads faster because you avoid creating the second map at load time.
To do this, I replaced the last part of your code with:
var lightbox;
Ember.View.create({
templateName: 'buttons',
controller: Ember.Object.create({
openBox: function () {
if( ! lightbox ) {
lightbox = Lightbox.create();
lightbox.get('view').create().append();
}
lightbox.open();
},
closeBox: function () {
if( lightbox ) {
lightbox.close();
}
}
})
}).append();
As you can see, I moved the lightbox = Lightbox.create(); and lightbox.get('view').create().append(); calls inside openBox(), but only calling them the first time this function is called.
I also added a guard in closeBox() so it doesn't try to close the nonexistent lightbox if it hasn't been created yet.
Here is an updated fiddle with the working code.
Im trying to get some html5 post messaging going with dojo 1.8, i've created a jsfiddle to try to explain it better. One thing to note is that the button is being loaded within the iframe. So basically if a click happens within the iframe then the parent node should receive and act upon the message. Any pointers would be appreciated.
http://jsfiddle.net/AvPFv/
Basically, you should listen for message on iframe window, i.e. iframe.contentWindow. Also, please note there is no dojo in your iframe.
I created a jsFiddle to show how it works: http://jsfiddle.net/phusick/H7Zh8/ but I'm afraid it is very messy to have everything in a single file, i.e. in the context of the parent window, because it does not explain properly where window reference points to and it does not simulate real world usage. I suggest you try it at localhost having two sets of scripts, one for parent window and one for iframe.
require([
"dojo/dom",
"dojo/on",
"dojo/date/locale",
"dojo/domReady!"
], function(
dom,
on,
locale
) {
var buttonNode = dom.byId("postMessageButton");
var iframeNode = dom.byId("iframe");
var iframe = iframeNode.contentWindow;
var iframeButtonNode = iframe.document.getElementById("postMessageButton");
on(buttonNode, "click", function() {
iframe.postMessage("hello from parent", "*");
});
on(iframe, "message", function(event) {
var msgNode = iframe.document.getElementById("msg");
msgNode.innerHTML += formatMessage(event);
event.source.postMessage("echo from iframe", "*");
});
on(iframeButtonNode, "click", function() {
iframe.parent.postMessage("hello from iframe", "*");
})
on(window, "message", function(event) {
dom.byId("msg").innerHTML += formatMessage(event);
});
function formatMessage(event) {
var time = locale.format(new Date(event.timeStamp),{
selector: "time",
formatLength: "medium"
});
return time + ": " + event.data + "<br>";
}
});
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'
}