VPF::ajax-форма с большим количеством кнопочек

ksnk

Дата 15.11.2010, 11:44 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Некий рецепт неких решений, возможно кому-то будет интересно. Возможно кто-то сделал лучше. smile

Делал формы с большим количеством разных контролов - кнопочек, расставленных в соответствии с представлениями заказчика...
Все кнопки с javascript-механикой - смена картинок по hover, изменение картинки по клику и прочая стандартная анимация.
Примерный смысл формы -- редактирование структуры и содержания некоей таблицы (расположение столбиков и строк) + В каждой строчке таблицы имеется несколько дополнительных кнопок управления с разной логикой.

Практически все контролы построены на input:button. Практически все они должны выполнить некий ajax-запрос на сервер, получить результат и иногда перезагрузить окно. Нажатие на некоторые кнопки должно сопровождаться вводом данных, некоторые - предупреждением и так далее.

Придумалось примерно такое решение по разметке кнопок

Код


<input type="button" class="ajax stdbutton xxremove"
    data-confirm="действительно удалить пользователя?"
    data-href="?do=killuser&id={{user.id}}"
    data-complete="window.location.reload();"
>

Понятно, что такая разметка будет валидной только с <doctype html>.

Класс ajax, собственно, включает обработку нажатия на эту кнопку. Класс stdbutton отвечает за стандартное поведение при движении мыши, а внешний вид определяется по классу xxremove. при обработке .stdbutton'а он регуляркой выковыривается из className элемента (2 буквы x в начале названия) и служит ключем в массиве картинок и размеров кнопки управления, для автоматизации работы с движением мыши. Все картинки во всех состояниях расположены в одном файле. Разметкой этого файла служит массив в javascript'е

Код


    var states={ // 0 - usual, 1 hover, 2 - click , 4 disable
     delrec:{bg:['-227px -5px','-227px -29px'],w:16,h:16},
     remove:{bg:['-249px -5px','-249px -29px'],w:16,h:16},
        savebutton:{bg:['-0px -176px','-0px -116px','-0px -146px','-0px -86px'],w:120,h:22},
...
        arrowup:    {bg:['-313px -4px','-313px -22px','-313px -41px'],w:10,h:11},
        arrowdn:    {bg:['-325px -4px','-325px -22px','-325px -41px'],w:10,h:11},
        arrowlf:    {bg:['-272px -4px','-272px -22px','-272px -41px'],w:10,h:11},
        arrowrt:    {bg:['-285px -4px','-285px -22px','-285px -41px'],w:10,h:11},
     nothing:''
    };

Он составляется вручную, при добавлении нового элемента. w и h - размеры, bg - массив из bakground-position, которые соответствуют разным состояниям кнопки.

Для поддержки всего этого добра потребовалось написать не очень много строк на JS (jQuery)

Код



    $.ajaxSetup({
        timeout:5000 // 5 секунд на запрос. Должно быть достаточно...
        ,complete: function(xht,textStatus){
            
            if(!xht.status) { // looks like timeout!
                debug('timeout '+textStatus);
            } else if(xht.status==200) {// looks like Ok!
                debug('complete '+textStatus);
            } else { // looks like 500 status and so on
                debug('unknown '+textStatus+'('+(xht.status||0)+')');
            }
            
            var data=xht.responseText;
            if(typeof(data)=='string'){
                try{
                    var d=(new Function('return '+data))();
                    data = d;
                } catch(e){
                    debug('fault',data);
                }
            } 
            if(data && data.error){
                win_alert({
                    txt:data.error
                });
            }
            if(data && data.debug){
                debug(data.debug);
            }
            
        }

        ,error: function (xht, textStatus, errorThrown){
            debug('error',textStatus);
        }

    }); // 5 second, no more

    $('a.ajax').click(function(){
        var $self = $(this);
        if(this.href){
            $.get(this
                .href.replace('ajax=1','')
                .replace(/(do=\w*)/,'$1&ajax=1'));
        }
        return false;    
    });

    $('input.ajax:button').click(function(){
        var $self = $(this),confirm,href,ajaxit
            ,compl=$(this).attr('data-complete');
        if(typeof(compl)=='string'){
            try{
                compl=(new Function('data','return '+compl));
            } catch(e){;}
        }; 
        ajaxit=function($repl){
            href=$self.attr('data-href');
            if($repl) href=href.replace('~~',decodeURIComponent($repl));
            if(href){
                $.get(href.replace('ajax=1','').replace(/(do=\w*)/,'$1&ajax=1')
                    ,compl);
            }
        };
        if(confirm=$self.attr('data-confirm')){
            win_confirm({
                txt:confirm,
                yes:function(){
                    ajaxit();
                }
            });
        } else if(confirm=$self.attr('data-input')){
            win_input({
                txt:confirm,
                yes:function(txt){
                    ajaxit(txt);
                }
            });
        }
        return false;    
    });

