AJAX / Javascript fails to update webpage

Question

Ive written some ajax code and its not updating the webpage. Its supposed to grab a form from a folder and replace the form showing on the webpage. However when i press the button thats linked to the javascript nothing happens at all.

Javascript:

function LoadManagerForm()
{
    document.getElementById('insert_response').innerHTML = "Loading..."
    nocache = Math.random()
    http.open('get', '../forms/managerform.php?nocache='+nocache);
    http.onreadystatechange = insertReply;
    http.send(null);
}
function insertReply() 
{
    if(http.readyState == 4){ 
    var response = http.responseText;
    document.getElementById('insert_response').innerHTML = response;
}

Webpage:

    <section class="grid col-three-quarters mq2-col-two-thirds mq3-col-full">
        <h2>Login</h2>
        <div id="insert_response">
        <p class="warning">Are you a manager? <a onclick="javascript:LoadManagerForm()" class="button" href="javascript:void(0);">Click here to login!</a></p>

        <form id="emplogin" class="contact_form" action="#" method="post" name="emplogin">  
            <ul>
                <li>
                    <label for="store">Store ID:</label>
                    <input type="text" name="store" id="store" required class="required" >
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" required placeholder="[email protected]" class="required email">
                </li>   
                <li>
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" required class="required">
                </li>
                <li>
                    <button type="submit" id="submit" name="submit" class="button fright">Login</button>
                </li>   
            </ul>           
        </form>
        </div>
    </section>

Angelo Saleh · Accepted Answer · 2013-09-09 02:47:03Z

1

I recomend you to use Jquery it is simple:

include in you html within the head tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

then change your javascript function by the following:

function LoadManagerForm()
{
    document.getElementById('insert_response').innerHTML = "Loading..."
    nocache = Math.random();
    $.post(
        '../forms/managerform.php?nocache='+nocache,
        {
            nocache : nocache
        },
        function(response)
        {
            document.getElementById('insert_response').innerHTML = response;
        }
    );
}

answered Sep 9, 2013 at 2:47

Angelo Saleh

6227 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nickolas Shaffer Over a year ago

For some reason im getting the same result. No response from the webpage. Heres the page: hardees.rokzliveentertainment.biz

slebetman Over a year ago

You have a syntax error on that page. In ajax_frame.js line 10: r equest_type = ..... I think you meant request_type ... instead. There is a tab character between r and e.

slebetman Over a year ago

@NickolasShaffer: A tip: when developing javascript always run your browser with the javascript console enabled. Otherwise you'll miss errors and warnings.

Collectives™ on Stack Overflow

AJAX / Javascript fails to update webpage

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related