So I've already done an AJAX request using GET, and so now i wanted to try my luck using POST instead. But for some reason, when i try to send data, I get a crazy weird message in the console - NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED: 'JavaScript component does not have a method named: "available"' when calling method: [nsIInputStream::available]
I literally have no idea what this means, and I know the data isnt going through because all im doing in the load.php file that I request is echo the variable its supposed to store. So its something in the javascript.
Here is my HTML for the first page that makes the request.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<input id="input">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
And my Javascript:
function loadXMLDoc()
{
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;
}
}
var data = "id="+document.getElementById("input").value;
xmlhttp.open("POST","load.php",true);
xmlhttp.send(data);
}
And finally, the code for load.php:
$param = $_POST['id'];
if($param){
echo "Variable was stored.";
} else{
echo "Not working";
}
And everytime i run this, i get "not working" in the browser. So the php code is at least attempting to store the variable, but its not. Thankyou!
Your forgot to add xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'). With this line we are basically saying that the data send is in the format of a form submission
function loadXMLDoc()
{
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;
}
}
var data = "id="+document.getElementById("input").value;
xmlhttp.open("POST","load.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
Related
Iam beginner to ajax. When i used ajax for search function it delays in starting operation
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?gender="+str,true);
xmlhttp.send();
}
</script>
When the radio button on the product.php page is clicked showUser(str) is called. The value is accessed in variable gender in getuser.php and the session started with the value in varible gender and the sql query is executed using the session variable
$sql="SELECT * FROM tbl_product WHERE gender = '".$_SESSION['gender']."'";
and the values are echoe in txtHint div. My problem is When i clicked the radio butoon for the very first time the function is called, but the value is not echoed in page.When i reloaded the page and try it again it works fine.Please help to fix this
Thankyou
Put your code in
window.onload
function. Like this
window.onload = function() {
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?gender="+str,true);
xmlhttp.send();
}
};
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
I'm a newbie to JavaScript Phonegap and AJAX. Am trying to write a simple Phonegap app that will request for a message from a server however the app does not respond. When I run my script on chrome browser as a file because I understand that is how Phonegap works it shows the foll XMLHttpRequest cannot load http://localhost/mpl/getPage.php. Origin null is not allowed by Access-Control-Allow-Origin.
How can I fix this? My code is down below.
<html>
<head>
<script type="text/javascript">
function getMessage()
{
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("serverReply").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost/mpl/getPage.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="serverReply" onclick="getMessage();"><b>Get message</b></div>
</body>
</html>
My getPage.php is simple it's just
<?php
echo 'cool';
?>
Pleas help me. Thanks.
use the code below
<div id="serverReply"><b>Get message</b></div>
instead of
<div id="serverReply" onclick="getMessage();"><b>Get message</b></div>
Or try this
<html>
<head>
<script type="text/javascript">
function getMessage()
{
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)
{
alert(xmlhttp.responseText);
document.getElementById("serverReply").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost/mpl/getPage.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="serverReply"><b>Get message</b></div>
</body>
</html>
Whats wrong with this code or what might be causing this problem? It's not alerting "hello", but it is filling the div with The Hello and Bye World tables. I want it to alert "hello". Also I don't know jquery. Thank You
FILE1
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){
var reScript = /\<script.*?>(.*)<\/script>/mg;
response = xmlhttp.responseText.replace(reScript, function(m,m1) {
eval(m1);
return "";
});
document.getElementById("div").innerHTML=response;
}
}
xmlhttp.open('GET','file2.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send();
FILE2
<table><tr><td>Hello World</td></tr></table>
<script type="text/javascript">
alert('hello');
</script>
<table><tr><td>Bye World</td></tr></table>
Try without the eval():
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){
/*var reScript = /\<script.*?>(.*)<\/script>/mg;
response = xmlhttp.responseText.replace(reScript, function(m,m1) {
eval(m1);
return "";
});*/
document.getElementById("div").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET','file2.php',true);
//xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //unnecessary for GET calls
xmlhttp.send(null);
Evaluing your code inside the <script...></script> is unnecessary, the javascript code will be executed as soon as it's added to the DOM.
New edit:
You have to eliminate the linebreaks \n\r in your reponseText in order for your script to be evaluated properly. Also, there was an extra \ escape character before the first < which was breaking your code. Try:
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){
var reScript = /<script.*?>(.*)<\/script>/mg;
response = xmlhttp.responseText.replace(/\n|\r/g, " ").replace(reScript, function(m,m1) {
eval(m1);
return "";
});
document.getElementById("div").innerHTML=response;
}
}
xmlhttp.open('GET','file2.php',true);
//xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
I've added a .replace(/\n|\r/g, " ") to replace all line breaks by an white space in your responseText, which will allow for your JS to be evaluated properly and cause no visible change to the end-user. You may also replace the white space " " by an empty string "" if all of your JS is properly semi-colon'd.
The above should work fine for simple scripts, now if you'd include the JQuery lib in your page's head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Your AJAX call would be as simple as:
<script type="text/javascript">
$(document).ready(function(){
$('#div').load('file2.php');
});
</script>
JQuery automatically parses scripts from your responseText, as noted in your linked answer.
Give this a try:
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var reScript = /<script.*?\>(.*)<\/script\>/mg.exec(xmlhttp.responseText)[1];
var scriptElement = document.createElement('script');
scriptElement.innerHTML = reScript;
document.body.appendChild(scriptElement);
}
}
Placing the code into a script element, and then appending that element to the body should cause it to execute.
I want to have a Follow/Unfollow button on a page.
The user clicks Follow and this passes the parameter 'artist' to the PHP script, updates a db and the button then says Unfollow.
When the user clicks Unfollow, this passes the parameter 'artist' to the same PHP script and this then updates a db via PHP and then button then says Follow.
I can get the Follow to change to Unfollow but cannot get Unfollow to change to Follow.
My code is as follows:
index.php
<script type="text/javascript">
function followArtist(str)
{
if (str=="")
{
document.getElementById("artist").innerHTML="";
return;
}
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("artist").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/follow.php?artist=<?php echo $artist; ?>"+str+"&follow=y",true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
function unfollowArtist(str)
{
if (str=="")
{
document.getElementById("artist").innerHTML="";
return;
}
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("artist").innerHTML=XMLHTTPlhttp.responseText;
}
}
xmlhttp.open("GET","/follow.php?artist=<?php echo $artist; ?>"+str+"&follow=n",true);
xmlhttp.send();
}
</script>
<!--Follow button for user to click-->
<div class="follow_text" id="artist">
<h1>Follow artist</h1>
</div>
follow.php
<?php
if(isset($_GET['follow']))
{
$follow = $_GET['follow'];
if($follow=='y')
{
$artist = $_GET['artist'];
#############do a database action
?>
<h1>Unfollow artist</h1>
<?php
}
else
{
$artist = $_GET['artist'];
#############do a database action
?>
<h1>Follow artist</h1>
<?php
}
}
?>
Any ideas why this is not working?
You can see a live version of the script at http://soundshelter.net/release.php?id=421928
Thanks in advance!
I have changed the second xmlhttp object which throws error.
<script type="text/javascript">
function unfollowArtist(str)
{
if (str=="")
{
document.getElementById("artist").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp2=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange=function()
{
if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
{
document.getElementById("artist").innerHTML=xmlhttp2.responseText;
}
}
xmlhttp2.open("GET","/follow.php?artist=<?php echo $artist; ?>"+str+"&follow=n",true);
xmlhttp2.send();
}
</script>
<!--Follow button for user to click-->
<div class="follow_text" id="artist">
<h1>Follow artist</h1>
</div>
Your second
<h1>Unfollow artist</h1>
shoud be Follow artist
I'll get to the point, assume my PHP script returns an array with two values, how would I address them within javascript?
<script type="text/javascript">
function ValidateCard(cardno)
{
if (cardno.length==0)
{
document.getElementById("txtprice").innerHTML="";
return;
}
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("txtprice").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","coding/validation/validatecard.php?cardno="+cardno,true);
xmlhttp.send();
}
</script>
As you can see whatever is returned is send to display within a div tag, how would I differentiate between data?
Thanks
You could use json to serialize it so that javascript can read it.
So, in php json_encode($arr);
http://www.php.net/manual/en/function.json-encode.php
Then in javascript.
you should be able to do something like jsarr[key] to get the values
<?php
$result = array('success'=>1, 'messgae'=>"the message you want to show");
echo json_encode($result);
?>
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
result = xmlhttp.responseText.evalJSON(true);
//you can use result as array to get the information you want to check
if (result['success']) {
document.getElementById("successs").innerHTML=result['message'];
}
}
}