Shahin
Shahin

Reputation: 12843

Fill JQuery UI Dialog From Server (Database)

I have Jquery Ui Dialog Like this :

<script type="text/javascript">
    $(document).ready(function () {

        $(document).mousemove(function (e) {
            x = e.pageX;
            y = e.pageY;
            $("#d").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode",
                position: [e.pageX, e.pageY],

                open: function (type, data) {
                    //Fill Dialog From Server
                }

            });
        });

        $("#c").bind("mouseover", function () {
            $("#d").dialog('open'); // open
        });
        $("#c").bind("mouseleave", function () {
            $("#d").dialog('close'); // open
        });
    });
</script>

How can i load some data from server dynamic ? in asp.net

Upvotes: 1

Views: 2786

Answers (2)

Shahin
Shahin

Reputation: 12843

i found solution

<WebMethod()> _
Public Shared Function GetInfoByMprID(ByVal mprID As String) As String

    Return resualt
End Function

<script type="text/javascript">
    $(document).ready(function () {

        $(document).mousemove(function (e) {
            x = e.pageX;
            y = e.pageY;
            $("#d").dialog({
                autoOpen: false,
                width: 'auto',
                show: "blind",
                hide: "explode",
                position: [e.pageX, e.pageY],

                open: function (type, data) {
                    $.ajax({
                        type: "POST",
                        url: "Constants.aspx/GetInfoByMprID",
                        data: "{'mprID': '" + 158 + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            //alert(msg.d);
                            //$('lbl').val() = msg.d;
                            $("#d").empty();
                            $("#d").append('<p>' + msg.d + '</p>');
                        },
                        error: AjaxFailed
                    });
                }

            });
        });

        $("#c").bind("mouseover", function () {
            $("#d").dialog('open'); // open
        });
        $("#c").bind("mouseleave", function () {
            $("#d").dialog('close'); // open
        });
    });
</script>

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630379

The call is fairly simple, just get ASP.Net to return only what content should be in the dialog, not an entire <html>....</html> page. The load can be as simple as using .load(), like this:

open: function () {
  $(this).load("MyDialogContent.aspx");
}

...or it can be a web service call which an return either HTML or JSON, etc...you have a lot of options here.

Upvotes: 2

Related Questions