OnClick function issue in firefox - javascript

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>

Related

Cannot trigger a script in a pop-up window

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.

Want to make an empty <div> element clickable via JavaScript (no jQuery)

I am trying to make two empty <div> elements clickable through the use of HTML and Javascript alone. No jQuery.
I have this HTML document...
<!DOCTYPE html>
<html>
<head>
<title>whatever</title>
<link rel="stylesheet" href="css_squares" media="screen" >
<script src="lala.js"></script>
</head>
<body>
<h1>Clickable Squares</h1>
<div id="top_square" onclick="alert('Top square clicked')">
</div>
<div id="bottom_square">
</div>
</body>
</html>
and also have this simple CSS...
#top_square {
width: 50px;
height: 50px;
background-color: #01FF55;
}
#bottom_square {
width: 150px;
height: 150px;
background-color: #AB877F;
}
I want to make both squares create an alert box when clicked. The top square already achieves this through the HTML code, but I am unable to get the bottom
square to create a similar alert through Javascript code.
This is what I have tried...
window.onload = init;
function init() {
alert("you have successfully loaded an external .js file.");
// this is just to check that lala.js is loading.
var bottom_sqr = getElementById("bottom_square");
// I also tried calling 'document.getElementById'...
bottom_sqr.onclick = handle_bottom_click;
function handle_bottom_click() {
alert('Bottom square clicked');
}
This is not working at all... hence the post obviously.
Any help would be greatly appreciated.
You're missing a closing bracket on your init method and yes, document is required there. window is javascript's global object and no method window.getElementById exists:
function init() {
alert("you have successfully loaded an external .js file.");
// this is just to check that lala.js is loading.
var bottom_sqr = document.getElementById("bottom_square"); // document is required here
bottom_sqr.addEventListener('click', handle_bottom_click);
function handle_bottom_click() {
alert('Bottom square clicked');
}
}
Since an HTMLElement isn't "clickable" by default, you need to attach an event listener with addEventListener instead of just element.onclick.
Edit: Apparently element.onclick is valid as onclick is a global event handler.
This code works
var v = document.getElementById("bottom_square");
v.onclick = function(){
alert("Bottom square clicked");
};
JSFiddle link - https://jsfiddle.net/41Ljp1w7/
The problem in your code is aside from missing closing bracket in init method and document selector, you are calling functions without using first brackets i.e. "window.onload = init;" instead of "window.onload = init()"

Set iFrame source and reload with jQuery

I have a unique issue that--while I've seen similar questions and answers--none quite address my challenge.
Currently, I provide a "print" button that loads the print dialog on a browser based on an embedded and hidden iframe. This works just fine, but I don't want to slow down page loading by pulling in the iframe for a large PDF.
So, I want to load an iframe without the source, then write the proper source url if the user clicks the print icon, then reload the iframe, and finally, show the dialog box.
Unfortunately, the print dialog pops up before I can reload the iframe so loads a blank page in the dialog box. On subsequent clicks, the PDF is loaded and ready for print.
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<iframe id="iFramePdf" src="" style="display:none;"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#load_pdf").click(loadPDF);
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
function sendPrint(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
});
</script>
I've tried the following various methods to reload:
// Attempt 1
$('#iFramePdf').attr('src', function () { return
$(this).contents().get(0).location.href });
// Attempt 2
$('#iFramePdf').attr("src", $('#iFramePdf').attr("src"));
$('#iFramePdf').attr('src', function () { return $(this).contents().get(0).location.href });
// Attempt 3
$('#iFramePdf')[0].contentWindow.location.reload(true);
// Attempt 4
var getMyFrame = document.getElementById(elementId);
getMyFrame.contentWindow.location.reload(true);
I've even tried using jQuery's defer method, but had no luck with that (possibly because I'm lacking knowledge). If I could get any guidance, I'd appreciate it.
try to change this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
to something like this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
}
$('#iFramePdf').load(function(){
sendPrint('iFramePdf')
})
it should work
You can try .promise(). For obvious reasons I can't test it out, but I think 3 seconds should be adequate for the iframe to load. Be aware that this is as syntactically correct as I can get it without testing it out. Adjust the fadeIn(1800) and the delay(1200) accordingly.
HTML
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<p id="msg" style="display: none;">Printing Document...</p>
<div id="printPort" style="opacity: 0; width: 1px; height: 1px;"></div>
jQuery
$(function() {
$("#load_pdf").on('click', loadPDF('my.pdf'));
// Create the iframe, and put it inside #printPort
// Change it's src to the file argument
// Animate the #msg for 3 seconds
var loadPDF = function(file) {
$('<iframe id="iFramePdf" src="blank.html"></iframe>').appendTo("#printPort");
$("#iFramePdf").att('src', file);
return $('#msg').fadeIn(1800).delay(1200).fadeOut();
}
var sendPrint = function(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
// Once the animation is done the promise will resolve and sendPrint will execute on callback.
$.when(loadPDF).done(sendPrint('iFramePdf'));
});

Link not showing in dropbox chooser app

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>

changing image src onClick without using attr

Is there something wrong with this code? I am trying to do the simple action of changing the src of an img named "midimg" upon mouse-click. It's not working and i don't know why
<script type="javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}
</script>
<div onClick="buttonInCompany()">Everything is cage's cage.<br><br></div>
<img name="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">
Do you need the jQuery line? I just dropped it, than it works as expected.
function buttonInCompany()
{
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}
Seeing as how you are apparently already using a js framework (I assume jQuery), why not do it a more proper way to begin with?
<script type="text/javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
$('#midimg').attr("src","http://cageme.herokuapp.com/css/mrcage.jpg");
}
$(document).ready(function() {
$("#someID").click(function() {
buttonInCompany();
});
});
</script>
<div id='someID'>Everything is cage's cage.<br><br></div>
<img id="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">

Categories

Resources