I have a page that I'm loading through jQuery's .load. The page loads fine, but if I attempt to write to the console.log it does not work?

Any thoughts on what I might be missing? If I use alert() instead of console.log(), it works fine.

This works:

jQuery(".abs").on("click", function () {
alert('You are here');
    var id = jQuery(this).attr("id");

This does not:

jQuery(".abs").on("click", function () {
console.log('You are here');
    var id = jQuery(this).attr("id");

5/3/2017 Update: I've created a basic test application to prove my point. You can view it at: http://www.bowling-tracker.com/Test/load_console.php

It has 2 pages. The first is the HTML page with the 2 divs. Here is the code for that page:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="button_div">
    <button type="button" id="button">Load Page</button>
<div id="input_form"></div>
jQuery("#button").on("click", function() {
    var link = "input_form.php";

I then have a page called input_form.php which has its contents loaded to the div named "input_form". Here is the code for that page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        This is a Test form.
    <button type="button" id="button_log">Write to Console Log</button>
    jQuery("#button_log").on("click",function() {
        alert("you are here");
        console.log("Hello World");
        alert("Should have wrote to Console Log by now");

As you'll see in my test application, the Hello World never processes to the console.log in Google Developer Tools even though the alert before and after it work perfectly fine.

Hopefully this test application can provide the details needed for someone to tell me what is going on.


OK.. I guess I feel stupid now because it's working. Maybe I just didn't have it on Info. I hate that Google changed these a drop-down. It was obvious when they were buttons and you could look at a few of them at a time.

  • OK... after looking at this, the sample works with the "Info" being selected. Guess I'll dig further as it still does not seem to be working correctly within my Joomla installation. – chasiv May 3 '17 at 16:47

The code snippet you provided works fine for me in both Firefox and Chrome.

My suggestions would be first to reset the log - see this question.

If that does not work, try it in a different vanilla browser - if you are using something like Firebug then that can take over the console's natural behavour.

Finally, does adding a <script>console.log("hello world");</script> to your template work?

If the hello world example works but the other still does not work, can you clarify a bit more about where/how you are adding the script. For example, my test was on the complete callback of JQuery's load function, rather than in the page it is loading.

  • I've updated my original post with a sample application that shows the console.log is not working. – chasiv May 3 '17 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.