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

помогите с jquery

Задавайте вопросы и общайтесь на темы CSS и HTML.

помогите с jquery

Сообщение fresh » 07 фев 2012, 13:48

надо сделать добавление данные о ЕГЭ и редактировать их я хочу через table а не через jgrid
вот как я сделал
Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css">


   <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/jquery.effects.slide.js"></script>
   <script src="js/jquery.ui.datepicker.js"></script>
   <script src="js/jquery.ui.core.js"></script>
   <script src="js/jquery.ui.widget.js"></script>
   <script src="js/i18n/jquery.ui.datepicker-ru.js"></script>
   <script src="js/jquery.ui.tabs.js"></script>
   
   
   <script src="js/jquery.ui.mouse.js"></script>
   <script src="js/jquery.ui.button.js"></script>
   <script src="js/jquery.ui.draggable.js"></script>
   <script src="js/jquery.ui.position.js"></script>
   <script src="js/jquery.ui.resizable.js"></script>
   <script src="js/jquery.ui.dialog.js"></script>
   <script>
   $(function() {
      // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
      $( "#dialog:ui-dialog" ).dialog( "destroy" );
      
      var
      test=true,   

      predmet = $( "#predmet" ),
         countbal = $( "#countbal" ),
         ege = $( "#ege" ),
         num = $( "#num" ),
         dateege = $( "#datepicker_dateege" ),
         buttonege=$("#buttonege"),
         allFields = $( [] ).add( predmet ).add( countbal ).add(ege).add(num).add(dateege).add(buttonege),
         tips = $( ".validateTips" );
      
      $( "#dialog-form" ).dialog({

         autoOpen: false,
         height: 300,
         width: 350,
         modal: true,
         buttons: {
            "Create an account": function() {
               var bValid = true;
                allFields.removeClass( "ui-state-error" );

               bValid =  ( predmet, "predmet", 3, 16 );   
               bValid = ( countbal, "countbal", 6, 80 );
               bValid =  ( ege, "ege", 5, 16 );
               bValid =  ( num, "num", 5, 16 );
               bValid =  ( dateege, "dateege", 5, 16 );
               bValid=      (buttonege,"buttonege",5,16);
               if ( bValid ) {
                  $( "#users tbody" ).append( "<tr>" +
                     "<td>" + predmet.val() + "</td>" +
                     "<td>" + countbal.val() + "</td>" +
                     "<td>" + ege.val() + "</td>" +
                     "<td>" + num.val() + "</td>" +
                     "<td>" + dateege.val() + "</td>" +
                     "<td>"+'<button id="buttonege">Создать1</button>' +"</td>"+                                             
                  "</tr>" );
                  $( this ).dialog( "close" );
               }
            },
            Cancel: function() {
               $( this ).dialog( "close" );
            }
         },
         close: function() {
         allFields.val( "" ).removeClass( "ui-state-error" );
         }
      });

   $( "#create" )
         .button()
         .click(function() {
            $( "#dialog-form" ).dialog( "open" );      
      });   


      $( "#dialogform" ).dialog({

         autoOpen: false,
         height: 300,
         width: 350,
         modal: true,
         buttons: {
            "Create an account": function() {
               var bValid = true;
                allFields.removeClass( "ui-state-error" );

               bValid =  ( predmet, "predmet", 3, 16 );   
               bValid = ( countbal, "countbal", 6, 80 );
               bValid =  ( ege, "ege", 5, 16 );
               bValid =  ( num, "num", 5, 16 );
               bValid =  ( dateege, "dateege", 5, 16 );
               bValid=      (buttonege,"buttonege",5,16);
            if ( bValid ) {
               /*   $( "#users tbody" )( "<tr>" +
                     "<td>" + predmet.val() + "</td>" +
                     "<td>" + countbal.val() + "</td>" +
                     "<td>" + ege.val() + "</td>" +
                     "<td>" + num.val() + "</td>" +
                     "<td>" + dateege.val() + "</td>" +
                     "<td>"+'<button id="buttonege">Создать1</button>' +"</td>"+                                             
                  "</tr>" ); */
                  $( this ).dialog( "close" );
               }
            },
            Cancel: function() {
               $( this ).dialog( "close" );
            }
         },
         close: function() {
         allFields.val( "" ).removeClass( "ui-state-error" );
         }
      });








   $( "#buttonege" ).live({
         click:function() {
            $( "#dialogform" ).dialog( "open" );      
      }   
      
         });
   });
   </script>

