Jquery load() doesn't load php files

Question

The Head

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">  </script>

The HTML

<div id=info></div>

<div id="tousarticles">

<div class="titre" id="listitem_4">
    <p>Blahblahblah</p>
</div>

<div class="titre" id="listitem_59">
    <p>Blahblahblah</p>
</div>

<div class="titre" id="listitem_58">
    <p>Blahblahblah</p>
</div>

<div class="titre" id="listitem_71">
    <p>Blahblahblah</p>
</div>

</div>

The Javascript

<script type="text/javascript">
$(document).ready(function() {
    $("#tousarticles").sortable({
        opacity: 0.6,
        axis: 'y',
        update : function () {
            var order = $('#tousarticles').sortable('serialize');
            alert(order); // It alerts "listitem[]=59&listitem[]=4&listitem[]=58&listitem[]=71"
            $("#info").load("test.php?"+order, function() {
                alert( "Load was performed." ); // It alerts "Load was performed."
            });
        }
    });
});
</script>

And the php

<?php 
$fp = fopen("./upload/file.txt","w+");
// Normaly, the DB entry php script but, here, I put some stuff visible on a writable repertory on my server to know if it runs.
?>

The sortable interface works well: I can change the place of the DIV "listitems" without problem. But the test.php doesn't load at all.

Here is the process

I change the first paragraph with the second and the first alert comes with the correct string (listitem[]=59&listitem[]=4&listitem[]=58&listitem[]=71).I click "OK".

So, as expected, the second alert comes with "Load was performed." I click "OK".

However, the test.php script did'nt load.

The alert "Load was performed." comes even if the file does'nt exist (testtt.php for example).

Going to my server via ftp, there is no file /upload/file.txt. But the test.php runs well and creates an "upload/file.txt" when launched via url.

If this is your entire PHP code then the problem is that fopen() doesn't really output anything so you're loading an empty file. If there's some code below, you should check your browser's console and see if the URLs are not being cached as well. — Marius, Jul 20 '15 at 12:48

score 1 · Answer 1 · answered Jul 20 '15 at 12:48

1

The following will always trigger as it's the complete callback.

$("#info").load("test.php?"+order, function() {
  alert( "Load was performed." ); // It alerts "Load was performed."
});

Try this, hopefully this will tell you what's wrong.

$("#info").load("test.php?"+order, function(response, status, xhr) {
  alert( "Load was performed. Status="+status+", xhr.statusText="+xhr.statusText ); // It alerts "Load was performed."
});

answered Jul 20 '15 at 12:48

Martin Verner

602
7
11

It shows: "Load was performed. Status=error, xhr.statusText=Forbidden" – Frédéric Faux Jul 20 '15 at 13:09
Can you manually call the .php files with same url as the ajax script? – Martin Verner Jul 20 '15 at 15:28
Any chance it's cross domain? – Martin Verner Jul 20 '15 at 15:31
it's resolved with the post() methode with I use following the same way MonkeyZeus suggested above. Thank you for cooperation. – Frédéric Faux Jul 20 '15 at 16:31

MonkeyZeus · Accepted Answer · 2015-07-20T16:50:42.253

0

<div id=info></div>

Should be

<div id="info"></div> <!-- You forgot double quotes -->

Your PHP should actually echo something rather create a file:

<?php
echo 'Hello, this is dog';
?>

More Info:

The .load() method from jQuery uses the GET method by default and accepts a total of 3 parameters.

I would recommend trying the following:

$("#info").load("test.php", $('#tousarticles').sortable('serialize'), function() {
    alert( "Load was performed." ); // It alerts "Load was performed."
});

edited Jul 20 '15 at 16:50

answered Jul 20 '15 at 12:49

MonkeyZeus

20,375
4
36
77

@FrédéricFaux There is something going on which you are not seeing. Try debugging your AJAX `.load()` by taking a look at this answer: http://stackoverflow.com/a/21617685/2191572 – MonkeyZeus Jul 20 '15 at 13:20
Using the Firefox's Firebug extension, I can see a "403 Forbidden" message for this file. But I can access it directly by the url bar. – Frédéric Faux Jul 20 '15 at 14:47
@FrédéricFaux can you try test.php without the serialized data? – MonkeyZeus Jul 20 '15 at 14:51
OK, it works without serialized data by ajax load(). Furthermore it returns a 403 when I load the test.php with the datas by the url. I tried to send the chain with the post() method and it works too with the serialized data witch I can use in the php file. It seem the jquery load() method use the GET method and the server do only want the POST method. – Frédéric Faux Jul 20 '15 at 16:11
@FrédéricFaux Glad to hear it worked! Please see my update with more info. – MonkeyZeus Jul 20 '15 at 16:51

Jquery load() doesn't load php files

2 Answers2