Simple HTML Page with Ajax not working

Question

I just started to get an idea of AJAX. For this i am trying out an example i found while searching on my local machine. But it is not working.

The page has some static text when page is loaded, once we scroll down, new dynamic text is added using ajax, but its not adding new text while scrolling.

The html file code is:

 <script type="text/javascript" language="javascript">
    $(document).ready(function () {

        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                sendData();
            }
        });

        function sendData() {
            $.ajax(
             {
                 type: "POST",
                 url: "https://localhost/kailash/cgi/testing/getdata.pl",
                 data: "{}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 async: "true",
                 cache: "false",

                 success: function (msg) {
                     $("#myDiv").append(msg.d);
                 },

                 Error: function (x, e) {
                     alert("Some error");
                 }

             });

        }

    });


</script>
</head>
<body>
<form id="form1" runat="server">
<div id="myDiv">

    <p>
        Static data initially rendered.
    </p>

It calls getdata.pl. Code in getdata.pl is

our $resp;
my $cgi = new CGI;
print $cgi->header();

$resp = "<p>This content is dynamically appended to the existing content on scrolling.</p>";
return "$resp\n";

So this is not working. can you please help me in getting it working. Please let me know whats missing in it.

Is your page long enough to scroll the specified amount? Further, replace == for >=, otherwise you need to scroll an exact amount of pixels. — Hugo, Jul 18 '12 at 13:40
No error as such.. just the dynamic content not getting added to page, also the page is very long i just posted one
tag. — kailash19, Jul 18 '12 at 13:44

Blazemonger · Answer 1 · 2012-07-18T13:48:10.487

0

One possibility: Change your absolute https: URL to a relative one (such as /kailash/cgi/testing/getdata.pl). The only way to connect to a different domain via AJAX is with JSONP.

Another possibility: Your AJAX call is never being run. Add an alert() to the success call to make sure that sendData() is actually being called.

Here's one example of how to use $.ajax correctly.

edited Jul 18 '12 at 13:48

answered Jul 18 '12 at 13:36

Blazemonger

90,923
26
142
180

score 0 · Answer 2 · answered Jul 18 '12 at 13:40

0

are you sure of your
$("#myDiv").append(msg.d);

, have you tried $("#myDiv").append(msg. responseText); ?

answered Jul 18 '12 at 13:40

divol

192
7

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

I have solved the error, i got the mistake in my code due to help of this post: Check this

I took out the datatype field and used only:

$("#myDiv").append(msg);

Now i am getting the ajax contents. AJAX is really cool, text is added as i scroll down :).

edited May 23 '17 at 12:04

Community

1
1

answered Jul 18 '12 at 14:24

kailash19

1,771
3
22
39

Simple HTML Page with Ajax not working

3 Answers3