забавным показалось то, что это единственное место, которое отвечает за ajax. Раньше все логика ajax'а размазываласть мной по всему скрипту в каждой отдельной контроллине. А сейчас можно все это свести к довольно небольшому скрипту.

Если обратить внимание на обработку принятых данных, то можно заметить, что я расчитываю на json-формат данных, однако явно не заказываю его у jQuery. При ошибках скрипта или сервера сервер выводит информацию об ошибке прямо в поток, так что такой подход позволяет эту ошибку хоть как-то увидеть.

Функция debug просто помещает некий текст в скрытый элемент на экране, где его можно будет посмотреть средствами отладки броузера.

Функции win_alert, win_confirm, win_input - аналоги alert, confirm и prommpt, у меня реализованы через jQuery.UI.dialog, от этого необычный формат. Хотя для простоты можно описать их и так

Код


function win_confirm(par){
    if (confirm(par.txt)){
        if(typeof(par.yes)=='function')
            par.yes();
    }
}
function win_alert(par){
    alert(par.txt);
}
function win_input(par){
    var x = prompt(par.txt);
    if(typeof(par.yes)=='function')
        par.yes(x);

}

Это сообщение отредактировал(а) ksnk - 15.11.2010, 11:49

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

gcc

Дата 15.11.2010, 20:57 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: 1
Всего: 17

я вит писал расширенный конструктор создания антке с расщирением:

Код

    <script type="text/javascript" src="/dev/jquery-1.3.2.js"></script> 

<script type="text/javascript" src="/latest/jquery.json-2.2.js"></script>

<link rel="stylesheet" type="text/css" href="/latest/markitup/skins/markitup/style.css" />

<script type="text/javascript" src="/bbcode/set.js"></script>
<link rel="stylesheet" type="text/css" href="/bbcode/style.css" />


<style type="text/css">

#answers {
width:400px;
text-align: left;
    table-layout: fixed; 
   
}


#ans {
width:400px;
text-align: left;
    table-layout: fixed; 

    padding: 20px 12px 10px;
    z-index: 2;

   
}

#ans_su {
width:400px;
text-align: left;
    table-layout: fixed; 

    padding: 20px 12px 10px;
    z-index: 2;

   
}


.error_answers {
    font-weight: b;
    color: red;
}

.error_button {
    font-weight: b;
    color: red;
}

.error_q {
    font-weight: b;
    color: red;
}


</style>

 <script type='text/javascript'>
function myFunc(id_) {
  var tr = document.getElementById(id_).getElementsByTagName('tr');
  for (var i = 0, len = tr.length; i < len; i++) {
   if (i>0) {
    tr[i].className = (i%2) ? 'style1' : 'left_menu_black';
   }
  }
 //  for (var i = 0, len = tr.length; i < len; i++) tr[i].style.backgroundColor = (i % 3) ? '#E5E5E8' : '#66CCCC';
tr = '';
}



var array = [];

   
  $(".button").live("click", function(){
  
  $('*[class^=error_]').html("");
  
   $(".error_button").html("");
   
   if ($(".text_head").val().length < 1 || $(".text_head").val().length > 1000 ) {
   
           $(".error_button").html("Длинна должна быть от 1 до 1000 символов");
        return false;
            
   }
   
   if ( !$(".select_type").val() || $(".select_type").val() == '0' ) {
   
           $(".error_button").html("Выберите, пожалуйста, тип вопроса");
        return false;
            
   }
     
  
  
    var hash = {};
    
    hash =
{
        'q' : [],
        'name_answers' : $(".text_head").val(),
        'type_q' : $(".select_type").val(),
        'save_q' : '0',
        'id_gr' : $("#id_gr").html() 
        
}
         array.push(hash);

   //  array.length  
  
   //    $("#poles").html( $(".select_type").val() );    
  
   if ( $(".select_type").val() == 1 || $(".select_type").val() == 2  || $(".select_type").val() == 3 ) {
   
    $("#poles").html(" <tr><td colspan='3'>  </td></tr>    <tr><td colspan='3'> <br><br>    </td></tr>      <tr><td colspan='3'> <br><br><br><br> <span id='answers'></span> <br><br><br> <span class='error_answers'></span>  <br> <span class='list_foot'><b>Вопрос добавлен</b></span>, введите теперь вварианты для ответа: <br><br> <input class='text_answers' type='text' name='text_answers' value='' size='40'  />      <input type='hidden' class='number_answers' name='number_answers' value='"+array.length+"'>      <input type='hidden' class='type_answers' name='type_answers' value='"+ $(".select_type").val() +"'><br><input class='button_answers' type='submit' name='s' id='submit_btn' value='Добавить Ответ' />  <br><br><br><br>   <span class='list_foot'><b>Для сохрания всех данных в этом вопросе нажмите сохранить...</b></span>  <br><br> <input class='button_save' type='submit' name='s' value='СОХРАНИТЬ вопрос' /> <input class='reset_question' type='submit' name='s' id='submit_btn' value='Сбрость вопрос' />    <br> <div class='error_q'></div>   </td></tr>");  
   
       
  $(".text_answers").focus();
   
   } else if ( $(".select_type").val() == 10 ) {
   
    
   
   } else {
   
    $("#poles").html(" <tr><td colspan='3'>  </td></tr>    <tr><td colspan='3'> <br><br>    </td></tr>      <tr><td colspan='3'> <br><br><br><br> <span id='answers'></span> <br><br><br> <span class='error_answers'></span>   <br><br><br><br>   <span class='list_foot'><b>Для сохрания всех данных в этом вопросе нажмите сохранить...</b></span>  <br><br> <input class='button_save' type='submit' name='s' value='СОХРАНИТЬ вопрос' /> <input class='reset_question' type='submit' name='s' id='submit_btn' value='Сбрость вопрос' />    <br> <div class='error_q'></div>   </td></tr>");  
   
   }
  
  $(".button").hide();
  
  
  });


