Ajax load page + JQuery click doesn't work

Question

Why does my ajax not work?

These are my pages.

I'm using JQuery to check click event and using ajax to load the responder page.

What is wrong in this code?

index.php

<html>
  <head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
          $('#clicket').click(function() {
            $.ajax({
              url: 'res.php?rand=' + Math.random(),
              type: 'GET'
              success: function(results) {
                alert(results);
              }
            });
          });
        });
      </script>
    </head>
  <body>
    <button id="clicket">Hi</button>
  </body>
</html>

Responder page:

res.php:

<?php
  echo "Worked!";
?>

UPDATE: I changed my javascript code above.

You're binding is in the head before the markup is defined; and it isn't in a document ready. So the selector will not find any elements to bind upon as the DOM has not been fully built yet. — Taplar, Dec 13 '17 at 19:09
You forgot to wrap your jQuery code in the document's ready event: `$(function () { ... });` Conversely, you can put your jQuery code at the end of the HTML instead of the beginning. — David, Dec 13 '17 at 19:11

Taplar · Accepted Answer · 2017-12-13T19:22:12.603

1

Put your logic in a document ready. Since your script is in your head, the markup in the body hasn't been loaded into the DOM yet. In order to make your script wait until the DOM has been built, put the logic in a document ready to delay it until that time.

$(document).ready(function() {
  $('#clicket').click(function() {
    $.ajax({
      url: 'res.php?rand=' + Math.random(),
      type: 'GET',
      success: function(results) {
        alert(results);
      }
    });
  });
});

edited Dec 13 '17 at 19:22

answered Dec 13 '17 at 19:11

Taplar

24,788
4
22
35

Its amazing how people forgot this simple addition, when almost every jquery example has it :( – IncredibleHat Dec 13 '17 at 19:13
Well, while it is simple, it's also helpful to know why you should use a document ready. If you know that, then you also know the cases when it is not necessary. – Taplar Dec 13 '17 at 19:14
I used same that u show but does't work again. – Jonatan Mire Dec 13 '17 at 19:14
Yes, ...updated. – Jonatan Mire Dec 13 '17 at 19:18
Yes man it worked now. I'll mark as answer. – Jonatan Mire Dec 13 '17 at 19:21

score -3 · Answer 2 · answered Dec 13 '17 at 19:12

-3

Try using full URL for your ajax call. If you are on live server then write your full domain name, like www.your_domain.com/res.php?rand=.

answered Dec 13 '17 at 19:12

Malik Tauqeer

7
7

and put your code into document.ready(); – Malik Tauqeer Dec 13 '17 at 19:13
2

Nothing wrong with using relative url paths – charlietfl Dec 13 '17 at 19:13
best practice to include your javascript code is to embed your javascript code before the
closing tag.
– Malik Tauqeer Dec 13 '17 at 19:14

Ajax load page + JQuery click doesn't work

2 Answers2