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>