I'm struggling trying to get a link to pop up in in the Dropbox chooser drop-in app. I'm using the javascript method and inserting into an html page. The dropbox chooser button shows up, and I'm able to select a file from the dropbox pop-up window, but the result is just a green checkmark and NO link like in the demo (I've tried both the direct and preview method). I've been struggling with this for a few hours. Anyone see anything wrong, or have a good code snipeet they want to share?
Here's my code:
<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="XXXXXX"></script>
<!-- Replace data-app-key with yours --> <script type="text/javascript">
// add an event listener to a Chooser button
document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
function(e) {
alert("Here's the chosen file: " + e.files[0].link)
window.location.href = 'e.files[0].link';
}, false);
</script>
<input data-link-type="direct" id="db-chooser" name="selected-file" type="dropbox-chooser" />
<div id="link-div" style="display: none">Link:</div>
<script type="text/javascript">
document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
function(e) {
var link = document.getElementById("link");
link.textContent = link.href = e.files[0].link;
document.getElementById("link-div").style.display = "block";
}, false);
</script>
I see two issues in the above code.
The first script references db-chooser before it's actually on the page, so that may not be working at all.
The second script looks for an element called link, but I think you mean link-div.
Finally, you might want to update to the latest version of dropins.js, just because it's the latest. :-) The input tag version has gone away, and instead you can use createChooseButton. Here's a complete working example using the latest version:
<!doctype html>
<html>
<head>
<script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="XXXXXX"></script>
</head>
<body>
<div id="container"></div>
<a id="link"></a>
<script>
var button = Dropbox.createChooseButton({
success: function(files) {
var linkTag = document.getElementById('link');
linkTag.href = files[0].link;
linkTag.textContent = files[0].link;
},
linkType: 'direct'
});
document.getElementById('container').appendChild(button);
</script>
</body>
</html>
Related
I will edit this main post to update with the latest code and avoid confusing.
The problem is that Im popping up a new window with a button, but this new window is not making a script work even if its being loaded in the HTML code.
To make this easier, I just added a window.alert to the script that should be working into the new window, and its never showing.
This is what we use to pop up the new window (actually working and popping up the new window properly)
jQuery(document).ready(function( $ ){
$("#imprimirPdf").live("click", function () {
var divContents = $("#cartaDeAmor").html();.
var printWindow = window.open('', '', 'height=400,width=800')
printWindow.document.write('<!DOCTYPE html>');
printWindow.document.write('<html>');
printWindow.document.write('<head>');
printWindow.document.write('<script type="text/javascript" src="http://www.mywebsiteurl.com/descargarPDF.js"><\/script>'); // <-- Loading the script that is not working.
printWindow.document.write('<script type="text/javascript" src="http://www.mywebsiteurl.com/html2pdf.bundle.min.js"><\/script>');
printWindow.document.write('</head>');
printWindow.document.write('<body>');
printWindow.document.write('<div id="carta">Content</div>');
printWindow.document.write('<input type="button" value="Function trigger test" onclick="eKoopman2();">'); // Calling the function
printWindow.document.write('<script>')
printWindow.document.write('(function() { eKoopman2(); })();'); // Calling the function again
printWindow.document.write('<\/script>')
printWindow.document.write('</body>')
printWindow.document.write('</html>');
printWindow.document.close();
});
});
This can be found at "descargarPDF.js" (the script that I need to be loaded)
function eKoopman2() {
var element = document.getElementById('carta');
html2pdf(element);
window.alert("sometext");
}
This is what we find in the HTML code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.mywebsiteurl.com/descargarPDF.js"></script>
<script type="text/javascript" src="http://www.mywebsiteurl.com/html2pdf.bundle.min.js"></script>
</head>
<body>
<div id="carta">Content to be exported</div>
<input type="button" value="Function trigger test" onclick="eKoopman2();">
<script>(function() { eKoopman2(); })();</script>
</body>
</html>
And the problem is that the alert loaded in the script is never showing. Not working in the button click and not working in the self called function.
just to set the scene I'm figuring out web development on my own so don't have a lot of knowledge and I hope you could help me out.
So the concept is on HTML page 1 I choose a image and due to the clicking I change it in the second html page.
This is the js file linked to the first html page. Here I store my source of the chosen image in the variable result.
result="";
document.getElementById("choice1").addEventListener("click", function() {
var elem =document.getElementById("choice1");
result = window.getComputedStyle(elem, null).getPropertyValue("background-image");
return result
});
document.getElementById("choice2").addEventListener("click", function() {
var elem =document.getElementById("choice2");
result = window.getComputedStyle(elem, null).getPropertyValue("background-image");
return result
});
document.getElementById("choice3").addEventListener("click", function() {
var elem =document.getElementById("choice3");
result = window.getComputedStyle(elem, null).getPropertyValue("background-image");
return result
});
The second html is shown below. The source of the image (here set at nature) should be changed when I choose another image on the first html through the previous js file above
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<img id="current" src="nature.jpg" width="100%" height=auto>
<script src="main.js"></script>
<script src="expose.js"></script>
</body>
</html>
The js file for the second html looks like this. I use setInterval to make it update automatically only if the current image on html2 isn't the same as the source of the id="current" image
setInterval(currentStatus,3000)
currentStatus{
if(document.getElementById("current").src !== result) {
document.getElementById("current").src = result
console.log("changes applied")
} else {
console.log("nothing changed")
}
}
Thanks for the help !
(ps: I prefer not to work with local storage)
I am using following coding in a external js file
$( document ).ready(function() {
var elem='<img class="imgload" src="/common/images/spinLoader/transperent.png">';
$('.imgchange').append(elem);
});
$(function(){
$('.hid').click(function(){
$('.imgload').attr('src',"/common/images/spinLoader/loader_icon.gif");
var link = $(this);
if(link.hasClass('disabled'))
{
return false;
}
else
{
link.addClass('disabled');
}
});
});
In the HTML
<td><a class="hid" href="somelink.jsp"></a></td><td class="imgchange"></td>
The whole set up is to disable the link and display spinning loading icon after user clicks the link.
The problem is i firefox 38.0.1 the link is disabled but the image doesn't change to loading icon at first click. IF i click another time only the image is changing.
I checked with the debugger, when i run through the debugger the image is changing at the first click.
I tried putting the onclick function inside the $( document ).ready() it doesn't worked.
FYI: It is working without problem in Chrome Version - 43.0.2357.65 m and IE 11.
Your HTML element is not correctly formatted, the "" should move inside the "" scope, and the "" should be "", maybe this is the problem.
I tried to reproduce your issue using:
firefox 38.0.1-1 (linux machine).
I got it working as you want to, So I don't know where is your problem comming. I can suggest a little change that maybe is causing the issue:
<td><a class="hid" href="somelink.jsp"></a></td><td class="imgchange"></td>
Removing the href, cause it makes no sense for me to use .click() function on element that has it owns function (HTML).
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.imgchange{ width: 100px; height: auto; }
</style>
</head>
<body>
<table>
<tr><td><a class="hid" onclick="myFunction('link2.html');">Click me!</a></td><td class="imgchange"></td></tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
var elem = '<img class="imgload" src="http://m.mexicodesconocido.com.mx/images/lazy-thumb.gif">';
$('.imgchange').append(elem);
});
function myFunction(link){
$('.imgload').attr('src',"http://www.deckers.com/wp-content/plugins/simplemap/inc/images/loading.gif");
if($(this).hasClass('disabled'))
{
return false;
}
else
{
$(this).addClass('disabled');
}
location.href = link;
}
</script>
</body>
</html>
I have the following scenario like this :
I have a main window[main.html]. There are three links called Popup1, Popup2, Popup3. On clicking the link open Popup1 window, Popup2 window respectively.
<html>
<head>
<title>Popup Focus Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
openWin[index] = w;
});
});
</script>
</head>
<body>
<div id="elem">
Pop 1
Pop 2
Pop 3
</div>
</body>
</html>
Now the windows open are window 1 & window 2. I want to transfer the focus of the window 1 from window 2. is there anyway this can be done?
pop1.html
<html>
<head>
<title>Popup 1 Example</title>
<script type="text/javascript">
function go() {
if(window.opener.openWin) {
var popup2 = window.opener.openWin[1];
popup2.focus();
}
}
</script>
</head>
<body>
<div>
popup 1 example
</div>
<div>Go to Popup2</div>
</body>
</html>
pop2.html
<html>
<head>
<title>Popup 2 Example</title>
</head>
<body>
<div>
popup 2 example
</div>
</body>
</html>
Check main.html code in fiddle http://jsfiddle.net/tmf8cry8/2/
You have written the code properly, please implement the two changes as listed below...
1) You need to push the window object in openWin Array
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
//openWin[index] = w;
openWin.push(w); //Push the window object
});
});
2) Access the window object using the array index to focus the window
function go() {
//console.log(openWin);
//if(window.opener.openWin) {
// var popup2 = window.opener.openWin[1];
//popup2.focus();
//}
//Supposing that pop1, pop2 and pop3 are opened, you want to access pop2
openWin[1].focus();
}
Hope it helps!
You can use the method window.open
window.open("",window_name).focus();
Assuming your window is opened, you can transfer focus to the window using the above code.
Please use the following code in pop2.html and try [after opening all windows in a sequential order].
<html>
<head>
<title>Popup 2 Example</title>
<script language="javascript">
function openNew()
{
window.open("","Pop 3").focus();
}
</script>
</head>
<body>
<div>
popup 2 example
</div>
<a href="javascript:void(0);" onclick="javascript:openNew();">
Go to pop3</a>
</body>
</html>
As per you code, you are using title attribute to naming windows, hence Pop 3 is used to transfer focus to Pop 3 window.
Alternatively, you may check if the window instance is opened or not and then load the URL entirely or transfer focus
Hope it helps!!!
Make go() function just call a function in the opener window, e.g.:
window.blur(); //focus out of here
window.opener.myParentWindowFunction( 2 );
That function (in the "parent" window) should call then a function in the target window that just "window.focus()".
funtion myParentWindowFunction( target ){
window.blur();//focus out of here also
openWin[target].callFocus();
}
And on every popup:
function callFocus(){ window.focus(); }
You can't make a window "send" the focus to another (security issues I guess), but you can make a window to "ask for it"... and depends on the browsers if it's going to get it (in chrome doesn't work, but if you add an alert() after the focus it will change the window. Funny, because if you just put the alert but not the focus it doesn't swap the windows...)
Code is just a mockup, but that's the concept. You have to use the opener window as relay comunicate to the desired window that it have to call the focus. Hope you don't need it really crossbrowser.
In my background (background.html) page I have the following js:
function capturePage(){
chrome.tabs.captureVisibleTab(null, function(img){
var screenshotUrl = img;
chrome.tabs.create({"url":"history.html"}, function(tab){
var t = tab;
var addImage = function(){
var view = chrome.extension.getViews()[0];
view.setImageUrl(screenshotUrl);
}
chrome.tabs.onUpdated.addListener(addImage);
});
});
}
chrome.browserAction.onClicked.addListener(capturePage);
and in history.html I have:
<html>
<head>
<title></title>
<script>
function setImageUrl(url){
document.getElementById("target").src = url;
}
</script>
</head>
<body>
<img id="target" src="" >
</body>
</html>
However, "view.setImageUrl(screenshotUrl)", in background.html, fails as it says the view has no such function. Just to be clear, I'm trying to access a function within history.html AND pass a parameter to it (screenshotUrl).
EDIT: re Serg's suggestion I replaced the var addImage function in background with the following:
var port = chrome.tabs.connect(tab.id,{name: "history_connect"});
port.postMessage({mType:"url",url:screenshotUrl});
Then added a listener on the history page... worked!
I haven't used getViews() before so I can't comment on that (what does console say when you dump chrome.extension.getViews() into it?), but here is couple workarounds:
Pass your url as get parameter during tab creation (history.html?url=<urlencoded_url>)
Use requests. chrome.extension.sendRequest({url:url}); in bkgd page and chrome.extension.onRequest.addListener() in history.html
Use "pull" instead of "push". In history.html you can use chrome.extension.getBackgroundPage().getMyUrl()
I would use the first solution as it is the easiest and fastest.