Bilal Maqsood Bilal Maqsood - 4 months ago 9
jQuery Question

How can I show the result of an AJAX request in a dialog box?

I have some data on the server that i want to print in the dialog box, what i am trying to is the following.

$(function() {
$("#checkreservatoion").click(function() {
// getting selected date
var selected_date = $("#sd").val();

// getting route details
var selected_route = $("#route option:selected").val();

// getting the details of seats
var selected_sites = $("#qty option:selected").text();
$.post("abc.php", {
date: selected_date,
route: selected_route,
seats: selected_sites
}, function(ajaxresult) {
//getting ajax result and printing as html
$("#postrequest").html(ajaxresult);
});
});
});


but this code is not working, where
#postrequest
is the div for model that is a jQuery plugin.

Answer
alert(ajaxresult)

instead of

$("#postrequest").html(ajaxresult);

It will show a basic dialogue box but the use is generally discouraged

or for a much more stylish one: html:

<div class="dialogue">
    <div class="header">
        This is an alert!
    </div>
    <div class="body">

   </div>
</div>

css:

.dialogue{
    position:none;
    width:500px;
    height:500px;
    left:50%;
    top:50%;
    margin-left: -250px;
    margin-top:-250px;
}
.dialogue > .header{
    background: blue;
    color: white;
    height:20px;
    width:100%;
}
.dialogue > .body{
    width:100%;
    height:480px;
}

js

$(function() {
    $("#checkreservatoion").click(function() {
        // getting selected date
        var selected_date = $("#sd").val(); 

        // getting route details    
        var selected_route = $("#route option:selected").val(); 

        // getting the details of seats
        var selected_sites = $("#qty option:selected").text();
        $.post("abc.php", {
            date: selected_date,
            route: selected_route,
            seats: selected_sites 
        }, function(ajaxresult) {
            //getting ajax result and printing as html 
            $(".dialogue > .body").html(ajaxresult);
            $(".dialogue").css("position","fixed");
        });
    });
});

I have not tested this code but it should work

Comments