<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)
Related
I have created an ajax function that works on chrome and firefox but not i.e 8 can anyone spot the issue?
html section:
<select id='choices'>
<option id="no" value="no" onClick="check()">No</option>
<option value="yes" onClick="check()">Yes</option>
</select>
Javascript section:
function check(){
var a = document.getElementById("choices").value;
var type = "label";
ajaxFunction(a,type);
if(a == "yes"){
document.getElementById("results").style.display="block";
}
else{
document.getElementById("results").style.display="none";
}
}
AJAX Section:
function ajaxFunction(result,dif){
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){
if(dif == "label"){
var ajaxDisplay = document.getElementById('results');
}
else{
var ajaxDisplay = document.getElementById('results1');
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
if(dif == "label"){
var hiddenvalue = document.getElementById('hiddenvalue').value;
var queryString = "?type=" + result + "&label=" + hiddenvalue + "&dif=" + dif;
}
else{
var queryString = "?type=" + result + "&dif=" + dif;
}
ajaxRequest.open("GET", "scripts/script.php" + queryString, true);
ajaxRequest.send(null);
}
PHP Section:
var_dump($_GET);
I'm not sure if this is just a compatability issue or not as i have used very similar code to this in another project which worked fine however i also have a couple of other scripts that are loading in such as jquery 1.2.3 and google analytics (with there advanced link tracker which i had to get rid of as it was throwing an error). I have checked the debugger and clicked break all on error and i can click about on the onclick but no error actually shows in the debugger. Has anyone got any sugestions other then jquery (can't get my head around it)
IE does not suppot onclick on an option.
onchange needs to be on the select.
<select id='choices' onchange="check()">
<option id="no" value="no">No</option>
<option value="yes">Yes</option>
</select>
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.
I have some AJAX code that is redirecting when button is pressed.
It is redirecting to members.php
This is the AJAX code:
<script language="javascript" type="text/javascript">
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("Please update your browser.");
return false;
}
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
// We still need to write some code here
if(ajaxRequest.readyState == 4){
// Get the data from the server's response
response = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "accept.php?id=<?php echo $articleid; ?>&state=accept$p=a9dafdd0fe68c6f64841e265e1c8832a", true);
ajaxRequest.send(null);
}
</script>
And this is the button:
<input type="submit" onChange="ajaxFunction();" />
And this is the contents of accept.php:
<?php
echo "ACCEPTED";
?>
Ideas?
<input type="submit" onChange="ajaxFunction();" />
should be
<input type="submit" onclick="ajaxFunction();" />
and use return false; at the end of your function
or you can use simple jquery
$("#submit").click(function(){
// or $("#form").submit(function(){
$.get("accept.php?id=<?php echo $articleid;
?>&state=accept&p=a9dafdd0fe68c6f64841e265e1c8832a",function(data){
rasponce=data;
})
return false;
})
what is this?
"&state=accept$p=a9dafdd0fe68c6f64841e265e1c8832a",
... should it be something like
"&state=accept&p=a9dafdd0fe68c6f64841e265e1c8832a",
members.php is the action on your form? If so I'd remove the action and try it again, to see what happens.
<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);
}
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);
});
}