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)">
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 ??
Body onload doesnt required. You can directly use window onload function in JS
JS
window.onload = function() {
loadDoc('getData.php',myFunction)
};
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)
You can use
<body onload="loadDoc('getData.php',myFunction);">
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);
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)">
click here
</aside>
</body>
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" >
click here
</aside>
</body>
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;
};
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
#(message: String)(exchangelist: java.util.ArrayList[String])(implicit session: play.mvc.Http.Session)
#main(title = message)(session) {
<head>
...
</head>
<body>
<script>
startup(exchangelist);
<script>
</body>
Code like this, how can I pass parameter "exchangelist" to Js function "startup()"? This method don't work.
I suggest trying the meta tag:
<html>
<head>
<!-- <meta name="exchangelist" content='#{exchangelist.mkstring(",")}'> -->
<meta name="exchangelist" content='yellow,black,green'>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script>
function startup(list) {
alert("startup called with " + list);
}
var el = $('meta[name=exchangelist]').attr("content").split(",");
startup(el);
</script>
</html>
How can i update a webpage and url without reloading the web page. I saw this at SoundCloud and i want to use this at my own project.
This is an idea of what i want:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<?php
$url = $_SERVER['REQUEST_URI'];
if (url == /login){
include 'php/login.php';
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/login')
});
</script>"
}
if (url == /home){
include 'php/home.php'
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/home')
});
</script>"
}
?>
</html>
the problem is, when i enter www.mydomain.com/home for example i get (of course) a server error that the file not exists. How can i fix this problem?
Try window.location.hash=your_hash_string in JavaScript
That file doesnt exist. Error occur when some php script on ur server is utilizing those file locations.
Try something like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="navigation">
<ul>
<li>Login</li>
<li>Home</li>
</ul>
</div>
<div id="content"></div>
</body>
<script type="text/javascript">
function _load_content(url) {
$("#content").slideUp("slow", function() {
$("#content").html('<p align="center">Loading...</p>');
}
$.ajax({ type: "get", url: url,
success: function(response) {
$("#content").html(response);
$("#content").slideDown("slow");
},
error: function() {
alert("An error occured");
}
});
}
$(document).ready(function() {
_load_content("php/home.php");
});
</script>
</html>
NOTE: This is the very basic function I made... You should really learn jQuery AJAX.
Thanks in advance.
Please find the following script, it alerts e.value = "yes" in fire fox and "no" chrome...
what' wrong with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>new_file</title>
<script type="text/javascript">
function func(){
alert("I am at Func")
}
var i = 0;
document.write("<form style='display: block'><input name='test' id='test' value='no'></form>");
window.onload = function () {
global();
};
function global(){
var e=document.getElementById("test");
alert(e.value);
if(e.value=="no" && i == 0 ){
e.value="yes";
i = 1;
}
else {
//e.value="no";
func();
}
}
</script>
</head>
<body>
</body>
</html>
What i need is based on that e.value i need to call the func()? Any one please answer it...
I have the code that I have posted below in my webpage. As you can see it uses the body onload function to launch the script. Is there any way of making this script work without this and in JavaScript instead?
<!doctype html>
<html>
<head>
<script type="text/javascript">
function box(query){
return document.getElementById(query)
}
</script>
</head>
<body onload="box('query').focus();">
<input id="query" type="text">
</body>
</html>
Thanks in advance,
Callum
This might what you're looking for: Attach a body onload event with JS
I'd suggest using jQuery or some other JavaScript framework unless you're exploring JS or have some stringent restrictions on using libraries and frameworks.
the following code helpful for you
this is jquery:
$(document).ready(function(){
function name();
});
or
$(window).load(function(){
function name();
});
the following answers using javascript:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function load() {
alert('function loaded');
}
window.onload = load;
</script>
</head>
<body>
</body>
</html
----------
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function load() {
alert('function loaded');
}
</script>
</head>
<body onload="load();">
</body>
</html
if you are talking about catching the onload event with writting any javascript in your html you can use this function:
// Add event
var addEvent = function (obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
};
Now you can run all the functions you need in your onload event.
addEvent(window,'load',function () {
box('query').focus();
// or
document.getElementById('query').focus();
});