views:

37

answers:

2

I am just trying to test a simple ajax call on my server using jquery

I have a HTML file like this

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
       $(function(){
            $("#connect_button").click(function(event){
                $("#placeholder").load("http://mysever/AjaxResponse.php");
            })
       });
    </script>
  </head>
  <body>
    <button id="connect_button" type="button">Connect</button>
    <span id="placeholder">This has not worked</span>
  </body>
</html>

AjaxResponse.php, which works when accessed from the browser statically, looks like this

<?php
    echo "This now works";
?>

The code runs and the replace happens the only problem is that the page returns a blank string causing the span to be empty

If I change the code to use another jQuery call such as $.get() the callback is sent back the textStatus of "Success" and a data value of ""

What am I missing here? Do severs need to be set up to respond to Ajax calls. Am I misusing jquery?

+1  A: 

Is your AjaxResponse.php on the same domain? Ajax calls won't work cross-site.

fidr
Thanks. I was running the html file locally. When I put the html on the server and changed the jQuery reference to a relative one it worked fine.
Willbill
A: 

If you want, you could check if the loaded page has anything in it like this:

$(function(){

$('#connect_button').live('click', function(){

content = $.get('test.php',function(data){
content = data;

if (content != ""){
$('#placeholder').html(content);
}else{
$('#placeholder').html('This has not worked');
}

});
});
})

That way if the returned data is empty, it will put "This has not worked" in the placeholder id.

MoDFoX
In this case data comes back as an empty string so it would display 'This has not worked'
Willbill