Ajax not loading without refreshing the page - php

Question

This following ajax code not working without refresh can anyone tell me what I am doing wrong, thanks
$(document).ready(function() {
fetch_data();
function fetch_data(){
var action = "fetch";
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function(data) {
$('#image_data').html(data);
}
})

Answer 1

Place function outside $(document).ready(function), because function must be loaded before all page load
You can run function while click on "Run Function" button
<button id="run_function">Run function</button>
$(document).ready(function(){
fetch_data();
/* Script for run function on button click */
$('#run_function').click(function() { fetch_data(); return false; });
});
function fetch_data()
{
var action = "fetch";
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#image_data').html(data);
}
});
}

Answer 2

Your code will only run once per page load unless you call it via some other method. Here is a script that will run it each time you press the button. Also, make sure you have jquery installed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" onClick="fetch_data()" value="Run Function">
<script>
function fetch_data(){
var action = "fetch";
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#image_data').html(data);
}
});
$(document).ready(function(){
fetch_data();
});
</script>