// end


$(".button_answers").live("click", function(){
  $('*[class^=error_]').html("");

   $(".error_answers").html("");
   $(".error_q").html("");
       
   if ($(".text_answers").val().length < 1 || $(".text_answers").val().length > 1000 ) {
   
           $(".error_answers").html("Длинна должна быть от 1 до 1000 символов");
        return false;
            
   }
   
 array[$(".number_answers").val() - 1]['q'].push($(".text_answers").val());

// array[0]['q'].push('1dfg22');
// var hash2 = array[0];
// array.length



var ler = array[$(".number_answers").val() - 1]['q'].length;
$("#answers").append(" <div id='ans-"+(ler-1)+"'><div style='width:400px;text-align: left;    table-layout: fixed;    padding: 20px 12px 10px;    z-index: 2;'> * "+ array[$(".number_answers").val() - 1]['q'][ler-1] +"  <a title='Удалить этот вариант ответа' class='delete_q' href='#idd_q="+(ler-1)+"'> <img src='/img/editdelete.png' border='0' /> </a>    </div></div> ");  

      

  $(".text_answers").val('');
  $(".text_answers").focus();
  
  });





$(".delete_q").live("click", function(){
  $('*[class^=error_]').html("");
 var id = this.hash.replace(/.*(?:idd_q=)(\d+).*/,'$1');

    // array[0]['q']

    $("#ans-"+id).html('');
  
  array[0]['q'][id] = '';
  
//    array[0]['q'].splice(id,1); 

 });



