why $.ajax does not work with me?

Question

i don't know why $.ajax never called on my code ? i use xampp as localhost jquery called ok , so when i click on the button , the text below it changed .. but $.ajax part never execute ?

my page :

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="layout/css/bootstrap.css">
<link rel="stylesheet" href="layout/css/font-awesome.min.css">
<link rel="stylesheet" href="layout/css/mystyle.css">
</head>
<body>
<div class="container">
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<button id="btn" class="btn btn-primary">cliquer ici </button>
</div>
<script type="text/javascript" src="layout/js/jquery-1.12.4.min.js">
</script>
<script type="text/javascript" src="layout/js/bootstrap.min.js"></script>
<script type="text/javascript" src="layout/js/myjs.js"></script>
</body>
</html>

my js :

$(document).on('click','#btn',function(){
    var ID =$(this).attr('id');
    $(this).html("loading ... ");
    $.ajax({
        type:"POST",
        url:"http://localhost/my_projects/testing/moremore.php",
        data:"id="+ID,
        success: function(html){
            $('.container').append(html);
            $('#btn').html("done");
        }
    });
    $(this).html("hmmmm ... ");
});

and my moremore.php :

<div class="alert alert-success"> alerts alerts by ajax </div>

Check out [**AJAX Tutorial**](http://stackoverflow.com/questions/20150130/ajax-and-php-to-enter-multiple-forms-input-to-database/20150474#20150474) and [**Network Tab Tutorial**](http://stackoverflow.com/a/21617685/2191572) — MonkeyZeus, Jun 22 '16 at 12:33

Sagar Gulati · Answer 1 · 2016-06-22T12:33:26.633

1

1) Look for console.log errors or errors in network header
2) Make sure you .php script where you are requesting the ajax, has major headers to allow access control.
3) Sometimes, the headers doesn't allow to make you request.
4) When making request, keep your console opened (F12) and enable Log XMLhttpRequest

Try adding these headers to you moremore.php

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
header("Access-Control-Allow-Origin: http://localhost");

Also to give it a try, check the ajax request with the ajax header, add this too in your moremore.php:

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
     echo '<div class="alert alert-success"> alerts alerts by ajax </div>';
} else {
    echo 'no ajax';
}

This will give you an idea if ajax request is working fine or not.

New ajax js:

$(document).ready(function() {
  $('#btn').click(function() {
    var ID = $(this).attr('id');
    $(this).html("Loading ... ");
    $.ajax({
      type: "POST",
      url: "http://localhost/my_projects/testing/moremore.php",
      data: {
        id: ID
      },
      cache: false,
      xhrFields: {
        withCredentials: true
      },
      dataType: html,
      success: function(html) {
        $('.container').append(html);
        $('#btn').html("done");
      },
      error: function() {
        alert("Something went wrong");
        $("#btn").html("hmmmm, it was called... ");
      }
    });
  });
});

Do leave comments for more help!

edited Jun 22 '16 at 12:33

answered Jun 22 '16 at 12:27

Sagar Gulati

144
8

thnks for your comment but the same , i can't see any errors in my console .. ps : when i use (ready function ) it does not work at all :) but when i delete it , part of my code work but not $.ajax – Ouail Bellal Jun 22 '16 at 12:40
Can you pastebin your whole code? You say if you add $document ready, it doesn't work at all, that is not a point of concern, try up the new thing we shared and see it. – Sagar Gulati Jun 22 '16 at 12:41
js : http://pastebin.com/Y8a4ReJa html : http://pastebin.com/mtHbfQzx php : http://pastebin.com/cvhe62WD – Ouail Bellal Jun 22 '16 at 12:48
Try Moving the scripts into the sections. You must of getting atleast one part from the code, either the div or no ajax. What do you get? – Sagar Gulati Jun 22 '16 at 12:51
O.o when i move script part to the head , , it does not work at all and i got nothing , even if i put script in the last of my code (after /div ) – Ouail Bellal Jun 22 '16 at 12:59
So you say, the ajax request is not being made? You are not getting anything at all? Open Chrome, enable log xmlhtttprequest and then check if ajax is being sent of not. – Sagar Gulati Jun 22 '16 at 13:02
Can u share your teamviewer id or email, i may try to assist you and look into what's exactly the matter is. – Sagar Gulati Jun 22 '16 at 13:47

score 0 · Accepted Answer · answered Jun 22 '16 at 14:58

I tested your code, and it pretty much works as is. The only thing that I changed was the ajax url from absolute http://localhost/my_projects/testing/moremore.php to relative moremore.php and I threw in the official jQuery CDN in case yours was borked.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="layout/css/bootstrap.css">
<link rel="stylesheet" href="layout/css/font-awesome.min.css">
<link rel="stylesheet" href="layout/css/mystyle.css">
</head>
<body>
<div class="container">
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<div class="alert alert-danger"> alerts alerts </div>
<button id="btn" class="btn btn-primary">cliquer ici </button>
</div>
<script>
$(document).on('click','#btn',function(){
    var ID =$(this).attr('id');
    $(this).html("loading ... ");
    $.ajax({
        type:"POST",
        url:"moremore.php",
        data:"id="+ID,
        success: function(html){
            $('.container').append(html);
            $('#btn').html("done");
        }
    });
    $(this).html("hmmmm ... ");
});
</script>
<script type="text/javascript" src="layout/js/bootstrap.min.js"></script>
<script type="text/javascript" src="layout/js/myjs.js"></script>
</body>
</html>

moremore.php:

<div class="alert alert-success"> alerts alerts by ajax </div>

Results in this expected output after a couple clicks:

@OuailBellal glad it works for you :) feel free to accept if it answers the question for you. this will result in +2 rep for you. see: [How does accepting an answer work?](http://meta.stackexchange.com/q/5234/321521) — Jeff Puckett, Jun 22 '16 at 16:03

ixe · Answer 3 · 2016-06-22T12:17:47.310

-1

Try to wrap anonymous function, and change selector document to '#btn'

(function($) {
$('#btn').on('click',function(){
    var ID =$(this).attr('id');
    $(this).html("loading ... ");
$.ajax({
    type:"POST",
    url:"http://localhost/my_projects/testing/moremore.php",
    data:"id="+ID,
    success: function(html){
        $('.container').append(html);
        $('#btn').html("done");
    }
});
$(this).html("hmmmm ... ");
   });
})(jQuery);

edited Jun 22 '16 at 12:17

answered Jun 22 '16 at 12:15

ixe

89
4

1

Nothing in OP suggests something would overwrite `$` reference – A. Wolff Jun 22 '16 at 12:17
try this code `$('#btn').on('click', function() { alert('clicked'); });` – ixe Jun 22 '16 at 12:23
btw , this part work good $(this).html("loading ... "); + $(this).html("hmmmm ... "); but $.ajax part i don't why not working – Ouail Bellal Jun 22 '16 at 12:25
The fact that OP said *"when i click on the button , the text below it changed"* is a good clue that this is not the answer. – Jeff Puckett Jun 22 '16 at 12:26

why $.ajax does not work with me?

3 Answers3