CODEWITHSUNDEEP
phpjqueryajaxtwitter-bootstrapmodal-dialog
Marios Fakiolas
Marios Fakiolas

Reputation: 1545

Bootstrap modal window + ajax from mysql

I want to launch some popup windows when user clicks corresponding buttons in an app of mine. I use 

$('#modal').on('show', function () {
    $.ajax({  ...  });
});

and with ajax i ask for some json content from mysql that i wish to inject into modal-header, modal-body and modal-footer. This is the html i use in general into my webpage that i want to refresh and show when a button choice is made. 

        <div class="modal hide fade" id="modal">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>

Problem is that modal appears empty or shows previous delivered content and after 1 sec or so ajax brings its updated goodies and so on. So content's update runs sadly in front of users eyes. Modal api doesn't give an option better than 'show', so that modal can be shown only when whole content is brought by ajax and is ready to be delivered to end user's screen.

Upvotes: 0

Views: 1177

Answers (1)

Marios Fakiolas
Marios Fakiolas

Reputation: 1545

Ok, i tried sth different. I run ajax call when a button is clicked and on success option first contents's is held and then i call manually modal window to show its updated goodies.

$('a[href=#viewProperty]').click(function(e) {

    var dataString = "action=viewProperty&propertyId=" + $.cookie('propertyId');

    $.ajax({
        type     : "GET",
        dataType : "json",
        url      : "ajax/property.php",
        data     : dataString,
        success  : function(data){
            console.log("ajax works");
            //$.removeCookie('propertyId');
            console.log(data.house_type);
            $('#viewProperty h3').empty().html('View Property: ' + data.house_type);

            $('#viewProperty').modal('show');               
        },
        error    : function(){
            console.log("ajax failed");
        }
    }); 

    return false;   
});

and works fine. Only thing left is to add a loader before ajax call is completed.

Upvotes: 1

Related Questions