The code provided below doesn't show all the content of that page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript">
var rootdomain="http://"+window.location.hostname
alert(rootdomain);
function ajaxinclude(url) {
var url=rootdomain+url;
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}
function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 ||
page_request.status==200)
document.getElementById("write").innerHTML=page_request.responseText;
}
</script>
</head>
<body>
<div id="write">
</div>
<input type="button" value="Submit !" onclick="ajaxinclude('/songcake/index.php');"/>
</body>
</html>
Please Help
Thanks.
You need to add a closure that reacts upon the completion of the document loading process.
page_request.onreadystatechange = function() {
if(page_request.readystate == 4) {
// data handling here
}
}
As pointed out though, using jQuery will make things a lot easier.
Edit: To clarify, your AJAX call does check for the connection status (request.status), but not for the loading status (request.readystate). Your document probably did not load completely.
Here's a reference for the W3.org XMLHTTPRequest API: http://www.w3.org/TR/XMLHttpRequest/ .
Edit2: Btw, an <iframe> element would solve your problem with a lot less code.
Edit 3: Code
function ajaxinclude(url) {
//...
page_request.open('GET', url, false) //get page synchronously
//<> add onreadystatechange handler
page_request.onreadystatechange = function() {
if(page_request.readystate === 4) {
if(page_request.state === 200) {
//call function on success
writecontent(page_request.responseXML)
}
}
}
page_request.send(null)
}
Some additions:
if you put your ajax call into the <HEAD> you need to either create the dom elements you want to append data to as they are not available when the runtime runs through (which might lead to a dom error); or you need to add an on dom load event handler.
Synchronous calls are not properly implemented in some browsers and this might lead to errors too.
Why you should not use jQuery? You can do this simple as below..
$("#write").load("/songcake/index.php");
[EDITED]
Below you can see the completed code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript" src='scripts/jquery.js'></script>
</head>
<body>
<div id="write">
</div>
<input type="button" value="Submit !"
onclick="$('#write').load('/songcake/index.php');"/>
</body>
</html>
You can download jQuery from here : http://jquery.com/
The source for my answer you can find here : http://api.jquery.com/load/
try to use FireBug
FireBug show you state of your request.
If it 200 and you see that in reqest answer (in firebug) broken data then
you should check your index.php script
Related
Can anyone please suggest any idea about how to open an Excel file, kindly check below code and let me know how to achieve opening the instead of downloading the file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function read()
{
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "C:\Users\user-temp\Downloads\test.xlsx", true);
txtFile.onreadystatechange = function()
{
if (txtFile.readyState === 4)
{
// Makes sure the document is ready to parse.
if (txtFile.status === 200)
{
// Makes sure it's found the file.
document.getElementById("div").innerHTML = txtFile.responseText;
}
}
}
txtFile.send(null)
}
</script>
</head>
<body onload="read();">
<form id="form1" runat="server">
<div id="div">
</div>
</form>
in your case you can use following methodswith google viewer iframe:
<iframe src="http://docs.google.com/gview?url=https://sifr.in/img/292/1/courseAndroid.xlsx&embedded=true"></iframe>
or with microsoft viewer iframe:
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://sifr.in/img/292/1/courseAndroid.xlsx'></iframe>
or open it in another tab / window with following:
Open your excel file
credit must also go tothis guy
I'm working on the radio site and for streaming, the Jazler RadioStar 2 program is used which allows constant updating of files that transmit the information which song is currently streaming..
check image
I am specifically interested in how to transfer the title of the song and the name of the author to my homepage..
customexportfile.htm code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Trenutno Slusate!</title>
</head>
<body>
<p>TNowOnAir: <strong>Cher | Believe</strong>
</body>
</html>
or via xml file, NowOnAir.xml
<Schedule System="Jazler">
<Event status="happening" startTime="09:15:30" eventType="song">
<Announcement Display=""/>
<Song title="Believe">
<Artist name="Cher"> </Artist>
<Jazler ID="6379"/>
<PlayLister ID=""/>
<Media runTime="03:34"/>
<Expire Time="09:19:03"/>
</Song>
</Event>
</Schedule>
These files are automatically updated when the song on the stream changes.
Make a text file to the same directory as NowOnAir.xml!
Name it like filename.html
Type the following inside:
<!DOCTYPE html>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body onload="refresh()">
<p>Now playing: <span id="art"></span>|<span id="title"></span>
<script>
var interval,time
function refresh(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("art").innerHTML = this.responseXML.getElementByTagName("ARTIST")[0].getAttribute("name");
document.getElementById("title").innerHTML = this.responseXML.getElementByTagName("SONG")[0].getAttribute("title");
time=this.responseXML.getElementByTagName("EXPIRE")[0].getAttribute("Time").split(":")
interval=setInterval(checkTime,1000)
}
};
xhttp.open("GET", "NowOnAir.xml", true);
xhttp.send();
}
}
function checkTime(){
var date=new Date()
if(date.getSeconds()==time[2]&&date.getMinutes()==time[1]&&date.getHours()==time[0]){
clearInterval(interval)
refresh()
}
}
</script>
</body>
</html>
Then try it (you will find it like this: http://serveraddress/path/filename.html)
I hope that this will help you!
Hesitantly, you can try out this code...
N.B.
There are a great many reasons why this might not work (from the outset, or later).
You should certainly test this out in an environment where it will not upset anyone if it doesn't work.
The solution below involves checking for a new song and title every 5 seconds using the Javascript setInterval method. That could well be a wholly inappropriate solution because it will run indefinitely every 5 seconds. Without more information, it's impossible to answer this for you really.
This code is untested.
Anyway, here's a punt at solving this problem:
HTML (homepage):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Trenutno Slusate!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>NowOnAir:
<strong>
<span id="artistName">Cher</span> |
<span id="songTitle">Believe</span>
</strong>
</p>
<script>
function getNowPlaying() {
const src = "NowOnAir.xml";
$.ajax({
type: 'GET',
url: src,
dataType: xml,
success: function(xml) {
//parse XML
const xmlDoc = $.parseXML( xml );
const $doc = $( xmlDoc );
const $artist = $doc.find( "Artist" ).attr("name").text();
const $song = $doc.find( "Song" ).attr("title").text();
//update homepage
$("#artistName").text($artist);
$("#songTitle").text($song);
},
error: function(e) {
console.log(e);
}
})
}
setInterval( function() {
getNowPlaying();
}, 5000);
</script>
</body>
</html>
If it doesn't work, feel free to comment and I'll try to help.
I've got a page with a splash screen, where users select one of two languages in which the rest of the site will be displayed. Next to each language option is a "remember my choice", HTML form, checkbox. How can I have the selected checkbox write a cookie with the language preference, which would skip the splash screen on future visits?
May be you can use something like below, Note code not tested:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function setCookie(c_name,value,expiredays) {
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate)
}
function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1) {
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return null
}
onload=function(){
document.getElementById('linksNewWindow').checked = getCookie('linksNewWindow')==1? true : false;
}
function set_check(){
setCookie('linksNewWindow', document.getElementById('linksNewWindow').checked? 1 : 0, 100);
}
</script>
</head>
<body>
<div>Hi</div>
<input type="checkbox" id="linksNewWindow" onchange="set_check();">
</body>
</html>
This is a great reference for javascript cookies, http://www.quirksmode.org/js/cookies.html, I suggest doing this with PHP other than javascript simply because I the cookies and session functions are much more powerful with server-side scripting.
document.cookie
^ this is the js code that represents a pages cookies.
I am having problem with this error:
'undefined' is null or not an object'
Can you please have a look and let me know. In my coding, I want to have simple DOM JavaScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
init();
function init()
{
getElementByTabIndex("4", "submit")[0].addEventListener("click", Verify, false);
}
function Verify() {
alert('done');
// all verification code will be here...
}
function getElementByTabIndex(index, type, node)
{
if (!node)
{
node = document.getElementsByTagName('body')[0];
}
var a = [];
els = node.getElementsByTagName('*');
for (var i = 0, j = els.length; i < j; i++)
{
if (els[i].tabIndex == index && els[i].type == type)
{
a.push(els[i]);
}
}
return a;
}
</script>
<body>
<input type="email" id="email" /><input type="password" id="pass" /> <label class="Login" for="login"><input value="Log In" tabindex="4" type="submit" id="login"></label>
</body>
</html>
You have to move you code at bottom or call init() after body is loaded.
Reason: you are trying to get elements even before they exists.
Eg :
<head>
<script>
var elm= document.getElementById('id');
//this will be always undefied, as trying to read element even before they exist
</script>
</head>
<body>
<div id='foo'></div>
<script>
var elm= document.getElementById('id');
//this wont be undefined
</script>
</body>
You call:
if (!node) {
node = document.getElementsByTagName('body')[0];
}
But your script runs before the DOM has finished loading, and so the body tag does not exist.
So node is undefined, and when you attempt the following, you get your error:
node.getElementsByTagName('*');
Run init() on document load, instead of immediately.
PS. jsfiddle and Firebug allowed me to debug this very quickly.
'body' isn't available to javascript at the time you are trying to call init().
call your init method when the dom has finished loading, like so:
window.onload = function (){
init();
}
note that in order to make this work across browsers (if you plan on using it outside your planned Safari extention) you will have to do some extra work. more info: http://www.javascriptkit.com/dhtmltutors/domready.shtml
Why does IE8 fail to change the documents title with document.title="test title";
Following works on IE8 for me. But I did get the ActiveX security popup, so perhaps your IE8 is not set to prompt for these issues and just deny scripting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
function changeTitle() {
document.title = 'Foobar';
}
</script>
</head>
<body onload="changeTitle()">
</body>
</html>
Really? Using document.title = 'Foo Bar'; has always worked for me. Is your script even executing?
Try shoving this right before the document.title = ...:
alert('I work.');
If you don't get an alert box, your script isn't even running.
found this:
http://support.microsoft.com/kb/296113
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function runTest()
{
var s ="We should set this as the new title"
var mytitle = document.createElement("TITLE");
mytitle.innerHTML = s;
alert(s);
document.documentElement.childNodes[0].appendChild(mytitle);
}
function fix()
{
var s = "Now we change the title";
alert(s);
document.title = s;
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Problem" onclick="runTest()"/>
<input type="button" value="Workaround" onclick="fix()"/>
</BODY>
for me this is works in IE 9,8,7
maybe you dont call your function, or there is something which not works.
the document.title must work!