I'm using Ajax and code which is described below. I want to include .js file in Ajax XMLHttpRequest. Does anybody know how to do that?
For example:
I have code below:
function getXMLHttp()
{
var xmlHttp
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!")
return false;
}
}
}
return xmlHttp;
}
function MakeRequest(id)
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "updatesite.admin.php?id="+id, true);
xmlHttp.send(null);
}
function HandleResponse(response)
{
document.getElementById('Vsebina').innerHTML = response;
}
When program call function MakeRequest(id) then i want to also executed some .js file.
Is it possible to do that?
You could always put this code in your function to cause a script to be loaded and executed...
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://location-of-script.js";
document.body.appendChild(script);
Here's a complete example. These two files just need to be in the same folder on the server.
This is hello.html:
<html>
<head>
<script type="text/javascript">
function doit()
{
var scr = document.createElement('script');
scr.type = "text/javascript";
scr.src = "hello.js";
document.body.appendChild(scr);
}
</script>
</head>
<body>
<input type="button" value="hello" onclick="doit();">
</body>
</html>
And this is hello.js:
alert("helloooo!!");
Related
How can I load html in a div when I click a button?
I have function but it does not work:
function ajaxFunction(id, url){
document.getElementById("sh").style.visibility = 'hidden';
var xmlHttp;
try {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
//Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
var respText = xmlHttp.responseText.split('<body>');
elem.innerHTML = respText[1].split('</body>')[0];
}
}
var elem = document.getElementById(id);
if (!elem) {
alert('The element with the passed ID doesn\'t exists in your page');
return;
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
And I have button to click it.
<button type="button" name="new metere" value="" class="button" onclick="ajaxFunction('test','newmetere.html');">new metere</button>
when I put newmetere.php Function does not work and get garbage value.
Try jQuery's load () : it's a fast and simple way to load content from another page asynchronously in a web page using Ajax!
My ajax code is working on my system, but not working on different system. I'm using ajax on mousehover.
<div class="production"> production </div>
and the script is..
<script>
function getXML(){
if(window.XMLHttpRequest){
var ajax=new XMLHttpRequest();
return ajax;
}
else{
var ajax=new ActiveXObject("Microsoft.XMLHTTP");
return ajax;
}
}
function autoProd(){
var ajax=getXML();
/*var name=document.getElementById('sugg').value;*/
var url="../ajax/production.html";
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200)
document.getElementById('layer1').innerHTML=ajax.responseText;
}
ajax.open("get",url,true);
ajax.send();
}
</script>
You can try following:
function getXML(){
try {
var ajax = new XMLHttpRequest();
return ajax;
} catch (error1) {
try {
var ajax = new ActiveXObject("Msxml2.XMLHTTP");
return ajax;
} catch (error2) {
try {
var ajax = new ActiveXObject("Microsoft.XMLHTTP");
return ajax;
} catch (error3) {
return null;
}
}
}
}
I try to refresh div every 5 sec but it doesn't work, I have 3 files.
index.php that contains:
<html>
<head>
<script type="text/javascript" src="javascript/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="javascript/javascript.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval ("newmsg()", 5000);
setInterval ("newpause()", 5000);
});
</script>
</head>
<body>
<div id="msgs">
<?php echo date("H:i:s"); ?>
</div>
</body>
</html>
Then I have javascript.js that contains
function GetXmlHttpObject() {
var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest();
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function newmsg(){
var request = GetXmlHttpObject();
request.open("get", "msgsprint.php", true);
request.send(null);
request.onreadystatechange = function response() {
if (request.readyState === 4) {
if(request.responseText != "false"){
$('#msgs').html(request.responseText);
}
}
}
}
function newpause(){
var request = GetXmlHttpObject();
request.open("get", "newpauseprint.php", true);
request.send(null);
request.onreadystatechange = function response() {
if (request.readyState === 4) {
if(request.responseText != "false"){
$('#newpauselist').html(request.responseText);
}
}
}
}
and i have msgsprint.php that contains
<?php
echo 'ivan';
?>
Could anybody please tell me what i did wrong.
There doesn't seem to be anything wrong in your code, maybe you are not getting a valid answer from msgsprint.php.
Here is a Demo based on your code that is working fine
I advise you to:
- you test the request status for an error.
- you use setTimeout to plan the next call to newmsgs
That's what i did in the demo.
I'm trying to run a PHP code by the click of a button, but it does not seem to work. I'm running this on a MAPM server.
<html>
<head>
</head>
<div onClick="count();">Click!</div>
<script>
function count() {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('GET', 'count.php');
xhr.send();
}
</script>
</body>
</html>
In the PHP file (count.php) we have this code:
<?php
Print "Hello, World!";
?>
you need your page to listen to the request;
function count() {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
// WHAT HAPPENS ON SUCCESS
alert(xhr.responseText);
}else{
alert('timeout error or something');
}
}
};
xhr.open('GET', 'count.php');
xhr.send();
};
You need to pass null to the send() method like below (also be sure that the URL is correct, my hunch is that it should be "/count.php"):
xhr.send(null) // it's a GET request
For a detailed tutorial, check out this MDN doc https://developer.mozilla.org/en/AJAX/Getting_Started
So I've got an AJAX project which uses the XmlHttpRequest object to dynamically retrieve data from the server-side (in my case, I use JSON with PHP/MySQL in case that's relevant). Pretty much all my HTML elements are created dynamically via the javascript DOM, so it's the .js files doing the work.
Here's a typical .js file I use to get server-side info from PHP and then build the html:
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for(var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
} catch(e) {}
}
}
if (!xmlHttp) alert("Error creating XmlHttpRequest object.");
else { return xmlHttp; }
}
function initialize_main() {
if (xmlHttp) {
try {
xmlHttp.open("GET", "main_php.php", true);
xmlHttp.onreadystatechange = handleMainStateChange; //call a function when the state changes
xmlHttp.send(null);
} catch(e) {
alert("Can't connect to server: " + e.toString());
}
}
}
function handleMainStateChange() {
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200) {
try {
init_main();
} catch(e) {
alert("Error reading the response: " + e.toString());
}
} else {
alert("There was a problem retrieving data: " + xmlHttp.statusText);
}
}
}
function init_main() {
var data = JSON.parse(xmlHttp.responseText);
//now do stuff with the DOM or w/e
}
So as I said everything is cool in firefox and chrome. But internet explorer tells me: "Error reading the response: TypeError: Object doesn't support this property or method". I'm a bit new to AJAX as you might guess, so thanks for any help!
I would highly recommend that you use JQuery so that you can write Javascript that doesn't care about the type of browser (JQuery does this for you): http://jquery.com/
Try using this function, for me it works for all browser
function getXMLHTTP()
{
var xmlhttp = false;
try
{
xmlhttp = new XMLHttpRequest();
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1)
{
xmlhttp = false;
}
}
}
return xmlhttp;
}