AJAX request for jQuery not working

Question

function showDialog(link) {
    $('#dialog .newsletter-join').click(function() {
        email = $.trim($(this).parent().find('.email').val());
        if (email != "Email Address" && email.length > 5) {
            $.ajax({
                url: '/newsletter/join',
                data: {
                    'email': email,
                    'pid': $('#dialog .pid').html().trim()
                }
            });

            return true;
        }
        return false;
    });
}

This code is executed correctly in FF and in chrome it runs perfect when executed in debugging mode, other wise it does not return anything.

When executed it shows alert box with nothing in it. I don't see anything in the XMLHttp response in console as well. I tried a few other changes:

cache:false // It just exeutes for the first time 
datatype:html 

Could you please let me know how to track this issue?

Updated Code :

I am calling the Code using the following script

$(document).ready(function() {
    // $(window).load(function () {
    showDialog();
    return true;
    //});
});

function showDialog(link) {
    $('#dialog .newsletter-join').click(function() {
        email = $.trim($(this).parent().find('.email').val());
        if (email != "Email Address" && email.length > 5) {
            $.ajax({
                url: '/newsletter/join',
                data: {
                    'email': email,
                    'pid': $('#dialog .pid').html().trim()
                },
                success: function(data) {
                    alert("Suvvess" + data);
                },
                error: function(xmlHttpRequest, textStatus, errorThrown) {
                    alert("error" + errorThrown);
                }
            });

            return true;
        }
        return false;
    });
}

Latest Code change : I added the

  async: false

This change in ajax call is giving the expected result , but this would stop all scripts to execute so still feel this cant be the permanent solution

Answer 1

You should close ajax function after error

$.ajax({
                url:'/newsletter/join',
                data:{ 'email':email, 'pid':$('#dialog .pid').html().trim() }

  >>>HERE REMOVE IT        });