Re: Managed multi dialog for a dashboard page (SOLUTION WITH AJAX) - Question to set top and left

Re: Managed multi dialog for a dashboard page (SOLUTION WITH AJAX) - Question to set top and left

Hi all,

When displaying the home page of our web application business I displays several block with dedicated information ( list of my files to my contact list , ...). To make dynamic interface , I encapsulated the block ( div ) in jquery UI dialog (page dashboard ) .

Upon reflection, I used ajax return. The result is satisfactory . The method returns ajax take over the store top / left / W / H ( in the database ) .
For a control in this test, the ajax method returned on the information and displays it in a tag.

I can initialize the width and height .
But I can not set position ( top and left ) . Does anyone have the answer ?

Code:

<!--
Use the dragStop  and resizeStop  callbacks to be notified when the dialog is moved or resized.
Query the container for the size details - $('#dialog_window_1').dialog('widget').position() , ...width() , ...height() .
Then either store it locally in cookies or local storage, or remotely via ajax  and restore when the page is next shown.
-->


<?php
// Méthode ajax de récupération des informations top/left/widt/height
$url_windows_position            = "'" . site_url() . 'application/windows_position' . "'";

// Variable de mémo par fenêtre (ici c'est un test mais à charger avec les info mémorisés en base de données)
$_SESSION['dialog_window_1']['win_top']         = 0;
$_SESSION['dialog_window_1']['win_left']        = 0;
$_SESSION['dialog_window_1']['win_width']       = 300;
$_SESSION['dialog_window_1']['win_height']      = 300;
?>

<style>
#area_dashbord{
 //width:900px;
        width:100%;
 height: 800px;
 border: 1px solid grey;
 overflow:hidden;
}
</style>



<section class="zone_data_list">
    <fieldset>
        <span class="retour_ajax_ok">CR </span>
    </fieldset>
</section>


<div id="area_dashbord">
   
    <div id="dialog_window_1" title="Divers">
        <p>Bla bla bla</p>
    </div>

    <div id="dialog_window_2" title="Mes dossiers">
        <?php
            // Affichage de la liste
            echo $records;
        ?>   
    </div>

</div>



<script>

    var dialog_window_1_top     = <?php echo $_SESSION['dialog_window_1']['win_top']; ?>;
    var dialog_window_1_left    = <?php echo $_SESSION['dialog_window_1']['win_left']; ?>;
    var dialog_window_1_width   = <?php echo $_SESSION['dialog_window_1']['win_width']; ?>;
    var dialog_window_1_height  = <?php echo $_SESSION['dialog_window_1']['win_height']; ?>;

    $('#dialog_window_1').dialog({
        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
        //width: 'auto',
        width: dialog_window_1_width,
        height: dialog_window_1_height,
        position: { of: $( "#area_dashbord" ), my: 'left top', at: 'left top', offset: '5px' },
        //position: { of: $( "#area_dashbord" ), my: 'left top', at: 'left top', offset: '5px' },
        collision : 'flip',
       
        dragStop: function( event, ui ) {
                                            var obj_position = $('#dialog_window_1').dialog('widget').position();
                                            var obj_top = obj_position.top;
                                            var obj_left = obj_position.left;
                                            var obj_width = $('#dialog_window_1').dialog('widget').width();
                                            var obj_height = $('#dialog_window_1').dialog('widget').height();
                                            $.ajax(
                                                    {
                                                            type    : "POST",
                                                            url     : <?php echo $url_windows_position?>,
                                                            data    : "id_windows="+"dialog_window_1"
                                                                       +"&win_top="+obj_top
                                                                       +"&win_left="+obj_left
                                                                       +"&win_width="+obj_width
                                                                       +"&win_height="+obj_height,
                                                            dataType : 'json',
                                                            cache  : false,
                                                            async  : true,
                                                            success: function(msg)
                                                                                   {
                                                                                       $(".retour_ajax_ok").text(msg.ret);
                                                                                   },
                                                    });
                                        },
                                       
        resizeStop: function( event, ui ) {
                                            console.log(event);
                                            var obj_position = $('#dialog_window_1').dialog('widget').position();
                                            var obj_top = obj_position.top;
                                            var obj_left = obj_position.left;
                                            var obj_width = $('#dialog_window_1').dialog('widget').width();
                                            var obj_height = $('#dialog_window_1').dialog('widget').height();
                                            $.ajax(
                                                    {
                                                            type    : "POST",
                                                            url     : <?php echo $url_windows_position?>,
                                                            data    : "id_windows="+"dialog_window_1"
                                                                       +"&win_top="+obj_top
                                                                       +"&win_left="+obj_left
                                                                       +"&win_width="+obj_width
                                                                       +"&win_height="+obj_height,
                                                            dataType : 'json',
                                                            cache  : false,
                                                            async  : true,
                                                            success: function(msg)
                                                                                   {
                                                                                       $(".retour_ajax_ok").text(msg.ret);


                                                                                   },
                                                    });
                                          }
    });
   
    $('#dialog_window_2').dialog({
        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
        //width: 'auto',
        width: 300,
        height: 300,
        position: {of: $( "#dialog_window_1" ), my: 'left bottom', at: 'right bottom', offset: '5px'},
        collision : 'flip'
    });
   
    $("#dialog_window_1").dialog({modal:true});
    $('.ui-dialog').draggable( "option", "containment", '#area_dashbord' );
    $(this).dialog( "option", "position", 'left' ); 
   
    $("#dialog_window_2").dialog({modal:true});
    $('.ui-dialog').draggable( "option", "containment", '#area_dashbord' );

 </script>