Loading contents of PHP file with AJAX script

Question

I'm trying to load the contents of a php file into a script using AJAX with the following code:

<button onclick="changeText3()"><img border='0' alt='More Options' src='tmpls/media/images/icons/cog.png'></button>
<script> function changeText3(){
   $("#test").click(function(){
   $("#test").load("file.php");
    }
}
</script>
<div id='test'>test</div>

Nothing happens when I click anything. I'm brand new to AJAX and am likely missing something simple. I've tried a number of different methods I've seen and I've had no luck.

Check the console tab in firebug. It will definitely show some error or output. — Naveed Ramzan
– Naveed Ramzan, Commented Apr 20, 2017 at 6:44
"nothing happens" - did you check in the developer tools console? — Jaromanda X
– Jaromanda X, Commented Apr 20, 2017 at 6:44
ooh, that would mean you have to click on an empty div (good luck finding it) to actually do the "load" part - well picked up @Webbanditten — Jaromanda X
– Jaromanda X, Commented Apr 20, 2017 at 6:47
You don' need $("#test").click(function(){} event listener, just remove it — aslantorret
– aslantorret, Commented Apr 20, 2017 at 6:51

Naveed Ramzan · Accepted Answer · 2017-04-20 07:08:08Z

1

<button id="showOutput">
    <img border='0' alt='More Options' src='tmpls/media/images/icons/cog.png'>
</button>
<script>
    $(document).ready(function(){
        $("#showOutput").click(function(){
            $("#test").load("file.php");
        });
    });
</script>
<div id='test'>test</div>

Here we can see that as you tried JQuery so I removed JS function and catch JQuery event.

edited Apr 20, 2017 at 7:08

answered Apr 20, 2017 at 6:54

Naveed Ramzan

3,5893 gold badges27 silver badges33 bronze badges

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

7 Comments

Arthur Walker Over a year ago

I get "SyntaxError: missing ) after argument list[Learn More]".

Arthur Walker Over a year ago

Also, if I change it to $("#test").load("file.php"); });, I get ReferenceError: $ is not defined <anonymous>.

Naveed Ramzan Over a year ago

Check now. I missed a bracket.

Arthur Walker Over a year ago

Still "$ is not defined".

Arthur Walker Over a year ago

Like I said, I'm brand new to AJAX. I didn't know I had to load JQuery. Everything is working now. Thanks.

|

Gonras Karols · Accepted Answer · 2017-04-20 06:51:50Z

1

You should try to specify file.php's whole address in your ajax call like this -

$("#test").click(function(){
$("#test").load('url to home.php');
});

If that won't solve the case, you should log a bit more of your ajax response and you'll be able to easily observe and solve it by yourself, like this:

$("#test").load("home.php", function(response, status, xhr) {
   if (status == "error") {
    console.log(msg + xhr.status + " " + xhr.statusText);
   }
});

Check your console for errors.

answered Apr 20, 2017 at 6:51

Gonras Karols

1,20011 silver badges32 bronze badges

Comments

aslantorret · Accepted Answer · 2017-04-20 06:59:04Z

1

Corrected your code. You don't need a Event listener, cause you already use onclick="changeText3()"

function changeText3(){
  $("#test").load("test.php", function(response, status, xhr) {
    if (status == "error") {
     console.log(msg + xhr.status + " " + xhr.statusText);
    }
  });
 }

answered Apr 20, 2017 at 6:59

aslantorret

3334 silver badges11 bronze badges

1 Comment

Arthur Walker Over a year ago

I get "$ is not defined: changeText3, onclick".

Collectives™ on Stack Overflow

Loading contents of PHP file with AJAX script

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related