How to call an AJAX function on anchor tag?

Question

I'm using PHP, jQuery, AJAX, Smarty for my website. I'm having following line of code from smarty template. I wan to call the jQuery AJAX function on the onclick of that hyperlink but I'm not able to call it. Can you help me in giving call to the jQuery AJAX function? Following is my code. Code from Smarty template:

<a class="edit_user_transaction_status" href="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}">Update</a>

jQuery AJAX function is as follows:

$(".edit_user_transaction_status").click(function(e) { 
         e.preventDefault();
         //for confirmation that status change
         var ans=confirm("Are you sure to change status?");
         if(!ans) {
             return false;
         }  
         var post_url           = $(this).attr('href');
         var transaction_status_update = $('#transaction_status_update').val();      

         $.ajax({
             type: "POST",
             url: post_url+"&transaction_status_update="+transaction_status_update,
                 data:$('#transaction_form').serialize(),
             dataType: 'json',  
             success: function(data) {              
                 var error = data.login_error;

                 $(".ui-widget-content").dialog("close");
                //This variables use for display title and success massage of transaction update              
                 var dialog_title   = data.title;              
                 var dialog_message = data.success_massage; 
                 //This get link where want to rerdirect
                 var redirect_link  = data.href;            

                 var $dialog = $("<div class='ui-state-success'></div>")
                 .html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
                 .dialog({
                     autoOpen: false,
                     modal:true,
                     title: dialog_title,
                     width: 500,
                     height: 80,
                     close: function(){                                     
                         document.location.href =redirect_link;
                     }                  
                 });                    

                 $dialog.dialog('open');                    
             }          
        });
     });
});

If I try to print the alert at the beginning of function it's not getting printed. Can you help me in achieving this? Thanks in advance.

Answer 1

Corrected Code:

$(".edit_user_transaction_status").click(function(e) { 
         e.preventDefault();
         //for confirmation that status change
         var ans=confirm("Are you sure to change status?");
         if(!ans) {
             return false;
         }  
         var post_url           = $(this).attr('href');
         var transaction_status_update = $('#transaction_status_update').val();      

         $.ajax({
             type: "POST",
             url: post_url+"&transaction_status_update="+transaction_status_update,
                 data:$('#transaction_form').serialize(),
             dataType: 'json',  
             success: function(data) {              
                 var error = data.login_error;

                 $(".ui-widget-content").dialog("close");
                //This variables use for display title and success massage of transaction update              
                 var dialog_title   = data.title;              
                 var dialog_message = data.success_massage; 
                 //This get link where want to rerdirect
                 var redirect_link  = data.href;            

                 var $dialog = $("<div class='ui-state-success'></div>")
                 .html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
                 .dialog({
                     autoOpen: false,
                     modal:true,
                     title: dialog_title,
                     width: 500,
                     height: 80,
                     close: function(){                                     
                         document.location.href =redirect_link;
                     }                  
                 });                    

                 $dialog.dialog('open');                    
             }          
        });
     });

Note: Remove }); from the last line.