PHP/AJAX: Can't seem to be able to display ajax result into DIV, but works in ALERT()

Question

I'm currently learning PHP through a real website project and want to use Ajax calls to change sections of the website.

CODE SAMPLE

myproject.js

$(document).ready(function() {
    $("#inventory").click(function() {
        $.ajaxSetup({
            url: "sectionhandler.php?section='inventory'",
            type: "get",
            dataType: "html"
        });
        $.ajax().done(function(html) { 
            alert(html); // This works!
            $("#section").html(html); // This doesn't work.
            $("#section").append(html); // This neither.
        });
    });
});

inventory.html

<table><tr><td>Hello world with AJAX!</td></tr></table>

sectionhandler.php

<?php echo file_get_contents( 'inventory.html' ); ?>

menu.html

<a id="inventory" href="">Inventory</a>

index.php

<div id="menu" class="content"><?php echo file_get_contents( 'menu.html' ); ?></div>
<div id="section" class="content"></div>

RELATED ARTICLES FOUND AND READ AND TRIED

And there are many many more...

RESULT

When I click on the Inventory link contained within menu.html and displayed through index.php, the jQuery code executes just fine. I get the result from the server while displaying the right content from inventory.html in the alert().

However, when I come to either set the innerHTML to the <div id="section" class="content"></div>, I can't seem to be able to get the expected result. The background of the page seems to flash, though not supposed to as per Ajax definition, and the content of my XMLHttpRequest.responseText never get displayed.

The closer I got to make it work was when I was double-clicking on the Inventory link, so that after the first "flash" from the page background, it showed the content of my section.

I have tried multiple ways using classic Javascript with an onclick element on my <a> tag, I have tried with document.getElementById("section"), though getting the right element, I was not able to show my content on the page.

Any thoughts are welcome!

Thanks in advance ! =)

How can it work when I write `` directly into the div:#section within the `index.php` file, and not work when going through ajax? I'm missing something, I'm confused. =) — Will Marcouiller, Mar 31 '13 at 11:02
can you try `$("#section").load("sectionhandler.php?section=inventory");` instead of the ajax and see if that works? — Onimusha, Mar 31 '13 at 11:05
@Onimusha: This would be even better/simpler approach. I shall try this immediately! =) — Will Marcouiller, Mar 31 '13 at 11:08
@Onimusha: This works also flawlessly, and is ridiculously simple! I'm lovin' it! lol All these hours passed to investigate this and that solution with as many variances, great! I'll remember this for sure! =) If you wish, you may write your approach as an answer so that I can upvote and help for rep points. =) — Will Marcouiller, Mar 31 '13 at 11:14

score 1 · Accepted Answer · answered Mar 31 '13 at 11:00

1

With all chance, you need to prevent browser default behavior:

$("#inventory").click(function(event) {

    event.preventDefault();

    ...

});

Notice the event parameter added to the click handler.

By the way, you HTML response is invalid - a <table> should contain a <tbody> element wrapping any <tr>s.

answered Mar 31 '13 at 11:00

moonwave99

21,957
3
43
64

+1&Accepted: event.preventDefault() is the solution! =) I have already read and tried this through a `return false` which also prevents the default behaviour, and I have never thought about it while trying this, since it is mentioned nowhere that one must prevent the default behaviour of the browser. THANKS! This solves my problem! =) – Will Marcouiller Mar 31 '13 at 11:07

score 1 · Answer 2 · answered Mar 31 '13 at 19:32

1

As requested. A more simple solution

$("#section").load("sectionhandler.php?section=inventory");

jQuery .load()

answered Mar 31 '13 at 19:32

Onimusha

3,348
2
26
32

+1 This helped me achieve what I needed. Thanks for your response! =) – Will Marcouiller Jun 12 '13 at 13:19

PHP/AJAX: Can't seem to be able to display ajax result into DIV, but works in ALERT()

2 Answers2