Редактирование профиля в стиле Facebook с использованием jQuery

Question

Я пытаюсь создать несколько текстовых полей для редактирования в стиле Facebook, но это не работает.

 var inputId = '';
 var that = '';
 var data = '';
 $(".text_wrapper").live('click', function() {
    that = this;
    data=$(this).html();    
    inputId = '#'+$(this).next().attr("id");
    $(inputId).val(data);
    $(inputId).show();
    $(that).hide();
    $(inputId).focus();
 });

 $(inputId).live("mouseover", function(e){
    $(inputId).hide();$(that).show();
 });

 $(inputId).change(function() {
    $(inputId).hide();
    var boxval = $(inputId).val();
    var dataString = 'data='+ boxval;
    $.ajax({
      type: "POST",
      url: "test.php",
      data: dataString,
      cache: false,
      success: function(html) {
        $(that).html(boxval);
        $(that).show();
      }
    });
 });

Здесь идет HTML

    <div class="text_wrapper">1245</div><input id="3123" name="timeout" type="text" 
class="edit" size="20" value="" />

    <div class="text_wrapper">98745</div><input id="3122" name="timeout" type="text" 
class="edit" size="20" value="" />

Заранее спасибо ..

Answer 1

 <div>
 <div class="text_wrapper">1245</div>
 <input id="3123" name="timeout" type="text" class="edit" size="20" value="" />
 <div>

 <div>
 <div class="text_wrapper">98745</div>
 <input id="3122" name="timeout" type="text" class="edit" size="20" value="" />
 </div>




   jQuery(function(){

       //stpe 1
      jQuery('.text_wrapper').bind('mouseover',function(e){
             var elm = $(e.target);
             elm.hide();                     
            elm.parents('div:first')
           .find('input[type=text]').val(elm.html()).show()focus();              
       });

     //step 2
     //you should use 'blur' here rather than 'mouseover'
     // i have chosen mouseover as u have specified this in ur codes
      $('.edit').live("mouseover", function(e){
          var elm=$(e.target);
          elm.hide();
         elm.parents('div:first').find('.text_wrapper')
         .html(elm.val()).show();
       });

    //step 3
    // i dont think 'change' is good option, choose some other
    $('.edit').bind('change',function (e) {
        var elm = $(e.target);
        elm.hide();
        var boxval = elm.val();
        var dataString = 'data=' + boxval;
        $.ajax({
            type: "POST",
            url: "test.php",
            data: dataString,
            cache: false,
            success: function (html) {
                $(that).html(boxval);
                $(that).show();
            }
        });
    });


   });

Answer 2

Одна очень очевидная проблема, которую я вижу с кодом, состоит в том, что inputId установлен в обработчике для нажатия на div.Вы не можете использовать эту переменную для отслеживания кликов.Почему бы вам не связать события с полями ввода класса редактирования?На самом деле, я понятия не имею, почему вы отслеживаете эти входные идентификаторы в этом фрагменте кода.

Answer 3

Мой лучший отступ показывает, по крайней мере, одну проблему ... попробуйте это:

 $(".text_wrapper").live('click', function() {
    that = this;
    data=$(this).html();    
    inputId = '#'+$(this).next().attr("id");
    $(inputId).val(data);
    $(inputId).show();
    $(that).hide();
    $(inputId).focus();

    $(inputId).live("mouseover", function(e){
      $(inputId).hide();$(that).show();
    });

    $(inputId).change(function() {
      $(inputId).hide();
      var boxval = $(inputId).val();
      var dataString = 'data='+ boxval;
      $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        cache: false,
        success: function(html) {
          $(that).html(boxval);
          $(that).show();
        }
      });
   });

 });

Примечание: это все еще имеет серьезные проблемы ... при каждом клике вы добавляете обработчики событий ... они должныбыть очищенным, прежде чем устанавливать их (по крайней мере).Или не добавляйте обработчики в событие click.