Calling Ajax request function in href

Question

I have an href in an html page and i have an AJAX request in a method in a javascript file.

When clicking on href i want to call the JS function and I am treating the response to add it to the second html page which will appear

function miniReport(){

    alert('TEST');

   var client_account_number = localStorage.getItem("numb");

   var request = $.ajax({
        url: server_url + '/ws_report',
        timeout:30000,
        type: "POST",
        data: {client_language: client_language, PIN_code:pin,client_phone:number}
    });
    request.done(function(msg) {
        //alert(JSON.stringify(msg));

    });
    if (msg.ws_resultat.result_ok==true)
    {
        alert('success!');
        window.open("account_details.html");

    }

    request.error(function(jqXHR, textStatus)
    {
       //MESSAGE
    });

}

I tried with <a href="#" onclick="miniReport()"></a>, and also to write the function with $('#idOfHref').click(function(){}); not working.

All I can see is the alert TEST and then nothing happens. I checked several posts here but nothing works for me.

Answer 1

Function can be corrected as,

function miniReport(){
    alert('TEST');    
   var client_account_number = localStorage.getItem("numb");

   $.ajax({
        url: server_url + '/ws_report',
        timeout:30000,
        type: "POST",
        data: {"client_language": client_language, "PIN_code":pin,"client_phone":number},
        success : function(msg) {
        //alert(JSON.stringify(msg));
            if (msg.ws_resultat.result_ok == true)
            {
                alert('success!');
                window.open("account_details.html");    
            }
        },
        error: function(jqXHR, textStatus)
        {
           alert('Error Occured'); //MESSAGE
        }
     }
 });

1. No need to assign ajax call to a variable,
2. Your further work should be in Success part of AJAX request, as shown above.

Answer 2

It's a bad practice use an onclick() so the proper way to do this is:

Fiddle

$(document).ready(function(){
   $('#mylink').on('click', function(){
      alert('onclick is working.');
      miniReport(); //Your function 
   });
});

function miniReport(){
     var client_account_number = localStorage.getItem('numb');
     $.ajax({
        url: server_url + '/ws_report',
        timeout:30000,
        type: "POST",
        data: {
            'client_language': client_language, 
            'PIN_code': pin,
            'client_phone': number
       },
        success: function(msg){
            if (msg.ws_resultat.result_ok==true)
            {
                alert('success!');
                window.open("account_details.html");
            }
        },
            error: function(jqXHR, textStatus)
          {
           //Manage your error.   
          }
    });
}

Also you have some mistakes in your ajax request. So I hope it's helps.

Answer 3

Rectified version of your code with document .ready

    $(document).ready(function(){
    $("#hrefid").click(function(){ // your anchor tag id if not assign any id 

           var client_account_number = localStorage.getItem("numb");
           $.ajax({
            url: server_url + '/ws_report',
            timeout:30000,
            type: "POST",
data:{"client_language":client_language,"PIN_code":pin,"client_phone":number},
            success : function(msg) {

                if (msg.ws_resultat.result_ok == true)
                {
                   window.open("account_details.html");    
                }
                else 
                {
                  alert('some thing went wrong, plz try again');
                }
            }

         }
    });
    });