how to trigger animatedmodal window after success ajax call?

Question

How to open the modal after a ajax call on success i need to trigger the modal window automatically

<a class="main_blue_button" href="#complete_application_modal" id="applicationBtn">SIGN UP</a>

<div id="complete_application_modal">adsfadsf</div>

how to open the modal after on success ajax call

    $.ajax({
type: "POST",
url: "<?php echo site_url(); ?>users/signUp_business",
data: $('#signup_form').serialize(),   
dataType: "json",
success: function(result){
//alert(result);
    if(result.error==0){
        $("#show_error").html("This email or phone is already registered!");
        //$("#business_email").focus(); 
            $("#busp_email").removeClass('field_validation_error hidden');
                $("#busp_email").addClass('field_validation_error');
                $("#bus_email").css("color","#f42156");
                hasError = true;
    }else if(result.success==1) {

    $("#signup_form")[0].reset();

    $("#applicationBtn").attr("href","#complete_application_modal");

    //$("#applicationBtn").attr("href", "#complete_application_modal").trigger('click');
        $("a").trigger("click");

    }

that answer: [how to simulate a click-event](http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript) might help you! — Jeff, Sep 09 '15 at 12:21

score 0 · Answer 1 · answered Sep 09 '15 at 12:52

0

I think if your primary goal is to display modal window on ajax success you can simply do it by

$('#complete_application_modal').show();

and can hide it by

$('#complete_application_modal').show();

Then why are you using link reference..?

answered Sep 09 '15 at 12:52

Sunil

919
15
25

I need to animate model not show or hide. i am suing third party jquery plugin animatemodal.js – Tamilselvan v Sep 09 '15 at 13:18

score 0 · Answer 2 · answered Dec 23 '15 at 20:25

here is the modification to allow this

    (function ($) {

    $.fn.animatedModal = function(options) {
        var modal = $(this);

        //Defaults
        var settings = $.extend({
            modalTarget:'animatedModal', 
            position:'fixed', 
            width:'100%', 
            height:'100%', 
            top:'0px', 
            left:'0px', 
            zIndexIn: '9999',  
            zIndexOut: '-9999',  
            color: '#39BEB9', 
            opacityIn:'1',  
            opacityOut:'0', 
            animatedIn:'zoomIn',
            animatedOut:'zoomOut',
            animationDuration:'.6s', 
            overflow:'auto', 
            // Callbacks
            beforeOpen: function() {},           
            afterOpen: function() {}, 
            beforeClose: function() {}, 
            afterClose: function() {},
            override: false
        }, options);

        var closeBt = $('.close-'+settings.modalTarget);

        //console.log(closeBt)

        var href = $(modal).attr('href'),
            id = $('body').find('#'+settings.modalTarget),
            idConc = '#'+id.attr('id');
            //console.log(idConc);
            // Default Classes
            id.addClass('animated');
            id.addClass(settings.modalTarget+'-off');

        //Init styles
        var initStyles = {
            'position':settings.position,
            'width':settings.width,
            'height':settings.height,
            'top':settings.top,
            'left':settings.left,
            'background-color':settings.color,
            'overflow-y':settings.overflow,
            'z-index':settings.zIndexOut,
            'opacity':settings.opacityOut,
            '-webkit-animation-duration':settings.animationDuration
        };
        //Apply stles
        id.css(initStyles);

        if (!settings.override) {
            modal.click(function(event) {
                event.preventDefault();
                open();
            });
        }

        closeBt.click(function(event) {
            event.preventDefault();
            $('body, html').css({'overflow':'auto'});

            settings.beforeClose(); //beforeClose
            if (id.hasClass(settings.modalTarget+'-on')) {
                id.removeClass(settings.modalTarget+'-on');
                id.addClass(settings.modalTarget+'-off');
            } 

            if (id.hasClass(settings.modalTarget+'-off')) {
                id.removeClass(settings.animatedIn);
                id.addClass(settings.animatedOut);
                id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
            };

        });

        function afterClose () {       
            id.css({'z-index':settings.zIndexOut});
            settings.afterClose(); //afterClose
        }

        function afterOpen () {       
            settings.afterOpen(); //afterOpen
        }

        function open() {
            $('body, html').css({'overflow':'hidden'});
            if (href == idConc) {
                if (id.hasClass(settings.modalTarget+'-off')) {
                    id.removeClass(settings.animatedOut);
                    id.removeClass(settings.modalTarget+'-off');
                    id.addClass(settings.modalTarget+'-on');
                }

                if (id.hasClass(settings.modalTarget+'-on')) {
                    settings.beforeOpen();
                    id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
                    id.addClass(settings.animatedIn);
                    id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
                };
            }
        }

        return {
            open: open
        };
    }; 
}(jQuery));

AND YOU CAN TRIGGER using

var service = $("#demo01").animatedModal({
    override: true
});
service.open();

score 0 · Answer 3 · answered May 01 '16 at 06:59

one of the options in animatedModal is beforeOpen, you can use this option to call ajax request. like this:

$("#modal-btn").animatedModal({
  modalTarget:'animatedModal',
  beforeOpen: function() {
    // ajax request call here
    // fill modal by data
  }
});

score 0 · Answer 4 · answered May 11 '17 at 09:47

0

in success function trigger the click event manually. eg success : function(response){ $("#your-id-name").trigger('click'); }

answered May 11 '17 at 09:47

Magnotta

933
11
34

how to trigger animatedmodal window after success ajax call?

4 Answers4