I have this HTML code:
<div id="texttheory" class="centertext">'. $short .' </div>';
<button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')">
<img id="imagebutton" src="./images/arrows.png" width="15px" heigth="22px">
</button>
which I produce inside a php script called by a javascript function:
function showTheory (kl) {
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("theory").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gettheory.php?kl="+kl,true);
xmlhttp.send();
}
The function changetheory is in a js library properly included in html head tag and it works like this:
function changetheory (content, old) {
document.getElementById("texttheory").innerHTML= content;
document.getElementById("thbutton").setAttribute ('onclick', "javascript:changetheory("+old+", "+content+")");
}
when i click on the thbutton to switch the two text i get error:
Uncaught SyntaxError: Unexpected identifier
on line 1 of the html file.
Anyone can see what's the problem is?
You're missing quotes around the content string for the onclick event.
<button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')">
Should be
<button id="thbutton" class="theory_button" onclick="javascript:changetheory(\''.$long.'\')">
Related
I need to convert the messbox value so it can be passed into the loadPHPDoc function, but i cannot seem to successfully transfer the data. It successfully loads the php document when i place quotation marks around the actual parameter, but i do not, it simply does not use the function, and does not work. Here's my code:
<!DOCTYPE html>
<html>
<body>
<p id="myDiv">no</p>
<script>
function loadPHPDoc(str){
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");
}
var url = "testSubmit.php";
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","testSubmit.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var sender = "q=" + str;
xmlhttp.send(sender);
document.getElementById("myDiv").innerHTML = str;
}
</script>
<p>Message <input type= "text" id="messbox"></p>
<button type= "button" onclick="loadPHPDoc(document.getElementById(messbox).value)">input</button>
</body>
</html>
document.getElementById() receives a string as a parameter, so:
<button type= "button" onclick="loadPHPDoc(document.getElementById('messbox').value)">input</button>
I need to hit a url by either means and after the response I just want to generate an xml showing done.
Here is the code that is trying to generate the XML and before this all the JS is placed:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="myDiv" style="display:none;"></div>
<script type="text/javascript">
<?php echo "var link = '".$url."';"; ?>
loadXMLDoc(link);
function loadXMLDoc(link)
{
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",link,true);
xmlhttp.send();
}
</script>
$data = "";
header('Content-type: text/xml');
$data="<parameters>";
$data .= "<result>Product Added To The Cart</result>";
$data .= "</parameters>";
echo $data;
Here is the output I am getting
This page contains the following errors:
error on line 5 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.
Here is the source of the output I am getting:
<script type="text/javascript">
var link = 'http://obaoja.com/checkout/cart/add/product/7027/qty/1/'; loadXMLDoc(link);
function loadXMLDoc(link)
{
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",link,true);
xmlhttp.send();
}
</script>
<parameters><result>Product Added To The Cart</result></parameters>
I just need <parameters><result>Product Added To The Cart</result></parameters> in XML format.
I have 2 functions that I would like to call from one dropdown menu. It seems I can only get one to work, but not both. Looking for some help sorting this out. Here is the code, thank you.
Function 1
<script type="text/javascript">
function getCredit(str)
{
if (str=="")
{
document.getElementById("credit").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("credit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcredit.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is function 2.
<script type="text/javascript">
function getTerms(str)
{
if (str=="")
{
document.getElementById("terms").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("terms").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","customertermsdropdownquery.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is the form dropdown that calls them.
<td><select name="company" onchange="getTerms(this.value);getCredit(this.value);">
<?php while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>
I use div in the form to display php.
<div id="terms"></div>
and
<div id="credit"></div>
I can get either one to work by itself, just not together. Thanks for your help.
Totally understandable that you want to keep them separated. How about create a new function like this.
function getTermsAndCredits(value) {
getTerms(value);
getCredits(value);
}
Then in the onchange event call it like this
<td><select name="company" onchange="getTermsAndCredits(this.value);">
Here is a fiddle which should give you a better idea. I don't believe it's necessary to call the onload functions as you have in your code currently.
I have a question regarding the followng code
<html>
<head>
<script type="text/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)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Now I want to search through the xmlhttp.responseText (in other words call the function loadXMLDoc()) for key words, like for example "testfile" and if it exists multiple example "testfile_1" and "testfile_2"....."testfile_n" then "doSomething"
like this
<html>
<head>
<script type="text/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)
{
return xmlhttp.responseText;
}
}
}
function searchADocument(wordToSearchFor){
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
int numberOfTimesWordOccurs=0;
var thePageToSearchThrough [] = loadXMLDoc();
for (i=0; i<thePageToSearchThrough.length; i++){
if(thePageToSearchThrough[i]==wordToSearchFor)
numberOfTimesWordOccurs++;
}
If (numberOfTimesWordOccurs > 1)
document.write(" testfile_1" testfile_2 testfile_n
)
Else
window.location="http://selnc05.go.se:8080/component_test/build/testfile.html";
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="searchADocument("testfile")">Change Content</button>
</body>
</html>
I don't know where to start since I don't know what type xmlhttp.responseText is, can I store it in an array and scan it using for loop etc?
Thanks in advance. =)
EDIT
What am Im doing wrong here
<html>
<head>
<script type="text/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)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
}
function searchADocument(){ //wordToSearchFor
var txt=loadXMLDoc();
if(txt.test('hello'))alert('responseText contains "hello"');
else{
document.getElementById("myDiv").innerHTML ="helloaj";
}
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="searchADocument()">Change Content</button>
</body>
</html>
get the following error message on if(txt.test('hello')) Jscript error:'undefined' is null or not an object
EDIT 3
Im guessing im just dumb as hell, but I still can't get this to work, why can't I store the xmlhttp.responseText into a variable?
Like this
<html>
<head>
<script type="text/javascript">
var xmlhttp;
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();
}
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var txt=xlmhttp.responseText;//This aint working, why, how can I store xlmhttp.responseText into a variable, that I can peform a search on?
document.getElementById("myDiv").innerHTML=txt;//This aint working, why?????
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
I can add that the above actually works if I replace the following
var txt=xlmhttp.responseText;
document.getElementById("myDiv").innerHTML=txt;
with this
document.getElementById("myDiv").innerHTML=xlmhttp.responseText;
I haven't got the call back function to work as mentiond below, all I get is that xmlhttp is undefined, so I ask on this that works(at least half the way I want it to).
Again sorry for not understanding, but there must be something obvious that I don't get about this, that this simply isn't possible to store this in a variable or something.
var txt=loadXMLDoc();
loadXMLDoc doesn't return anything, so txt is undefined after this. Of course undefined doesn't have the test method, which is a method of String.prototype.
Instead assign a callback handler to your XMLHttpRequest and do whatever you want there.
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4)
if (xmlhttp.status==200) {
// do something with xmlhttp.responseText
} else {
// do something appropriate with status
}
}
Update: Though I think it's usually not preferrable to have these kind of copy-pasta examples, I can show you where you should put this piece of code. Instead of doing this:
function searchADocument() { //wordToSearchFor
var txt = loadXMLDoc();
if (txt.test('hello'))
alert('responseText contains "hello"');
else
document.getElementById("myDiv").innerHTML = "helloaj";
}
where you test the return value of loadXMLDoc (which, as already stated, returns immediately, so before the request is completed), you should put your code inside the callback handler, that you assign by setting onreadystatechange:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var txt=xmlhttp.responseText; /* manipulate the DOM here */
if (txt.test('hello'))
alert('responseText contains "hello"');
else
document.getElementById("myDiv").innerHTML = "helloaj";
}
}
I'm having some problems with parsing the xml response from my ajax script. The XML looks like this:
<IMAGE>
<a href="address">
<img width="300" height="300" src="image.png class="image" alt="" title="LINKING"/>
</a>
</IMAGE>
<LINK>
www.address.com
</LINK>
<TITLE>
This
<i>is title</i>
</TITLE>
<EXCERPT>
<p>
And some excerpt
</p>
</EXCERPT>
The code for js looks like this.
function loadTab(id) {
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)
{
xmlDoc=xmlhttp.responseXML;
var title="";
var image="";
x=xmlDoc.getElementsByTagName("TITLE");
for (i=0;i<1;i++)
{
title=title + x[i].childNodes[0].nodeValue;
}
document.getElementById("ntt").innerHTML=title;
x1=xmlDoc.getElementsByTagName("IMAGE");
for (j=0;j<1;j++)
{
image=image + x1[j].childNodes[0].nodeValue;
}
document.getElementById("nttI").innerHTML=image;
}
}
var url = 'http://www.factmag.com/staging/page/?id='+id;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
When I'm parsing it it pulls out the title but not the IMAGE tag contents. What I'm doing wrong? Can someone please tell me? Thanks in advance!
You don't have XML there, an XML document can have only one root node, so anything following </IMAGE> is an error.
You probably want to wrap your document with a new element.