CODEWITHSUNDEEP
jqueryjsonajax
Haroon
Haroon

Reputation: 506

The error/success message alert does not show up on 2nd ajax call without refreshing page again in jquery

This is click event of Submit/Send button in modal when I click on send button if the email field is empty it shows the error that Please enter valid Email(s). If email field is not empty and email is valid it shows the success message that An email has been sent to your friend. after sending email to that email and closes the modal because of that setTimeout function but when again I open that modal and clicks send button it does not show any error message or success message even though email is sent. I have to refresh the page to make it work again. What is wrong in my code?

$('#send-book').on('click', function() {
     $.ajax({
       url: 'index.php?route=account/books/shareWithFriends',
       type: 'post',
       data: 'emails=' + $("#friends-emails").val() +'&booklink=' + $("#sharedBookUrl").val(),
       dataType: 'json',
     beforeSend: function() {
       $('#send-book').button('loading');
     },
     success: function(json) {
       var newDta = JSON.stringify(json);
       var msg = '';
       if (json['error']) {
        msg = "<div class='alert alert-danger'>" +
             "<strong>ERROR!</strong> " +
             json['error'] +
             "<button type='button' class='close' data-dismiss='alert'>×</button>" +
             "</div>";
       }
       if (json['success']) {
         msg = "<div class='alert alert-success'>" +
               "<strong>Success!</strong> " +
               json['success'] +
               "<button type='button' class='close' data-dismiss='alert'>×</button>" +
               "</div>";
       }
       $('#book-shared-message').html(msg);
       setTimeout(function() {
          $("#book-shared-message").hide();
          $('#tellYourFriendModel').modal('hide');
       }, 3000);
       $('#friends-emails').val('');
       $('#send-book').button('reset');
     }
   });
});

UPDATE :

/* code to handle show modal popup for tell your friend */
    $('a[id^="tellYourFriend-"]').on('click', function(e) {
        e.preventDefault();
        var currentThis = $(this);
        var book_url = currentThis.attr('data-book_url');
        $('#sharedBookUrl').val(book_url);
        //$('#book-shared-message').html('');
        $('#tellYourFriendModel').modal('show');
    });

Upvotes: 2

Views: 707

Answers (1)

Michael Geary
Michael Geary

Reputation: 28870

Your code calls .hide() on the #book-shared-message element, but it never calls .show() to show it again. So when you fill it with a new value using .html(msg) it is still invisible. You should probably call .show() every time you display it.

Similarly, you call $('#tellYourFriendModel').modal('hide'); which appears to be something to hide the modal overlay, but shouldn't there be some kind of corresponding .modal('show') call? I'm not familiar with this plugin so can't give you the specifics, but it does look suspicious.

BTW, this is something you could figure out on your own by using the DOM inspector from the developer tools in any browser. If you inspected your DOM elements after the second submit, you would see that some of them are hidden.

Upvotes: 1

Related Questions