user ajax to get data without "onClick function" in javaScript

Question

I've been searching for the example of getting data by using ajax without onclick function but most of the example that i found was within onclick funtion.
Here is the html that i successfully get the data by using Onclick funtion

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>New document</title>

   <script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>

<script type ='text/javascript' src='js/testScript.js'></script>

<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
   content goes here
   <aside id="offer" onclick ="loadDoc('getData.php',myFunction)">
        &nbsp; click here
        </aside>
</body>

here is the script

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("offer").innerHTML =
  xhttp.responseText;
}

Now, i wanted get the data without the onclick function.
I want the data show once i open the html.
Can someone provide me some link or gv me an example ??

Why don't you move the function call out of onclick and within <script> tags? That should resolve it. — cosmoonot
– cosmoonot, Commented Apr 7, 2017 at 6:35
you have the loadDoc function which is independed to onClick, you may call it from wherever you want. Perhaps you want to ask how to call a function when the page loads? — Alexandru Severin
– Alexandru Severin, Commented Apr 7, 2017 at 6:35
Thanks for every suggestion and answer! i've learnt a new things today! =) Much Appreciate! — ccs
– ccs, Commented Apr 7, 2017 at 7:16

Pramod Patil · Accepted Answer · 2017-04-07 06:44:30Z

1

Body onload doesnt required. You can directly use window onload function in JS

JS

window.onload = function() {
  loadDoc('getData.php',myFunction)
};

answered Apr 7, 2017 at 6:44

Pramod Patil

2,7632 gold badges16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sachin Bahukhandi Over a year ago

He needs to remove the onclick event over which the function is loading if im not wrong.

Pramod Patil Over a year ago

That was the question.. :)

rhys_gbs · Accepted Answer · 2017-04-07 06:41:59Z

1

All you need to do is call the function elsewhere for instance you could set it to be called when the window is loaded.

Window.onload = loadDoc('getData.php',myFunction)

answered Apr 7, 2017 at 6:41

rhys_gbs

4092 silver badges7 bronze badges

Comments

alpheus · Accepted Answer · 2017-04-07 06:42:44Z

1

You can use

<body onload="loadDoc('getData.php',myFunction);">

answered Apr 7, 2017 at 6:42

alpheus

2402 silver badges13 bronze badges

Comments

pwetosaurus · Accepted Answer · 2017-04-07 06:44:10Z

1

A third solution could be to add a new DOMContentLoaded event to send the query after the browser render the page.

It should be something like this :

document.addEventListener('DOMContentLoaded', loadDoc);

answered Apr 7, 2017 at 6:44

pwetosaurus

1095 bronze badges

Comments

Sachin Bahukhandi · Accepted Answer · 2017-04-07 06:45:27Z

1

You have bound ajax call to an event onclick where what you want is at page load. So replace the onclick to onload

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>New document</title>

   <script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>

   <script type ='text/javascript' src='js/testScript.js'></script>

<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
  content goes here
   <aside id="offer" onload ="loadDoc('getData.php',myFunction)">
    &nbsp; click here
   </aside>
</body>

answered Apr 7, 2017 at 6:45

Sachin Bahukhandi

2,57624 silver badges30 bronze badges

Comments

Thi49 · Accepted Answer · 2017-04-07 06:45:54Z

1

below code will ideally work if the page of same domain.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>New document</title>

   <script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>

<script type ='text/javascript' src='js/testScript.js'></script>
<script type ='text/javascript'>
$(document).ready(function(){
$( "#offer" ).load( 'getData.php' );
});
</script>

<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
   content goes here
   <aside id="offer" >
        &nbsp; click here
        </aside>
</body>

answered Apr 7, 2017 at 6:45

Thi49

3581 silver badge11 bronze badges

Comments

Rashid · Accepted Answer · 2017-04-07 06:47:07Z

Call your function in window.onload event instead of onclick

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>New document</title>

   <script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>

<script type ='text/javascript' src='js/testScript.js'></script>

<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
   content goes here
   <aside id="offer">
        Your function has been executed onload of document
        </aside>
</body>

here is the script

window.onload = function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("offer").innerHTML =
  xhttp.responseText;

};

Collectives™ on Stack Overflow

user ajax to get data without "onClick function" in javaScript

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related