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.
Related
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.
I'm a beginner with JQuery and I was trying to create a button that dynamically changes the colors defined in the CSS depending on what color it is right now (just switch between blue / red) and also change the text on the button.
The .draggable() part executes just fine and so does the first and last console.log, so everything but the part within the click event handler works ... but why?
Relevant html code:
<!DOCTYPE html>
<html>
<head>
<title>Meine Website</title>
<meta charset="utf-8">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
type="text/javascript">
</script>
<script src="home_jquery.js"></script>
<script src="home_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="home_style_blau.css">
</head>
<body>
<input type="button" id="farbwechsel_button" value="Rot" />
/* rest of html (taschenrechner_box, etc.) */
</body>
Here's the jQuery part:
var blau = true;
$(document).ready(function () {
$('#taschenrechner_box').draggable();
console.log("test1");
$('#farbwechsel_button').click(function() {
console.log("test2");
if (blau == true) {
console.log("blau = " + blau);
$('body').css({"background-color": "8b0000"});
$('#farbwechsel_button').value = "Blau";
blau = false;
}
else {
console.log("blau = " + blau);
$('body').css({"background-color": "lightsteelblue"});
$('#farbwechsel_button').value = "Rot";
blau = true;
}
console.log("test3");
})
console.log("test4");
});
In your HTML you have:
<input type="button" id="farbwechsel_button" value="Rot" />
But in your JS you refer to
$('#farbwechel_button').click(function() {
Note the forgotten s in your JS. So the JS should be:
$('#farbwechsel_button').click(function() {
Edit: you've forgotten the s in al your referrals to the button. Don't forget to add it everywhere. You've also forgotten a ; just before the last console.log() function.
Edit 2: Here's a Fiddle with a working example. It's pretty much self explanatory. In this case you preferably should make use of classes which you toggle on pressing the button.
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>
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.