<script language="javascript" type="text/javascript">
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var result = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "vartest.php", true);
document.getElementById('span').innerHTML = result;
ajaxRequest.send(null);
}
This is because Ajax is asynchronous, and result isn't set yet when you do this (plus the var makes it local to the function anyway, you'd have to remove that).
The best thing to do would be to move the innerHTML line into the readystatechange callback.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('span').innerHTML = ajaxRequest.responseText;;
}
<script language="javascript" type="text/javascript">
//this is in the global scope
//so it's available anywhere
**var result;**
function ajaxFunction(){
var path = 'http://localhost/php/';
var fileName = 'yourCode.php';
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
**result = ajaxRequest.responseText;**
}
}
ajaxRequest.open("GET", path+fileName, true);
ajaxRequest.send(null);
}
</script>
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
result = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "vartest.php", true);
document.getElementById('span').innerHTML = result;
ajaxRequest.send(null);
}
Related
I am using AJAX function. I am passing 3 variables to the next page using AJAX. When I add the 4th variable the function doesn't get called.
Code:
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var count = document.getElementById('count').value;
var type = document.getElementById('type').value;
var sem = document.getElementById('sem').value;
var rid = document.getElementById('room').value;
ajaxRequest.open("GET", "add_requi_ajax.php?count=" + count+"&type="+ type+"&sem="+sem+"&rid="+rid, true);
ajaxRequest.send(null);
};
</script>
Your code is syntactically and logically correct, which means that the problem is likely one of your input IDs is wrong (typo? Should room be rid?), or you call the function before the inputs are rendered on the page (use window.onload).
Verify each of your input IDs. If they all look correct, then comment them out and hard code the values to rule out your inputs as a problem. Watch the error console for any error messages. If an uncaught error is encountered, it can appear that the function isn't being called.
You probably need to urlencode your values.
<html><head><title>Loses</title></head><body>
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Receive data from the server to update div
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.value = ajaxRequest.responseText;
}
}
// Get the value from user.
if (!target) target = document.getElementById("name");
var queryString = "?name=" + escape(target.value);
var url = "db.php" + queryString;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
</script>
<form name="myForm">
Victim: <input type="text" id="name" name="name"/> <br/>
<br/>
<input type="button" onclick="getLoses()" value="Show Loses"/>
</form>
<div id="ajaxDiv">Results:</div>
<br>
</body></html>
Why doesn't this do anything?
I've tried it under apache and lightpd. I'm getting no complaints or errors, but it's just not doing anything.
If I call the backend manually, db.php?name=Player1 it works. So it can't be anything in db.php. Something is wrong with the code above and I just don't know what's missing. Can anyone help me?
You call a function getLoses() on button-click, but there is no such function(the name is ajaxFunction)
if (!target) target = document.getElementById("name");
there is no variable target, so the check for !target will result in a script-error.
Remove the if(!target) from that line or change the condition to :
if (typeof target=='undefined' || !target)
I am trying to pass to a PHP file cellnumber. My AJAX isn't even working, when I try
alert("test"); in the ajax.onreadystatefunction() it won't print.
My javascript getrow(t) function gets called every time someone clicks on a cell in a table
and the result is the cell turning into green. I want to ultimately enter this data into a postgres table using php.
Thanks for all the help!
Vlad
<script type="text/javascript">
//gets the row and column number
function getRow(t)
{
var col=t.cellIndex;
var row=t.parentNode.rowIndex;
var testTable = document.getElementById("testTable");
t.style.backgroundColor = "#33CC66";
var cellnumber = (row*15 + col);
var ajax = new XMLHttpRequest();
//use ajax to enter into visitedCells
ajax.onreadystatechange = function()
{
// Call a function when the state changes.
if(ajax.readyState == 4 && ajax.status == 200)
{
ajax.open("POST", insertCoordinates.php, true);
ajax.send(cellnumber);
}
else
{
alert("Error:" + ajax.status + "and " + ajax.statusText);
}
}
}
</script>
</body>
</html>
ajax.open("POST", insertCoordinates.php, true);
ajax.send(cellnumber);
should be outside ajax.onreadystatechange
just befor }//getRow
you actually don't have the request executed
should be like that:
var ajax = new XMLHttpRequest();
//use ajax to enter into visitedCells
ajax.onreadystatechange = function() {//Call a function when the state changes.
if(ajax.readyState == 4 && ajax.status == 200) {
alert('success');
} else {
alert("Error:" + ajax.status + "and " + ajax.statusText);
}
}//onreadyState
ajax.open("POST", insertCoordinates.php, true);
ajax.send(cellnumber);
probably won't work in IE
should use a construction like that:
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
but the best way is to use jQuery ...easy and safe
I have <form> on my page containing a <textarea>, and I want to send the text entered in it using Ajax. The text goes to a PHP page, where I insert it into a SQL database.
The problem I am facing is that whenever I write + or & in the <textarea>, JavaScript treats them as special characters in the URL. How can I escape them?
function getMessageResponse() {
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) {
document.getElementById('response').innerHTML = xmlHttp.responseText;
document.myform.post.value = '';
retrieve();
}
}
var url = "wall4.php";
url = url+"?post=" + document.myform.post.value;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
Encode your parameter:
url = url + "?post=" + encodeURIComponent(document.myform.post.value);
function ajaxFunction(phpFunction){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
$('.subCat').html(ajaxRequest.responseText);
$('.subCat').ready(function(){
$('.subCat').fadeIn();
});
}
}
var url = "products.php?func=" + phpFunction;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
This function works great, and has no problems. But if I add:
function refreshProduct(idNum, phpFunction){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
$('.' + idNum).empty();
$('.' + idNum).html(ajaxRequest.responseText);
});
}
}
var url = "products.php?func=" + phpFunction + "&idNum=" + idNum;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
When I try to execute ajaxFunction('returnAllProducts') I get:
syntax error
});\n
from
$('.' + idNum).html(ajaxRequest.responseText);
}); <<<----
and
ajaxFunction is not defined
javascript:ajaxFunction('returnAllProducts')()
So my questions are:
a) how do I convert this over to jquery? I've read over some jquery ajax tutorials, but I wasn't able to make the connection how to do what I am doing here.
b) How do I get both functions to work? I know the PHP behind them works fine, but I can't even test if refreshProduct() works properly right now.
You seem to be missing a }
this is your code, properly indented...
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
$('.'idNum).empty();
$('.'idNum).html(ajaxRequest.responseText);
});
When it should be
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
$('.'idNum).empty();
$('.'idNum).html(ajaxRequest.responseText);
}
});
Also, the two } after this should be deleted, rendering your code like this:
function refreshProduct(idNum, phpFunction){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
$('.' + idNum).empty();
$('.' + idNum).html(ajaxRequest.responseText);
}
});
var url = "products.php?func=" + phpFunction + "&idNum=" + idNum;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
As for rewriting this using jQuery, it's really easy:
function ajaxFunction(phpFunction){
var url = "products.php?func=" + phpFunction;
$.get(url, function(data) {
$('.subCat').html(data).ready(function(){
$('.subCat').fadeIn();
});
});
}
function refreshProduct(idNum, phpFunction){
var url = "products.php?func=" + phpFunction + "&idNum=" + idNum;
$.get(url, function(data) {
$('.' + idNum).empty().html(data);
});
}