Calling AJAX is not working onclick of button

Question

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

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
– 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
– 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
– 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
– Bhavik Joshi, Commented Feb 6, 2015 at 8:00

Bhavik Joshi · Accepted Answer · 2015-02-09 06:06:29Z

4

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();
});

edited Feb 9, 2015 at 6:06

answered Feb 6, 2015 at 9:03

Bhavik Joshi

2,6978 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Gadag · Accepted Answer · 2015-02-06 09:01:38Z

1

$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 );
   }
}); 
});

answered Feb 6, 2015 at 9:01

Ravi Gadag

15.9k5 gold badges60 silver badges85 bronze badges

Comments

Paul Roub · Accepted Answer · 2019-10-05 16:59:38Z

0

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.

edited Oct 5, 2019 at 16:59

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Oct 5, 2019 at 9:11

Pushpa Kumara

4151 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

Calling AJAX is not working onclick of button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related