$(".button_save").live("click", function(){
  $('*[class^=error_]').html("");
    array[0]['save_q'] = 1;
    var arr = [];
    
    for (var i = 0, len = array[0]['q'].length; i < len; i++) {
    
     if ( array[0]['q'][i].length > 0 ){
     // var st = array[0]['q'][i];
         arr.push(array[0]['q'][i]);
     }
    
    }
    
       $(".error_q").html("");

if ( array[0]['type_q'] == 1 || array[0]['type_q'] == 2  || array[0]['type_q'] == 3 ) {
       
   if (arr.length < 1 || arr.length > 300) {

       $(".error_q").html("Ошибка, количество вариантов ответа не должно быть меньше 1 и больше 300");
        return false;
   
   }    
}

    
     array[0]['q'] = arr;
    array[0]['save_q'] = 1;    
    
        var formData = {
             "str":array[0]                                         
        };

    // $("#answers").html(" 11 ");
        
        $.ajax({
      type: "POST",
      url: "/groups/add_management_questioning/"+array[0]['id_gr'],
      data:'jsonData=' + encodeURIComponent( $.toJSON(formData) ),
      dataType: "json", 
      success: function(msg) {

  //    $("#poles").html(msg.r);
  //        return false;
        
    if (msg.success_ok > 0) {


         if ( array[0]['type_q'] == 1 || array[0]['type_q'] == 2  || array[0]['type_q'] == 3 ) {

   $("#suuses_all").append("  <span id='qu_fr-"+ msg.id_gr_qu +"'> <tr> <td  class='indent' align='left' colspan='3'>       <br>  <span class='uuses-"+ msg.id_gr_qu +"'></span>        </td>  </tr>  <tr> <td aling='left'> <table id='log_table' border='0'>    <tr><td colspan='3'><hr colspan='3' width='100%' size='4'/><hr colspan='3' width='100%' size='4'/>    </td>    </tr> <tr> <td>    <b>Вопрос:</b><br> <span class='type_answers-"+ msg.id_gr_qu +"'></span> (тип вопроса: <span class='type_answers_name-"+ msg.id_gr_qu +"'></span>) <br> <br></td>        <td aling='left'> <span class='answers-"+ msg.id_gr_qu +"'></span>  <a title='Редактировать этот вопрос' class='edit_answers' href='#idd="+ msg.id_gr_qu +"?id_type="+msg.type_q+"'> <img src='/img/modify.gif' border='0' /> </a>      <a title='Удалить этот Вопрос' class='del_answers' href='#idd="+ msg.id_gr_qu +"-id_type="+ msg.type_q +"'  onclick='return confirm ('Are you sure you want to delete this?\n ')' > <img src='/img/editdelete.png' border='0' /> </a>   <br> <span class='error_answers-"+ msg.id_gr_qu +"'></span> <br>  <br> <br>   </td></tr>  </table>   </td></tr>    <tr> <td> </td>  <td>    <b>Варианты ответа:</b <br><br><br><span id='ans_su-"+ msg.id_gr_qu +"'></span>  <br> <br> <span class='add_ans-"+ msg.id_gr_qu +"'><a title='Добавить еще однн ответ' class='add_answers' href='#idd="+ msg.id_gr_qu +"-id_type="+ msg.type_q +"'> <img src='/img/create.png' border='0' /> Добавить еще ответ</a>  </span>    <br><br><br><br>   </td></tr> </span> ");
    
    } else {
    
   $("#suuses_all").append("  <span id='qu_fr-"+ msg.id_gr_qu +"'> <tr> <td  class='indent' align='left' colspan='3'>       <br>  <span class='uuses-"+ msg.id_gr_qu +"'></span>        </td>  </tr>  <tr> <td aling='left'> <table id='log_table' border='0'>  <tr><td colspan='3'><hr colspan='3' width='100%' size='4'/><hr colspan='3' width='100%' size='4'/></td></tr>    <tr> <td>    <b>Вопрос:</b><br> <span class='type_answers-"+ msg.id_gr_qu +"'></span> (тип вопроса: <span class='type_answers_name-"+ msg.id_gr_qu +"'></span>) <br> <br></td>        <td aling='left'> <span class='answers-"+ msg.id_gr_qu +"'></span>  <a title='Редактировать этот вопрос' class='edit_answers' href='#idd="+ msg.id_gr_qu +"?id_type="+msg.type_q+"'> <img src='/img/modify.gif' border='0' /> </a>      <a title='Удалить этот Вопрос' class='del_answers' href='#idd="+ msg.id_gr_qu +"-id_type="+ msg.type_q +"'  onclick='return confirm ('Are you sure you want to delete this?\n ')' > <img src='/img/editdelete.png' border='0' /> </a>   <br> <span class='error_answers-"+ msg.id_gr_qu +"'></span> <br>  <br> <br>   </td></tr>  </table>   </td></tr> </span> ");    
    
    
    }
    
    
  $(".answers-"+msg.id_gr_qu ).html(msg.name_answers);



     if ( $(".select_type").val() == 1  ) {
     
  $(".type_answers_name-"+msg.id_gr_qu ).html("<span class='list_foot'>выбрать один вариант</span>");
  
    
   } else if ( $(".select_type").val() == 2 ) {

  $(".type_answers_name-"+msg.id_gr_qu ).html("<span class='list_foot'>Выбрать несколько вариантов (поставить галочки)</span>");
   
   } else if ( $(".select_type").val() == 3 ) {

  $(".type_answers_name-"+msg.id_gr_qu ).html("<span class='list_foot'>выбрать из списка</span>");
   
   } else if ( $(".select_type").val() == 4 ) {

  $(".type_answers_name-"+msg.id_gr_qu ).html("<span class='list_foot'>Написать свой вариант</span>");
   
   } else if ( $(".select_type").val() == 5 ) {

  $(".type_answers_name-"+msg.id_gr_qu ).html("<span class='list_foot'>Написать ссылку на фото и т.д</span>");
   
   } else if ( $(".select_type").val() == 6 ) {

  $(".type_answers_name-"+msg.id_gr_qu ).html("<span class='list_foot'>вветить несколь раз на вопросы...</span>");
   
   } 
  
  

            
              
  
     if ( $(".select_type").val() == 1 || $(".select_type").val() == 2  || $(".select_type").val() == 3 ) {
     
        for (var i = 0, len = msg['q'].length; i < len; i++) {
        
            //    $(".ans_su-"+ msg.id_gr_qu).append(msg['q'][i]); 
            
   var info_asw = msg.id_gr_qu+"-"+msg['id_array'][i];
             
        $("#ans_su-"+ msg.id_gr_qu ).append(" <div id='ans-"+info_asw+"'> <br><br> * <img src='http://www.iconsearch.ru/uploads/icons/fugue/16x16/tick_circle.png' border='0'> "+ msg['q'][i] +"  <a title='Удалить этот вариант ответа' class='delete_qu' href='#idd_q="+ msg.id_gr_qu +"?idd_ans="+ msg['id_array'][i] +"?id_type="+msg.type_q+"'> <img src='/img/editdelete.png' border='0' /> </a>  <br> <span class='error_ans-"+info_asw+"'></span> <br>     </div> ");  
       
         }
         
     }

 //    $("#poles").html(msg.r);

      $("#poles").html(msg.r);

   
   
  // ok add and old deleted:   

    array = [];
    $("#poles").html("");
   $("#answers").html("");
   $(".button").show();
   $(".select_type").val('0');
   
    var count_gr = $("#count").html();
    $("#count").html(count_gr*1 + 1); 
   
    } else {
    // error
    
  //       $("#poles").html(msg.r);





      
             
       for (var i = 0, len = msg.error_mes.length; i < len; i++) {

        



    if ( msg.error_mes[i] == 'type_qu') {       
         $('.error_q').html($('.error_q').html()+ " <div> <b>Ошибка, тип вопроса не верный! </b> </div> ");
      }


    if ( msg.error_mes[i] == 'name_qu_length') {       
         $('.error_q').html($('.error_q').html()+ " <div> <b>Ошибка, длинна названия вопроса не верна!</b> </div> ");
      }
      
    if ( msg.error_mes[i] == 'no_array') {       
         $('.error_q').html($('.error_q').html()+ " <div> <b>Ошибка, ответы не введены, минимум должен быть оин вариант ответа!</b> </div> ");
      }      


    if ( msg.error_mes[i] == 'id_gr') {       
         $('.error_q').html($('.error_q').html()+ " <div> <b> Ошибка, группа не извеная (попробуйте обновить страницу)! </b> </div> ");
      } 
      
    if ( msg.error_mes[i] == 'error_data') {       
         $('.error_q').html($('.error_q').html()+ " <div> <b> Ошибка, в передаваемых данных фатальная ошибка! </b> </div> ");
      }       
      
      

      if ( msg.error_mes[i] == 'error_question_count_limit') {       
         $('.error_q').html($('.error_q').html()+ " <div> <b> Ошибка, время для редактирования вышло, редактировать не возможно, можете создать новую группу! </b> </div> ");
      }       
      
        if ( msg.error_mes[i] == 'no_edit_group') {       
         $('.error_q').html($('.error_q').html()+ " <div> <b> Ошибка, В каждой группе должно быть не более чем 30 вопросов! </b> </div> ");
      }       
          

      
          
    }


   

       
    }

     }
   
   });
   
 });




