Slyweb
На разработку сайта! Скидки 50%!

виджет dialog внутри виджета tabs с аяксом

Спрашивайте здесь о jQuery UI.

виджет dialog внутри виджета tabs с аяксом

Сообщение artemxxl » 25 май 2011, 11:18

есть некий сайт на одной из страниц которого использую виджет tabs с загрузкой контентов с других страниц сайта.
Вот на одной из этих страниц использую dialog.
При првой загрузке этой странице dialog нормально пашет, а вот если я пошелкал по табам(тоесть другие страницы поподгружал и вернулся к той dialog), то dialog не открывается (тоесть он вроде и открывается, но невидим). смотрел сгенерированный код страницы - там display:none; хотя вывожу его алертом после вызова диалога пишет display:block.

помогите плиз разобраться с этой проблемой.

код страницы с dialog-ом
Код: Выделить всё
<?php

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="author" content="artemxxl" />
    <link href="../css/settings.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.13.custom.min.js"></script>
    <script src="../js/settings.js" type="text/javascript"></script>
 
</head>

<body>
<div id="newG">

             
</div>




<table style="width: 100%;">
<tr>
<td style="width: 30%;vertical-align: top;">
<div id="accordion3" style="width: 100%;">
   <h3><img style="margin-right: 8px;position: absolute;right: 0;" src="../images/t.png" /><a href="#">GPS-устройства</a></h3>
   <div id="m1">
    <form style="font-size: 14px;">
   <div id="radio">
      <input onclick="getGadjets()" type="radio" id="radio1" name="radio" checked="checked"/><label style="width: 100%;-moz-border-radius:6px" for="radio1">Список устройств</label><br />
      <input onclick="newGadjet()" type="radio" id="radio2" name="radio" /><label style="width: 100%;-moz-border-radius:6px" for="radio2">Добавить устройство</label>
   </div>
</form>
   </div>
   <h3><img style="margin-right: 8px;position: absolute;right: 0;" src="../images/k.png" /><a href="#">Треки</a></h3>
   <div>
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
   </div>
   <h3><img style="margin-right: 8px;position: absolute;right: 0;" src="../images/h.png" /><a href="#">Уведомления</a></h3>
   <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
   </div>
    <h3><img style="margin-right: 8px;position: absolute;right: 0;" src="../images/b.png" /><a href="#">Команды</a></h3>
   <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
   </div>
    <h3><img style="margin-right: 8px;position: absolute;right: 0;" src="../images/l.png" /><a href="#">Личный профиль</a></h3>
   <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
   </div>
    <h3><img style="margin-right: 8px;position: absolute;right: 0;" src="../images/o.png" /><a href="#">Общие настройки</a></h3>
   <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
   </div>
   
</div>
</td>
<td style="width: 20px;"></td>
<td style="vertical-align: top;">

</td>
</tr>
</table>
 </body>

</html>

JS код к ней -
Код: Выделить всё
function newGadjet()
{
   // после возвр аякса
//  $('#radio1').click();
   // после возвр аякса
   
   $('#newG').dialog('open');
   var dd = $('#newG').css('display');
alert(dd)
}

function getGadjets()
{
   
    alert('aaa');
   // $('#radio1').click();
   $('#radio1').attr('checked','checked');
}
var h=screenSize().h-$('#menu_panel').height()-$('#head_map').height()-160;
 //   alert(h);
 
$(document).ready(function () {
   
//window
  //var ff = document.getElementById('newG');
 
 
 // alert(ff.id)
  $( "#newG:ui-dialog" ).dialog( "destroy" );

           $( "#newG" ).dialog({
            title: "Регистрация нового пользователя",
            show: "puff",
         hide: "scale",
            width: "500",
            maxHeight: "400",
            height: "340",
            autoOpen: false,
         modal: true
           
         
      });
 //       $( "#newG" ).dialog({
//   close: function(event, ui) {
 //   $('#radio1').click();}
//});
//window   
   
     
  $( "#radio" ).buttonset();
 
 $(function() {
      var icons = {
         header: "ui-icon-circle-arrow-e",
         headerSelected: "ui-icon-circle-arrow-s"
      };
      $( "#accordion3" ).accordion({
         icons: icons
      });
      $( "#toggle" ).button().toggle(function() {
         $( "#accordion3" ).accordion( "option", "icons", false );
      }, function() {
         $( "#accordion3" ).accordion( "option", "icons", icons );
      });
   });


     
   
   
 $( "#accordion3" ).accordion({
         collapsible: true
      });
 
//$( "#accordion3" ).accordion( "option", "active", 0 );
  //  $( "#newG" ).css('display','none');
    });
    $('#accordion3').click(function(){
        //    var w = $('#m1').width()+45;
//$('#m1').width(w+'px');
    })

страница с табами внутрь которой грузим страницу с диалогом-
Код: Выделить всё
<?php


?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="author" content="artemxxl" />
    <link href="../css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
    <link href="../css/cab.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.13.custom.min.js"></script>
    <script src="../js/cab.js" type="text/javascript"></script>
   <title>GPS Tracker - Личный кабинет</title>

</head>

<body style="background: #D1D2D2;">
<form name="hidden_form">
<input type="hidden" name="id1" value="<?php echo htmlspecialchars($str); ?>">
</form>


<div id="menu_panel" style="background: url(../images/top_bg.png);height: 42px;margin-bottom: 10px;">
<table style="width: 100%;float: right;height: 100%;">
<tr>
<td style="width: 20px;"></td>
<td ><a style="font-weight: bold;font-size: 18px; color: black;font-family: arial;" id="name_">"<?php echo htmlspecialchars($str2); ?>"</a></td>
<td class="td" id="exit" style="width: 110px;"><a class="a">Выход</a></td>
<td class="td" id="main" style="width: 110px;"><a class="a">На главную</a></td>
</tr>
</table>
</div>
<div id="tabs" style="background: url(../images/bg.png);">
   <ul>
      <li><a href="../maps/index.php">Мониторинг</a></li>
      <li><a href="../settings/index.php">Настройки</a></li>
      <li><a href="ajax/content3-slow.php">Инструкция</a></li>
      <li><a href="ajax/content4-broken.php">О проекте!</a></li>
   </ul>
   <div id="tabs-1">
      <p>Сюда потом че нить засунем типа там реклама или че еще короче для всх табов</p>
   </div>
</div>



 </body>

</html>

JS код к ней -
Код: Выделить всё
 function screenSize() {
      var w, h; // Объявляем переменные, w - длина, h - высота
      w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
      h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
      return {w:w, h:h};
}
$(document).ready(function () {
    ///tabs
  ////  $('#tabs').tabs.click(function(){
       //  $( "#newG:ui-dialog" ).dialog( "destroy" );
    //     alert('dd')
//    })
    $(function() {
         $( "#tabs" ).tabs({
         ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
               $( anchor.hash ).html(
                  "Ошибка сервера. Отсутствует эта страница! " );
            }
         }
      });
   });

    ///tabs
  //  var h=screenSize().h-$('#menu_panel').height()-30;
 // $('#tabs').height(h+'px'); 
  $('#exit').click(function(){

  })
   
   
   var lk = $('#name_').text();
   lk = lk.replace('"','');
   lk = lk.replace('"','');
   $('#name_').text(lk);
    });
artemxxl
 
Сообщения: 1
Зарегистрирован: 25 май 2011, 10:59

Вернуться в Вопросы по jQuery UI

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron