Calling AJAX is not working onclick of button

button click not working after ajax call
submit button not working after ajax call
jquery click not working on ajax loaded content
asynchronous ajax call jquery example
ajax button onclick
reinitialize javascript after ajax call
jquery onclick call function
document ready function not working after ajax call

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

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

Jquery button click event not firing, The code you have works fine in fiddle. Is your button being dynamically rendered through AJAX after the initial page load? Use $(document).on("click"  That makes sense that it was submitting without having any data. Ideally I’d like it to submit it after each checkbox or button is ticked, I changed the code to this, but it’s still not working.

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

onclick jquery not working after ajax call, I didnot understand the question clearely. But still I had a try. Below is the simple code. enhance the same as per your logic. Hide Expand Copy  We’re not using the string, it’s just added so that you can put a breakpoint on it and confirm that the call is working. Next we will switch to our output file, it can be a View or just a HTML page somewhere else.

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.

jQuery ajax() Method, Change the text of a <div> element using an AJAX request: $("button").click(​function(){ $.ajax({url: "demo_test.txt", success: function(result){ $("#div1").html(​result); 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.

Cannot call a user defined JS function after return the AJAX content , I am having a problem of calling the user defined JS function after I make the AJAX call. When the user clicks on one of the radio button, it will trigger the AJAX call “updateContent()”) which use the onclick event handler to call the function. Its working fine. But when I call an ajax, it stops working. I have figured out that I have to write it something like this: $(document).on(' click', '.someclassName', function { }); But I am unable to convert the above code similar to the code below. Kindly help.

Can't trigger an AJAX function with a submit button in the dashboard , Just remove type="submit" from your button and let your jQuery ajax call be triggered first. Once you get the response then you can submit your  Hello. The click event works in a browser context. For a static page, it may not work as expected. What happens after a click event is a new request sent to a server, so simulation of a click may not find the data as you want.

Click doesn't work after AJAX load - jQuery, Check this jsfiddle below for working example of that problem. Note, you can change tabs The key word here is “existing”. When we load What if we don't want to attach event every time AJAX is called? Is there any other,  Join a community of over 2.6m developers to have your questions answered on RadButton .click() Isn't calling OnClientClicking of UI for ASP.NET AJAX Button. New here? Start with our free trials.

Comments
  • And what's in your console and network tabs?
  • 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.
  • I have Something Like this Resource interpreted as Script but transferred with MIME type text/plain: "s0.spicmcjs.info/dealdo/……S9jMLUC3rNCNa9jMLHzZ1JBgLLBNqXmdaUlIzJB29RAwvZu3rHDhvZpwnVB2TPzuvUywjSzwq=".
  • 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.
  • error:function(exception){alert('Exeption:'+exception);} used this which gives me alert like "Exeption:[object Object]"
  • Thank you for the suggestions I will keep that in mind