$(".reset_question").live("click", function(){
 
  $('*[class^=error_]').html(""); 
 
    array = [];

        $("#poles").html("");
        
   $("#answers").html("");
 
   $(".button").show();

 $(".select_type").val('0');
  
});





$(".edit_answers").live("click", function(){

  $('*[class^=error_]').html("");

 var id = this.hash.replace(/.*(?:idd=)(\d+).*/,'$1');
var type = this.hash.replace(/.*(?:id_type=)(\d+).*/,'$1');



    // array[0]['q']

  // $(".answers-"+id).html("");

    if ($(".text_answers-"+id).val()) {     
    $(".answers-"+id).html(" <br> <input class='text_answers-"+id+"' type='text' name='text_answers-"+id+"' value='"+$(".text_answers-"+id).val()+"' size='40'  />  <img src='http://www.iconsearch.ru/uploads/icons/gnomeicontheme/16x16/stock_mail-flag-for-followup-done.png' border='0'> <a title='22Удалить этот вариант ответа' class='edit_answers_off' href='#idd="+id+"?id_type="+type+"'><b>Изменить</b></a> ");
  
  } else {
  
    $(".answers-"+id).html(" <br> <input class='text_answers-"+id+"' type='text' name='text_answers-"+id+"' value='"+$(".answers-"+id).html()+"' size='40'  />  <img src='http://www.iconsearch.ru/uploads/icons/gnomeicontheme/16x16/stock_mail-flag-for-followup-done.png' border='0'> <a title='Удалить этот вариант ответа' class='edit_answers_off' href='#idd="+id+"?id_type="+type+"'><b>Изменить</b></a> ");
     
   }
  
  
  
 // array[0]['q'][id] = '';
  
//    array[0]['q'].splice(id,1); 



 });






