jQuery document.ready does not fire, no jQuery works

Question

I've looked at a few other similar questions here and tried the following:

1. change all $ to jQuery
2. make sure i am using the proper src
3. use jQuery.noConflict()

I am trying to access data from a SQLite3 database (which works fine), in an html file.

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(){console.log("HELLO");}
</script>

I do not get the console message, no matter where I place it! It seems none of my jQuery is working.

Here's where I am trying to access the data:

<div class="panel-body">
  The website you're most active on:
  <select onchange="dropdown(this)">
  <option value='PastHour'>Past Hour</option>
  <option value='Past2Hours'>Past 2 Hours</option>
  <option value='PastDay'>Past 24 Hours</option>
</select><br><br>


<script type="text/javascript">

 if()
  <b>Most Frequently Visited:</b><div id="most-freq"></div>
  <b>Second Most Frequently Visited:</b><div id="most-freq-2"></div>

</div>

function dropdown(that) {

  const requestURL = 'data/' + that.value;
  jQuery.ajax ({
    url: requestURL,
    type: 'GET',
    dataType: 'json',
    success: (data) => {
    console.log('data:', data);
    console.log(data.Most);
    console.log(data.SecMost);
    jQuery('#most-freq').html(data.Most);
    jQuery('#most-freq-2').html(data.SecMost);
}

})

}
</script>

I can access localhost/data and get the data I want to see, so I believe the app.get functions in my .js file are okay.

In addition to the data not being displayed or printed to console, I get the error message that dropdown is not defined. I think this is because of the scope, how could I change it?

Answer 1

Your code should be:

jQuery(document).ready(function () {console.log("HELLO");});

instead of:

jQuery(document).ready(){console.log("HELLO");}

It does not throws any error log because there is no error. Using the correct indentation it is easy to see the difference:

Correct behavior:

jQuery(document).ready(function () {
    console.log("HELLO");
});

Wrong behavior:

jQuery(document).ready();
{
    console.log("HELLO");
}

Answer 2

From JQuery ready's documentation link

JQuery has three way to execute javascript code when the DOM is fully loader. These are:

• $( handler )
• $( document ).ready( handler )
• $( "document" ).ready(handler )

Example:

$(function(){ do something ... });

or

$(document).ready(function(){ do something .... });

Answer 3

Your Code function() is required. It specifies the function to run after the document is loaded

jQuery(document).ready(){console.log("HELLO");}

If you're still having trouble try this:

Ref: Code from https://learn.jquery.com/using-jquery-core/document-ready/

$( document ).ready(function() {
    console.log( "ready!" );
});

Answer 4

jQuery don't is for debugging purposes. You can instance the console when something happens.

$('#buttonTest').click(function() {
  console.log('you click on buttonTest');
  // do something
});

For some reasons, the console object could be unavailable. Then you could check if it is - this is useful as you don't have to remove your debugging code when you deploy to production:

if (window.console && window.console.log) {
  // console is available
}

and i suggest use the val with this method:

<select id="mySelect" onchange="myFunction($(this).val());">
<option value="testVaue">Ford F150<option>
</select>
function myfunction(mySelect){alert("my val from select: "+mySelect );}