jquery confirm not working on first click

Question

My jquery is as follows:

function confirmRxAction(tNum) {
  var aUrl = "";
  alert(tNum);
  if (confirm("Are you sure you want to close?")) {
    aUrl = "${pageContext.request.contextPath}/tax/executeoneTimeEx.html?tNum=" + tNum;
    $("#aRx").click();
  }

  $(document).ready(function() {
    $("#aRx").click(function() {

      xhr = $.ajax({
        type: "POST",
        url: aUrl,
        dataType: "text",
        error: function(XMLHttpRequest, errorThrown) {},
        success: function(ajaxResult, testStatus) {

          if (ajaxResult.length > 0)
            alert(ajaxResult);
          else
            afterUpdate();

        }
      });

      return false;
    });
  });
}

When the hyperlink is clicked the fucntion is called and pops up this confirm message with yes or no. When i select yes for the first time control doesnt goto controller. The confirm popup closes but no action is taken. So i go click hyperlink for the second time and everything works fine. What is wrong that prevents the action to be called on first click?

Answer 1

Your $(document).ready function is inside your confirm function, so the click event isn't attached until confirm function is run the first time. Try moving the $(document).ready function outside of the confirm function.

Answer 2

Don't know why you writen your code like this, but you should use it like below::

function confirmRxAction(tNum){
    var aUrl = "";
    alert(tNum);
    if(confirm("Are you sure you want to close?")) {
            aUrl = "${pageContext.request.contextPath}/tax/executeoneTimeEx.html?tNum=" + tNum;
            xhr = $.ajax({type: "POST", 
                url: aUrl,  
                dataType: "text",
                error: function(XMLHttpRequest, errorThrown){                              
                }, 
                success: function(ajaxResult, testStatus){

                    if(ajaxResult.length>0)
                        alert(ajaxResult);
                    else
                        afterUpdate();

                }
            });
        }
}

Just replace your function with my function.

Answer 3

I would suggest setup the click on document ready instead. And add the confirm in the click() like in the snippet example.

 function afterUpdate() { alert("after update"); } $(document).ready(function() { $("#aRx").click(function(event) { event.preventDefault(); if (confirm("Are you sure you want to close?")) { xhr = $.ajax({ type: "GET", url: "http://services.groupkt.com/country/get/all", dataType: "json", error: function(XMLHttpRequest, errorThrown) { alert("error" + errorThrown); }, success: function(data) { if (data != null) alert(data); else afterUpdate(); } }); } return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="aRx" href="#">Click Here</a>