Jquery Functions submitting at wrong times

[toxicandy]

My problem currently is that I am trying to call a function with jquery at a specific event but it is running at the wrong event. The function I want to call is:

function resolvedAjax(tid){
    $.ajax({type: 'post',url: 'resolveTicket.php',data: 'tid=' +tid, success: function(s){
        $('#resolvedTicket').html("Resolved");
        mainTable();
    }});
}

I am trying to call it VIA this jquery:

$(document).on('click', '.viewTD', function(){
       window.tid = $(this).closest('tr').find('.tidTD input').val();
       $.ajax({
           type: 'post',
            url: 'modalInfo.php',
           data: 'tid=' +tid,
           success: function(d){
               $('.modal-body').html(d);
               $('.modal-title').html("Ticket ID: " + tid);
               $('#myModal').modal('show');
               var time = $('#time').val();
               var desc = $('#description').val();

           }

       });

    });
    $( document ).on( "click", "#addComment", function() {
        $.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
        }});
    });
    $( document ).on( "click", "#Resolved",  resolvedAjax(window.tid));

My old code was:

$(document).on('click', '.viewTD', function(){
   var tid = $(this).closest('tr').find('.tidTD input').val();
   $.ajax({
       type: 'post',
        url: 'modalInfo.php',
       data: 'tid=' +tid,
       success: function(d){
           $('.modal-body').html(d);
           $('.modal-title').html("Ticket ID: " + tid);
           $('#myModal').modal('show');
           var time = $('#time').val();
           var desc = $('#description').val();
           $("#addComment").click(function(){
           $.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
             $.ajax({
                type: 'post',
                url: 'modalInfo.php',
                data: 'tid=' +tid,
                success: function(d){
                    $('.modal-body').html(d);
                    $('.modal-title').html("Ticket ID: " + tid);
                    $('#myModal').modal('show');
                }});
           }});
           });
       }

   });
   $('#Resolved').click(resolvedAjax(tid));
});

which stopped working because whenever I opened the modal it would resolve a ticket. I am trying to make so that if you press the resolve button in the modal it will resolve a ticket. The old code was always resolving the ticket as soon as the modal opened not if the button was clicked. Currently my problem is trying to pass the tid to the function but keeping the #Resolved event outside the scope of the modal. I have tried using window as you currently see and globals and objects but can't figure anything out.

(Additional information just in case it is needed) The modal's body is constructed by the first ajax call in the second bit of jquery code. Inside the modal is a table with the ticket information and a form to add comments and the resolve button. I have all this redundant nested code because it was the only way I could get comments to get added and it resolved a few problems (though it has created a few). I think I can get it all working if I can get some of these functions to work but right now I am having the problem of opening the modal and resolving the tickets right away instead of allowing me to view it and add comments correctly.

Error I get when I open the modal:
Uncaught TypeError: ((m.event.special[e.origType] || (intermediate value)).handle || e.handler).apply is not a function

[hericles]

What if you register the #Resolved click inside the success return of your AJAX call?

$(document).on('click', '.viewTD', function(){
       window.tid = $(this).closest('tr').find('.tidTD input').val();
       $.ajax({
           type: 'post',
            url: 'modalInfo.php',
           data: 'tid=' +tid,
           success: function(d){
               $('.modal-body').html(d);
               $('.modal-title').html("Ticket ID: " + tid);
               $('#myModal').modal('show');
               var time = $('#time').val();
               var desc = $('#description').val();

               $('#Resolved').click(resolvedAjax(window.tid));
           }
       });
    });
    $( document ).on( "click", "#addComment", function() {
        $.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
        }});
    });

[toxicandy]

I just tried that and it still calls the modalInfo.php and resolveTicket.php at the same time so when the modal opens the ticket that is in that modal gets resolved. I wouldn't have a problem doing this if it wasn't dynamic but the modal's content is all generated dynamically so for me to pass information to the resolved page I would need to know which ticket is open in the modal so I have to know the modal is open. Currently that call is what opens the modal when a person clicks viewTD class. I don't know how to nest them to get it to a point where it works. If it was all static content I doubt there would be any conflicts.

I've only just scanned this. jQuery has the .done() Promise method, so you could nest a second Ajax call inside that:

$.ajax(...){
...
}
.done(function( data ) {
    //get required infro from 'data'
    //or set stuff and get stuff
    //send new Ajax request here 
 });

[toxicandy]

I have tried that, the code I Was using is:

$(document).on('click', '.viewTD', function(){
       var tid = $(this).closest('tr').find('.tidTD input').val();
       //modalConent(tid);
       tabID.tableID = tid;
       //alert(tabID.tableID);
        $.ajax({
           type: 'post',
            url: 'modalInfo.php',
           data: 'tid=' +tid,
           }).done(function(d){
               $('.modal-body').html(d);
               $('.modal-title').html("Ticket ID: " + tid);
               $('#myModal').modal('show');
               var time = $('#time').val();
               var desc = $('#description').val(); 


       }); 
       $( document ).on( "click", '#Resolved', resolvedAjax(tabID.tableID));
    });

I tried moving the $( document ).on( "click", '#Resolved', resolvedAjax(tabID.tableID)); inside the done event as well as where it is now and also tried doing $('#Resolved').on("click", resolvedAjax(tabID.tableID)); in both spots and that also did not work. I did make a few other changes to the code trying to get this all working which was make an object and use constructor/getter/setter methods to set tid there to make it accessible anywhere which works but if I move the click event for the #Resolved id out of the scope of the .viewTD click event it just never does anything, it never executes script.

EDIT

Something interesting to note, my #addComment event works which is strange because the information (form to add comments) is generated at the same time as the resolved button, both of which are generated when the modal opens and sends the ajax call. The #addComment is out of the scope of the .viewTD event and works but if I move #Resolved outside the event it doesn't work but if I leave it in that scope it triggers at all times the modal is generated.

[toxicandy]

I think it is solved. My Solution is:

    $(document).on('click', '.viewTD', function(){
       var tid = $(this).closest('tr').find('.tidTD input').val();
       modalConent(tid);
       tabID.tableID = tid;
    });
    $( document ).on( "click", "#addComment", function() {
        $.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){
            modalConent(tabID.tableID);
        }});
    });
    $( document ).on( "click", "#Resolved", function(){
        resolvedAjax(tabID.tableID);
    });

The functions just contain the ajax calls, nothing fancy there nor what I found to be the fix. I was reading a few days back about how .on had to be used for content generated dynamically as .click doesn't work unless it is present on page load and .live is depreciated. Whenever I was doing $( document ).on( "click", '#Resolved', resolvedAjax(tabID.tableID)); I would get an error so after 3 days, my fault for not trying this earlier, I changed it to use function() and then trigger the resolvedAjax function and that seemed to do this trick, I don't know why and if anyone does know why I'd love to know.