$(".edit_answers_off").live("click", function(){

  $('*[class^=error_]').html("");

 var id = this.hash.replace(/.*(?:idd=)(\d+).*/,'$1');

var type = this.hash.replace(/.*(?:id_type=)(\d+).*/,'$1');

 $(".error_answers-"+id).html("");

    // array[0]['q']

    // $(".answers-"+id).html(" <br> <input class='text_answers-"+id+"' type='text' name='text_answers' value='"+ $(".answers-"+id).html() +"' size='40'  />  <img src='http://www.iconsearch.ru/uploads/icons/gnomeicontheme/16x16/stock_mail-flag-for-followup-done.png' border='0'> <a title='Удалить этот вариант ответа' class='edit_answers_off' href='#idd="+id+"'><b>Изменить</b></a> ");
//    $(".answers-"+id).append(" <br> <input class='text_answers-"+id+"' type='text' name='text_answers' value='"+ $(".answers-"+id).html() +"' size='40'  />  <img src='http://www.iconsearch.ru/uploads/icons/gnomeicontheme/16x16/stock_mail-flag-for-followup-done.png' border='0'> <a title='Удалить этот вариант ответа' class='edit_answers_off' href='#idd="+id+"'><b>Изменить</b></a> ");

  if ($(".text_answers-"+id).val().length < 1 || $(".text_answers-"+id).val().length > 1000) {
      
   $(".error_answers-"+id).html(" <span style='font-weight: b; color: red;'>Ошибка, длинна должна быть от 1 до 1000 сомволов!</span> ");
  return false;
  
    }
  
  
// $.getJSON("/groups/edit_question/"+id+"/"+type, function(msg) {   

        var formData = {
             "name_qu":$(".text_answers-"+id).val()                                         
        };

    // $("#answers").html(" 11 ");
        
        $.ajax({
      type: "POST",
      url: "/groups/edit_question/"+id+"/"+type,
      data:'jsonData=' + encodeURIComponent( $.toJSON(formData) ),
      dataType: "json", 
      success: function(msg) {

    if (msg.success_ok > 0) {

         $(".answers-"+id).html( $(".text_answers-"+id).val() );  
  
  } else {


       for (var i = 0, len = msg.error_mes.length; i < len; i++) {

       if ( msg.error_mes[i] == 'error_data') {       
   $(".error_answers-"+id).html(" <span style='font-weight: b; color: red;'>Ошибка передаваемых данных!</span> ");
      }
      
     if ( msg.error_mes[i] == 'error_qu') {       
   $(".error_answers-"+id).html(" <span style='font-weight: b; color: red;'>Ошибка доступа!</span> ");
      }
      
        if ( msg.error_mes[i] == 'error_question_count_limit') {       
   $(".error_answers-"+id).html(" <span style='font-weight: b; color: red;'>Ошибка, время для редактирования вышло, редактировать не возможно, можете создать новую группу!</span> ");
      }
         
      
      
         }
  
  }
      }
      
      

 // array[0]['q'][id] = '';
  
//    array[0]['q'].splice(id,1); 

 });

 });
 
 
 
 
 
$(".del_answers").live("click", function(){

  $('*[class^=error_]').html("");

 var id = this.hash.replace(/.*(?:idd=)(\d+).*/,'$1');

 var id_type = this.hash.replace(/.*(?:id_type=)(\d+).*/,'$1'); 

   $.getJSON("/groups/delete_answers_qu/"+id+"/"+id_type, function(msg) { 


    if (msg.success_ok > 0) {
        $("#qu_fr-"+id).html("");
   
   // number -1        
    var count_gr = $("#count").html();
    $("#count").html(count_gr*1 - 1); 
           
        
      } else {
      
      
      
      
       for (var i = 0, len = msg.error_mes.length; i < len; i++) {

        





    if ( msg.error_mes[i] == 'error_qu') {       
         $(".error_answers-"+id).html($(".error_answers-"+id).html()+ " <div style='color: red;'>Ошибка, доступа к группе или ошибка передачи данных!</div> ");
      }
      

    if ( msg.error_mes[i] == 'error_data') {       
         $(".error_answers-"+id).html($(".error_answers-"+id).html()+ " <div style='color: red;'>Ошибка, в передаваемых данных фатальная ошибка!</div> ");
      }       
     
             
     if ( msg.error_mes[i] == 'error_question_count_limit') {       
         $(".error_answers-"+id).html($(".error_answers-"+id).html()+ " <div style='color: red;'>Ошибка, время для редактирования вышло, редактировать не возможно, можете создать новую группу!</div> ");
      }   
                

    }      
      
      
      
      
      }


    });
 
 

 });
 
 
 
 
 
 
 
 


