CODEWITHSUNDEEP
javascriptjqueryajax
Bhavik Joshi
Bhavik Joshi

Reputation: 2677

Calling AJAX is not working onclick of button

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

Upvotes: 2

Views: 53004

Answers (3)

Pushpa Kumara
Pushpa Kumara

Reputation: 405

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.

Upvotes: 0

Bhavik Joshi
Bhavik Joshi

Reputation: 2677

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

Upvotes: 4

Ravi Gadag
Ravi Gadag

Reputation: 15861

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

Upvotes: 1

Related Questions