I have a div which I want to populate with different html files from my server. Is there a simple way to do this? All I ever find are jquery samples and I don't want to use a library.
I have tried this:
document.getElementById('main').innerHTML = 'menu.html';
But that obviously just loaded text!
Some simple Ajax will do the trick for you. This is untested, but should give you the right idea:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("main").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","menu.html",true);
xmlhttp.send();
Simplest way is to use a library, which the entire point of, they wrote the code for u. right?
Use the jQuery example. It is as good as it gets.
Is there a simple way? No, not without a library. That being said, you can do it on your own if you choose - that might be all that's necessary for you to come crawling back into the arms of jQuery ;)
Resource: XHR on Mozilla Developer Network
Related
I am trying to get the xmlhttp.responseText value, but I have no response from the xmlhttp. I was wondering if there is something wrong with my code:
SCRIPT
var xmlhttp;
function show(){
loadXMLDoc("includes/edit.php",function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
});
}
function loadXMLDoc(url,cfunc){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
HTML
< a href="#" style="text-align: right; font-size: 10px;" onclick="show()">SHOW</a>
EDIT.PHP
print "1";
I don't see anything wrong with your code per se, but there are a lot of interactions that are opaque from this code snippet.
I can offer some troubleshooting tips, however:
Add a console log in your callback function (the one that you are running alert() in). Just "console.log('function is running');" on the first line. Then see if you get that far. I would put one in the opening line of show() as well -- maybe your click event isn't doing what you think it is.
Have your PHP server-side file write something to a log so you can be sure that the request is being received where you think it is.
Open your browser developer console and watch the network panel. You should be able to see the entire XHR transaction there. Is it being sent at all? If so, is it returning the content you expect?
If all this doesn't help, setup a test in jsfiddle and post the link here. We'll be able to help in a lot more detail that way.
Good luck.
I have a webservice that I can trigger to do various stuff by typing in the URL in a browser with some defined parameters:
Example:
http://hsserver/HomeSeer_REST_API.aspx?function=setdevicebyname¶m1=bedroomlight¶m2=on
I am building a web front end in plain HTML but cannot find a way to do this trigger without opening a new page in the broswer.
It would be preferable if it was a function like:
UPDATE: Got it to work with this code, but cant get the parameters to work (func,param1,param2) when I call it with
<button type="button" onclick="processnew('setdevicebyname','bedroom desktop light','off')">processnew</button>
function processnew(func,param1,param2)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","HomeSeer_REST_API.aspx?function=setdevicebyname¶m1=bedroom%20desktop%20light¶m2=off",true);
xmlhttp.send();
I have no clue where to look for this - hoping for some help
XHR baby.
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
or jquery's abstraction [ajax generic, or post/get for shortcuts]
http://api.jquery.com/jquery.ajax/
well... that would be a simple HTTP GET request.
if you use jQuery, check this out: http://api.jquery.com/jquery.get/
if you want to stick to plain javascript (I wouldn't recommend that though due to some incompatibilities across browsers): http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
Try jQuery
$.ajax({
url: 'http://hsserver/HomeSeer_REST_API.aspx?function=setdevicebyname¶m1=bedroomlight¶m2=on',
method: 'GET' // HTTP request method
}).done(function(data) {
console.log('Response from server: ' + data);
});
There is some problem that I can't find out why the code worked on Safari, but failed on other browsers.
There is the html part
and the main javascript part.
The main problem that I find is:
While executing the function downloadurl(url, function), cannot find the XML tags "Info", and the markers array length is 0 on many browsers. However, it's ok on Safari. The part of javascript code is like:
downloadUrl("http://travel-taoyuan.tycg.gov.tw/content/travel/xmlcontentlist1.aspx", function(doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("Info");
......
To alert markers, it will return "0".
And actually it should be "174"(Safari's result).
Thanks for answering my question.
hmmm, seems to be a syntax error. Different browsers will use a different syntax, and so it won't execute (or at best, not properly if your lucky).
Try something along the lines of....
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://travel-taoyuan.tycg.gov.tw/content/travel/xmlcontentlist1.aspx",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("theMainTagName"); //TODO: this is the main tag ^(see note)
for (i=0;i<x.length;i++)
{
//TODO: code to handle each xml element
//this is the code to get the value from a particular tag: x[i].getElementsByTagName("theTagName")[0].childNodes[0].nodeValue
}
</script>
NOTE: ^the 'main' tag is, for example, in the case of this xml document, the 'main' tag is 'CATALOG'
Hope this helps. Sorry if it's not very clear, been a while since I worked with xml/javascript. Comment if you want further explanation
I have a wordpress site
for ex, www.test.com
There is a js file (forms.js)in the script folder of mytheme folder.
ie (theme/mytheme/script/forms.js)
There is a mail.php page in mytheme folder
ie (theme/mytheme/mail.php)
Following is the content of forms.js
function submitFormToEmail()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("results").innerHTML=xmlhttp.responseText;
alert("Form received, thank you!");
}
}
xmlhttp.open("GET","/mail.php",true);
xmlhttp.send();
}
I will call "submitFormToEmail",if we click a image in the page *www.test.com/hello_test*
Where "hello_test" page lies in theme/mytheme/.
But the mail.php is not working.
Let me know ,how can we set the path of mail.php in the function "submitFormToEmail", so that it will work
Calling /mail.php will look for the mail.php file at http://www.test.com/mail.php. Just fix the path?
Either directly code the correct path into the javascript file or use php to dynamically get it using get_bloginfo. There are several ways to do this, but probably the best way is to create a hidden element on the page that contains the url and then fetch this when building your ajax request. Otherwise you'd have to set php to parse js files and include it in there. Doesn't seem like a good way to me though.
get_bloginfo('template_url');
I'm new to javascript and trying to open a txt file into var and then inject it to html div...
I tried to use fopen but I didn't succeed.
<script type="text/javascript">
file = fopen(getScriptPath("info.txt"), 0);
file_length = flength(file);
var content = fread(file,file_length);
var div = document.getElementById("myDiv");
//alert(div);
div.innerHTML = "";
div.innerHTML = content;
</script>
Although it says xml request this works perfectly fine for txt files too (server and client side).
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","YOUR_FILE.txt",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseText;
JavaScript has none of the functions you are trying to use.
To read files on the server in JavaScript, you can use XMLHttpRequest.
There is no easy way to read files on the client machine.
abandoned question:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","YOUR_FILE.txt",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseText;
by Freek8
For security reasons, Javascript is made so you can not do this. However, a person has made a workaround which may work and posted it here.
Ok, I realize, it only works for files that are publicly accessbile on the server, which I believe is not what you want to do. Still, if you do find a way, it will be a hack like this, but it could also be fixed to not work at any time.