$(".delete_qu").live("click", function(){

  $('*[class^=error_]').html("");
 
 var id_q = this.hash.replace(/.*(?:idd_q=)(\d+).*/,'$1');

 var id_ans = this.hash.replace(/.*(?:idd_ans=)(\d+).*/,'$1');

 var id_type = this.hash.replace(/.*(?:id_type=)(\d+).*/,'$1'); 

 // $("#ans-"+id_q+"-"+id_ans).html("");   

   $.getJSON("/groups/edit_answer/"+id_q+"/"+id_ans+"/"+id_type, function(msg) { 

 
    if (msg.success_ok > 0) {

  $("#ans-"+id_q+"-"+id_ans).html("");   
  
  } else {


       for (var i = 0, len = msg.error_mes.length; i < len; i++) {

       if ( msg.error_mes[i] == 'error_data') {       
   $(".error_ans-"+ id_q +"-"+ id_ans ).html(" <span style='font-weight: b; color: red;'>Ошибка, передаваемых данных!</span> ");
      }
      
     if ( msg.error_mes[i] == 'error_qu') {       
   $(".error_ans-"+ id_q +"-"+ id_ans ).html(" <span style='font-weight: b; color: red;'>Ошибка, доступа!</span> ");
      }
    
     if ( msg.error_mes[i] == 'error_min_max_gr_qu_answer') {       
   $(".error_ans-"+ id_q +"-"+ id_ans ).html(" <span style='font-weight: b; color: red;'>Ошибка, вариантов ответа должно быть строго от 1 до 300 штук!</span> ");
      }    

      if ( msg.error_mes[i] == 'error_question_count_limit') {       
   $(".error_ans-"+ id_q +"-"+ id_ans ).html(" <span style='font-weight: b; color: red;'>Ошибка, время для редактирования вышло, редактировать не возможно, можете создать новую группу!</span> ");
      }       
        
    }
 
 }
 
  });
 
});

Это сообщение отредактировал(а) gcc - 15.11.2010, 21:11

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

gcc

Дата 15.11.2010, 21:14 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: 1
Всего: 17

продолжение:
(это только часть, еще много есть и не доделанное еще smile

)

Код



$(".add_answers").live("click", function(){

  $('*[class^=error_]').html("");
 
 var id_q = this.hash.replace(/.*(?:idd=)(\d+).*/,'$1');
 
 var id_type = this.hash.replace(/.*(?:id_type=)(\d+).*/,'$1'); 
 
 
//   <br> <input class='text_answers-"+id+"' type='text' name='text_answers' value='' size='40'  /> <br>  <span class='add_ans-"+ msg.id_gr_qu +"'><a title='Добавить еще однн ответ' class='add_answers' href='#idd="+ msg.id_gr_qu +"-id_type="+ msg.type_q +"'>


    $(".add_ans-"+id_q).html(" <br>Введите новый вариант для ответа на этот вопрос:<br> <input class='text_answers-"+id_q+"-"+id_type+"' type='text' name='text_answers' value='' size='40' /> <br> <br> <a title='Добавить ответ' class='add_answers_off' href='#idd="+ id_q +"-id_type="+ id_type +"'> <img src='/img/create.png' border='0' /> Добавить ответ</a> <br> <span class='error_add_ans-"+ id_q +"-"+ id_type +"'></span> <br>  ");  

    $(".text_answers-"+ id_q +"-"+ id_type).val(''); 
    $(".text_answers-"+ id_q +"-"+ id_type).focus();
 
});