<!--dialog-->   
   <script>
   $(function() {
      $( "#dialog:ui-dialog" ).dialog( "destroy" );
   
      $( "#dialog-message" ).dialog({
         autoOpen: false,
         modal: true,
         buttons: {
            Ok: function() {
               $( this ).dialog( "close" );
            }
         }
      });
      $( "#submit" )
         .button()
         .click(function() {
            $( "#dialog-message" ).dialog( "open" );
         });
   });
   </script>
   
   <script>

function FormClick () {
  var str = $("#persform").serialize();
  $.post("x.php", str, function(data){$("#test").html(data)})
}
</script>





<!--tabs-->
   <script>
   $(function() {
      $( "#tabs" ).tabs();
   });
   </script>


<!--datepicker-->
   <script>
   $(function() {
      $.datepicker.setDefaults( $.datepicker.regional[ "ru" ] );
               
      $( "#datepicker_birth" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
      $( "#datepicker_pas" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
    
      $( "#datepicker_receipt" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
      $( "#datepicker_expiry" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
     $( "#datepicker_deliverydoc" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
      $( "#datepicker_expiritiondoc" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
      $( "#datepicker_carryout" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
         $( "#datepicker_dateege" ).datepicker({showButtonPanel: true, changeMonth: true, changeYear: true });
      
   });
   </script>


<!--forms-->
    <script type="text/javascript" charset="utf-8">
      $(function(){
        $("input, textarea, select, button").uniform();
      });
    </script>
 
 
    <link rel="stylesheet" href="css/uniform.default.css" type="text/css" media="screen">
    <style type="text/css" media="screen">
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        padding: 40px;
      }
      h1.forms {
        margin-top: 0;
        color: #666;
      }
      ul.forms {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      li.forms {
        margin-bottom: 20px;
        clear: both;
      }
      label {
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        margin-bottom: 3px;
        clear: both;
      }
    </style>
 
   
  </head>
  <body>


<div id="tabs">


   <ul>
      <li><a href="#tabs-2">Данные об образовании</a></li>
   </ul>

   
    <div id="tabs-2">
   
    <h2 class="forms">Данные об образовании</h2>
      <ul class="forms">
 
  <!-- select -->       
        <li>
          <label>Тип учебного заведения:</label>
          <select name="">   
          </select>
          <label>Полученное образование:</label>
          <select name="">   
          </select>
          <label>Наименование учебного заведения:</label>
          <select name="">   
          </select>
          <label>Аббревиатура:</label><input type="text" name="" size="40"/>
          </select>
         <label>Название специальности</label><input type="text" name="specname" size="40"/>
         <label>Код специальности</label><input type="text" name="speccode" size="40"/> 
        </li>
       
        <li>
        <label>Адрес учебного заведения:(?)</label>
        </li>
       
        <li>
        <label>Подробности обучения</label> 
        <label>Дата поступления:</label><input name="datebeg" type="text" id="datepicker_receipt"  size="20"/>       
        <label>Дата окончания:</label><input name="dateend" type="text" id="datepicker_expiry"  size="20"/>       
        <label>Иностранный язык:</label>
        <select name=""></select> 
        <label>Медаль:</label>
        <select name=""></select>
        <label>Полученный документ</label>
        <label>Тип:</label>
        <select name=""></select>
          <label>Серия:</label><input type="text" name="ser" size="40"/>         
          <label>Номер:</label><input type="text" name="num" size="40"/>
          <label>Источник:</label>
         <select name=""></select>
         <label>Дата выдачи:</label><input name="" type="text" id="datepicker_deliverydoc"  size="20"/>     
         <label>Дата истечения:</label><input name="" type="text" id="datepicker_expiritiondoc"  size="20"/>           
        </li>
        <li>
         <label>Олимпиада</label>   
         <label>Название</label>
         <select name=""></select>
         <label>Направление</label>
         <select name=""></select>
<div class="file-checkbox">       
          <label>
                <input type="checkbox" value="chek1" /> Всероссийская</label>
         <label>Уровень</label><select name="">
         <label>Возростная группа</label><input type="text" name=""size="40">
            <label>Дата проведения:</label><input name="" type="text" id="datepicker_carryout"  size="20"/>       
        </li>
        <li>
        <label></label>
         <select name="status">
            <option>Диплом</option>
            <option>Свидетельство</option>
            <option>Грамота</option>
          </select>
         <label>Серия</label><input type="text" name=""size="40">
         <label>Номер</label><input type="text" name=""size="40">
         <label>Степень</label><input type="text" name=""size="40">
         <label>Место</label><input type="text" name=""size="40">
         <label>Комнтарий</label><input type="memo" name=""size="40">
        </li>
     <li>
     
<div class="demo">

<div id="dialog-form" title="Добавление данных о ЕГЭ">
   <p class="validateTips">Заполните все поля</p>

   <form>
   <fieldset>
      <label for="predmet">Предмет</label>
      <input type="text" name="predmet" id="predmet" value="" class="text ui-widget-content ui-corner-all">
      <label for="countbal">Кол-во баллов</label>      
      <input type="text" name="countbal" id="countbal" value="" class="text ui-widget-content ui-corner-all" />
      <label for="num">Номер</label>
      <input type="text" name="num" id="num" value="" class="text ui-widget-content ui-corner-all" />
       <label for="dateege">Дата выдачи:</label>
       <input  type="text" name="dateege" id="datepicker_dateege"  size="20"/>     
     
      <label for="ege">Предоставленно:</label>
          <select type="text" name="ege" id="ege">
            <option>Копия</option>
            <option>Оригинал</option>
          </select>
    <!--  <label for="buttonege">save</label>
      <input type="button" name="buttonege" id="buttonege"/>-->
   </fieldset>
   </form>
</div>

<div id="dialogform" title="Добавление данных о ЕГЭ">
   <p class="validateTips">Заполните все поля</p>

   <form>
   <fieldset>
      <label for="predmet1">Предмет1</label>
      <input type="text" name="predmet1" id="predmet1" value="#users tbody predmet" class="text ui-widget-content ui-corner-all">
      <label for="countbal1">Кол-во баллов</label>      
      <input type="text" name="countbal1" id="countbal1" value="" class="text ui-widget-content ui-corner-all" />
      <label for="num1">Номер</label>
      <input type="text" name="num1" id="num1" value="" class="text ui-widget-content ui-corner-all" />
       <label for="dateege1">Дата выдачи:</label>
       <input  type="text" name="dateege1" id="datepicker_dateege"  size="20"/>     
     
      <label for="ege1">Предоставленно:</label>
          <select type="text" name="ege1" id="ege1">
            <option>Копия</option>
            <option>Оригинал</option>
          </select>
    <!--  <label for="buttonege">save</label>
      <input type="button" name="buttonege" id="buttonege"/>-->
   </fieldset>
   </form>
</div>

<div id="users-contain" class="ui-widget">
   <h1>ЕГЭ:</h1>
   <table id="users" class="ui-widget ui-widget-content">
      <thead>
         <tr class="ui-widget-header ">
            <th>Предмет</th>
            <th>Кол-во баллов</th>
            <th>Предоставленно</th>
            <th>Номер</th>
            <th>Дата выдачи</th>
            <th>Редактировать</th>
         </tr>
      </thead>
      <tbody>
         <tr>
         </tr>
      </tbody>
   </table>
</div>
<button id="create">Создать</button>



</div><!-- End demo -->














     
     </li>     
     
     
       
    </ul>
   
   
   
    </div>

    <div id="tabs-3">
    <!--facult_data-->
    </div>
       
</div>

<div align="right">
      <ul class="forms">
        <li>
          <button id="submit" type="submit">Сохранить</button>
          <input onclick="return FormClick(this)" type="submit" value="ok">
          <input type="reset" value="Отмена"/>
         


         
        </li>
      </ul>
</ul>     
     
</div>     
    </form>
   
   
   <div id="dialog-message" title="Ошибка!">
   <p>
      <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;" hidden:false></span>
      Не верно заполнены поля!
   </p>
   <p>
      Сюда вывести поля, которые не корректно заполнены.
   </p>
   </div>
     <div id="test">
   
   
   </div> 

  </body>
</html>

и не получается(((( помогите пожалуйста
fresh
 
Сообщения: 1
Зарегистрирован: 07 фев 2012, 13:40

Вернуться в Вопросы о CSS и HTML

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

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

cron