ajax/javascript syntax

Question

I've narrowed down the possible errors to be within an if statement. I'm trying to make two images appear within divs if my php file returns true after authenticating a user. There error comes when I try to add the image to the divs "b1" and "b2" with "innerHTML."

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
   <title> Incident Center </title>
   <!--<link rel="stylesheet" href="http://web.njit.edu/~swp5/assignment/style/style.css">-->
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <script type="text/javascript">
function ajaxFunction(){
    var ajaxRequest;  

    if (window.XMLHttpRequest)
    {
    ajaxRequest=new XMLHttpRequest();
    }
    else
    {
    ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }

    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            if(ajaxRequest.responseText=="true")
            {
            //ERROR HERE
            document.getElementById('b1').innerHTML ="<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>";
            document.getElementById('b2').innerHTML ="<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>";

            }

            else
            {
            document.getElementById('n1').innerHTML = "<h4>IT WAS FALSE</h4>";
            }
        }
    }
    var un = document.getElementById('un').value;
    var pw = document.getElementById('pw').value;
    var queryString = "?un=" + un + "&pw=" + pw;
    ajaxRequest.open("GET", "auth.php" + queryString, true);
    ajaxRequest.send(null); 
}

    </script>
</head>

<body>


<div class="header">
Incident Center 

</div>



<p>


<div class="t1">
<form name='myForm'>
username: <input type='text' id='un'> <br>
password: <input type='password' id='pw'> <br>

<input type='button' onclick='ajaxFunction()' value='Enter' />
</form>
</div>



</p>


<p>

<div id="n1">
<div id="b1"></div>
<div id="b2"></div>
</div>

</p>

</body>



</html>

Ben Swinburne · Accepted Answer · 2011-10-26 22:40:23Z

You have double quotes in your innerHTML value.

document.getElementById('b1').innerHTML ="<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>";
document.getElementById('b2').innerHTML ="<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>";

Change it to

document.getElementById('b1').innerHTML ='<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>';
document.getElementById('b2').innerHTML ='<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>';

Note the use of single quotes wrapping the strings you're trying to insert as they use " inside.

Similarly you could escape the quotes inside if you wanted to stick to using just double quotes although it seems pointless in this case. The escape character in javascript is a backslash . To further understand where you've gone wrong you can read http://www.quirksmode.org/js/strings.html which covers the topic well.

Ariel · Accepted Answer · 2011-10-26 22:40:33Z

1

Change:

document.getElementById('b1').innerHTML ="<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>";
document.getElementById('b2').innerHTML ="<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>";

To:

document.getElementById('b1').innerHTML ='<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>';
document.getElementById('b2').innerHTML ='<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>';

answered Oct 26, 2011 at 22:40

Ariel

26.8k5 gold badges62 silver badges71 bronze badges

Comments

Clafou · Accepted Answer · 2011-10-26 22:40:20Z

0

There's a problem with the quotes at this line

document.getElementById('b1').innerHTML ="<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>";

Try replacing it with this:

document.getElementById('b1').innerHTML ='<img src="http://web.njit.edu/~swp5/assignment2/view.png" width=50 height=50>';

answered Oct 26, 2011 at 22:40

Clafou

15.4k8 gold badges62 silver badges93 bronze badges

Collectives™ on Stack Overflow

ajax/javascript syntax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related