$(".add_answers_off").live("click", function(){

  $('*[class^=error_]').html("");
 
 var id_q = this.hash.replace(/.*(?:idd=)(\d+).*/,'$1');
 var id_type = this.hash.replace(/.*(?:id_type=)(\d+).*/,'$1'); 
 
 
 
     $(".error_add_ans-"+ id_q +"-"+ id_type).html("");  
 
   if ($(".text_answers-"+ id_q +"-"+ id_type).val().length < 1 || $(".text_answers-"+ id_q +"-"+ id_type).val().length > 1000 ) {

         $(".error_add_ans-"+ id_q +"-"+ id_type ).html("<span style='font-weight: b; color: red;'>Длинна должна быть от 1 до 1000 символов!</span> ");
            return false;
                        
   }
   
   
    
// span class='add_ans-"+ msg.id_gr_qu +"'><a title='Добавить еще однн ответ' class='add_answers' href='#idd="+ msg.id_gr_qu +"-id_type="+ msg.type_q +"'>

 // $.getJSON("/groups/add_answer/"+id_q+"/"+id_ans+"/"+id_type, function(msg) {
 
       var formData = {
             "name_pr":$(".text_answers-"+ id_q +"-"+ id_type).val()                               
        };
        
        $.ajax({
      type: "POST",
      url: "/groups/add_answer/"+id_q+"/"+id_type,
      data:'jsonData=' + encodeURIComponent( $.toJSON(formData) ),
      dataType: "json", 
      success: function(msg) { 

 
    if (msg.success_ok > 0) {

     //    $(".answers-"+id_q).html( $(".text_answers-"+id).val() );  

    // $("#ans-"+id_q+"-"+id_ans).html("");   
  
 

   // add to answer   
            var info_asw = id_q+"-"+msg.last_id;
   
    $("#ans_su-"+ id_q ).append(" <div id='ans-"+info_asw+"'> <br><br> * <img src='http://www.iconsearch.ru/uploads/icons/fugue/16x16/tick_circle.png' border='0'> "+ $(".text_answers-"+ id_q +"-"+ id_type).val() +"  <a title='Удалить этот вариант ответа' class='delete_qu' href='#idd_q="+ id_q +"?idd_ans="+ msg.last_id +"?id_type="+ id_type +"'> <img src='/img/editdelete.png' border='0' /> </a>  <br> <span class='error_ans-"+info_asw+"'></span> <br>     </div> ");  


    // $("#ans_su-"+id_q ).append(" <br><br> *df gdf  <br><br> ");


    $(".add_ans-"+id_q).html(" <a title='Добавить еще однн ответ' class='add_answers' href='#idd="+ id_q +"-id_type="+ id_type +"'> <img src='/img/create.png' border='0' /> Добавить еще ответ</a> ");    
  
  
  } else {


       for (var i = 0, len = msg.error_mes.length; i < len; i++) {

       if ( msg.error_mes[i] == 'error_data') {       
   $(".error_add_ans-"+ id_q +"-"+ id_type ).html(" <span style='font-weight: b; color: red;'>Ошибка, передаваемых данных!</span> ");
      }
      
     if ( msg.error_mes[i] == 'error_qu') {       
   $(".error_add_ans-"+ id_q +"-"+ id_type  ).html(" <span style='font-weight: b; color: red;'>Ошибка, доступа!</span> ");
      }
    
     if ( msg.error_mes[i] == 'error_min_max_gr_qu_answer') {       
   $(".error_add_ans-"+ id_q +"-"+ id_type  ).html(" <span style='font-weight: b; color: red;'>Ошибка, вариантов ответа должно быть строго от 1 до 300 штук!</span> ");
      }    
    
      if ( msg.error_mes[i] == 'error_question_count_limit') {       
   $(".error_add_ans-"+ id_q +"-"+ id_type  ).html(" <span style='font-weight: b; color: red;'>Ошибка, время для редактирования вышло, редактировать не возможно, можете создать новую группу!</span> ");
      } 
      
    
    
    
    }
 
 }
 }
 
 
  });
 
});









function times(id,type)
{

   $(document).ready(function() {
   

     if ( type == 1  ) {
     
  $(".type_answers_name-"+id ).html("<span class='list_foot'>выбрать один вариант</span>");
  
    
   } else if ( type == 2 ) {

  $(".type_answers_name-"+id ).html("<span class='list_foot'>Выбрать несколько вариантов (поставить галочки)</span>");
   
   } else if ( type == 3 ) {

  $(".type_answers_name-"+id ).html("<span class='list_foot'>выбрать из списка</span>");
   
   } else if ( type == 4 ) {

  $(".type_answers_name-"+id ).html("<span class='list_foot'>Написать свой вариант</span>");
   
   } else if ( type == 5 ) {

  $(".type_answers_name-"+id ).html("<span class='list_foot'>Написать ссылку на фото и т.д</span>");
   
   } else if ( type == 6 ) {

  $(".type_answers_name-"+id ).html("<span class='list_foot'>ввесить несколь раз на вопросы...</span>");
   
   } 

 if ( type == 5 || type == 4 ) { 
   $(".add_ans-"+id ).html("");
   $("#ans_su-"+id ).html("");
}


});

}
  

</script>

<style type="text/css">
.style1 {background-color: #E5E5E8;}
</style>







    
</head>
<body>
<table class="main">
    <tr>
        <th colspan="3">


<TMPL_INCLUDE NAME="head.tmpl">

Это сообщение отредактировал(а) gcc - 15.11.2010, 21:14

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

ksnk

Дата 16.11.2010, 00:53 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

gcc, согласись, что ~1000 строк текста, еще и "недоделанного" - немного много для понимания smile

На пальцах там можно идею пояснить?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

gcc

Дата 16.11.2010, 01:39 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: 1
Всего: 17

ksnk, сори, я первый пост не дочитал, мне показалось что ты спрашиваешь про то, кто как делал там где много разных кнопочек... ну и я решил показать как я делал...

Это сообщение отредактировал(а) gcc - 16.11.2010, 02:02

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »