I am calling an API from AJAX,

When I am Calling AJAX like this,

$(function (){

    $.ajax({
       type:'GET',
       url :"/tournament",
       dataType: 'json',
       success: function(data) {
           console.log('success',data);
       },
       error:function(exception){
           alert('Exception:'+exception);
       }   
   });

});

This is working fine without any errors but when I am using this..

$('#btnadad').on('click',function (){

   alert("ok");
   $.ajax({
   type:'GET',
   dataType: 'json',
   url :"/tournament",
   success: function(data) {
        console.log('success',data);

   },
   error:function(exception){
      alert('Exception:'+exception);
   }
}); 
});

This popups "error" alert, can anybody help me whats the error?

HTML Body is Like this,

<form>
<h2>
    <font color="#FFFFFF">
    <br><br><input type="text" name="name" placeholder ="Tournament Name"><br>
    <table>
        <?PHP
        //print_r($teams);

        for ($i = 0; $i < $count; $i++) {
            ?>
            <tr>
                <td><input type="checkbox" name=<?php echo $taemId[$i] ?></td>
                <td><?php echo $teamname[$i] ?></td>
            </tr>
            <?php
        }
        ?>

    </table>
    <button id="btnadad">ADD</button>

</form>

<script src ="/js/myjs.js"></script>

here I am calling one API and Displaying the Checkboxes Dynamically.

I am checking The Console...when I am clicking button ,the alert box is popping up and in networks tab tournament path's status is cancelled .when I am clicking it on to see the response it shows fail to load response data.

I have Tried calling this function in same html file in tag but it is also not working.

<script>
function getOnClick()
{
    alert("ok");
    $.ajax({
        type: 'GET',
        url: "http://harshal:8888/tournament",
        success: function(data) {
            alert("no error in alert");
            console.log('success', data);

        },
        error: function() {
            alert("error in alert");
        }
    });
}

and calling it on button's onclick Event ut it also gives me the same result

I am calling an API from AJAX,

When I am Calling AJAX like this,

$(function (){

    $.ajax({
       type:'GET',
       url :"/tournament",
       dataType: 'json',
       success: function(data) {
           console.log('success',data);
       },
       error:function(exception){
           alert('Exception:'+exception);
       }   
   });

});

This is working fine without any errors but when I am using this..

$('#btnadad').on('click',function (){

   alert("ok");
   $.ajax({
   type:'GET',
   dataType: 'json',
   url :"/tournament",
   success: function(data) {
        console.log('success',data);

   },
   error:function(exception){
      alert('Exception:'+exception);
   }
}); 
});

This popups "error" alert, can anybody help me whats the error?

HTML Body is Like this,

<form>
<h2>
    <font color="#FFFFFF">
    <br><br><input type="text" name="name" placeholder ="Tournament Name"><br>
    <table>
        <?PHP
        //print_r($teams);

        for ($i = 0; $i < $count; $i++) {
            ?>
            <tr>
                <td><input type="checkbox" name=<?php echo $taemId[$i] ?></td>
                <td><?php echo $teamname[$i] ?></td>
            </tr>
            <?php
        }
        ?>

    </table>
    <button id="btnadad">ADD</button>

</form>

<script src ="/js/myjs.js"></script>

here I am calling one API and Displaying the Checkboxes Dynamically.

I am checking The Console...when I am clicking button ,the alert box is popping up and in networks tab tournament path's status is cancelled .when I am clicking it on to see the response it shows fail to load response data.

I have Tried calling this function in same html file in tag but it is also not working.

<script>
function getOnClick()
{
    alert("ok");
    $.ajax({
        type: 'GET',
        url: "http://harshal:8888/tournament",
        success: function(data) {
            alert("no error in alert");
            console.log('success', data);

        },
        error: function() {
            alert("error in alert");
        }
    });
}

and calling it on button's onclick Event ut it also gives me the same result

• javascript
• jquery
• ajax

• And what's in your console and network tabs? – zerkms Commented Feb 6, 2015 at 7:55
• Have you tried to debug what the error is? The error handler takes several parameters containing details about the problem. There's also the console to check. The issue will be somewhere in your server side code.'Not working' is never enough information. – Rory McCrossan Commented Feb 6, 2015 at 7:56
• I have Something Like this Resource interpreted as Script but transferred with MIME type text/plain: "s0.spicmcjs.info/dealdo/……S9jMLUC3rNCNa9jMLHzZ1JBgLLBNqXmdaUlIzJB29RAwvZu3rHDhvZpwnVB2TPzuvUywjSzwq=". – Bhavik Joshi Commented Feb 6, 2015 at 7:57
• There has to be something else going on that you haven't disclosed that makes these different because the code is obviously identical. The next piece of data to gather is the specific error information returned as arguments in the ajax error handler. – jfriend00 Commented Feb 6, 2015 at 7:58
• error:function(exception){alert('Exeption:'+exception);} used this which gives me alert like "Exeption:[object Object]" – Bhavik Joshi Commented Feb 6, 2015 at 8:00

3 Answers 3

Thanks For the Help Friends,your Efforts matters a lot to me,I am feeling glad to tell you that I just found the answer for this the below code makes it happened ..

$('#btnadad').on('click',function (e){       
   alert("ok");
   $.ajax({
   type:'GET',
   url :"/tournament",
   dataType: 'json',
   success: function(data) {
        console.log('success',data);

   },
   error:function(exception){alert('Exeption:'+exception);}
}); 
 e.preventDefault();
});

$ajax error function takes 3 parameters. Jquery ajax error

A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred.

try changing like this

$('#btnadad').on('click',function (){

   alert("ok");
   $.ajax({
   type:'GET',
   dataType: 'json',
   url :"/tournament",
   success: function(data) {
        console.log('success',data);

   },
   error:function(jqXHR,textStatus,errorThrown ){
      alert('Exception:'+errorThrown );
   }
}); 
});

I got the same issue. If you use onclick, do not use a form. In local environment, it is working, but when you go to production, the ajax request is cancelling. The solution is removing the form tag and adding a div tag.