Получить родительский класс текущего ввода - JEditable / JQuery / Javascript - PullRequest
Новая
       11

Получить родительский класс текущего ввода - JEditable / JQuery / Javascript

0 голосов
/ 25 марта 2011

Я пытаюсь получить класс родительского элемента в настоящее время сфокусированного ввода.Все входы имеют класс .edit (который связывает JEditable).Родительский класс сообщает, какой контроллер, поле и идентификатор используются в обновлении базы данных (я использую Codeigniter с JQuery Ajax).

Вот мой текущий код: 

var basepath;

 $(document).ready(function() {
    basepath = "/mm/";
    jedit();
});

function jedit() {
    $('#container').live({
    click: function() {

        $('.edit').focus(function() {
          var attributes    = $(this).closest('tr').attr('class');
        });

        var splitResult = attributes.split("-");
        var controller  = splitResult[0];
        var field       = splitResult[1];
        var id          = splitResult[2];

        $('.edit').editable(basepath+controller+'/edit/'+field+'/'+id,{
        indicator:'<img src="'+basepath+'images/throbber.gif">'
        });

        }
    });
}

В настоящее время я получаюattributes is not defined в консоли Firebug.Я думаю, это потому, что до тех пор, пока не будет нажат текст для редактирования, ввод не существует (поэтому нет фокуса).Я пробовал if else в соответствии с: 

if($('.edit input').length != 0) {
  var attributes    = $('.edit').closest('tr').attr('class');
} else {
  var attributes    = 'some nul thing here';  
}

Но это всегда всегда оценивается как ложное.

Любые идеи или предложения о том, как получить родительский класс активного.edit класс, будет высоко ценится.

Спасибо!

Ответы [ 3 ]

2 голосов
/ 25 марта 2011

Проблема в том, что вы объявляете attributes внутри этого .focus() обработчика только (поэтому он не будет доступен в более высоком click объеме.

Вместо этого он должен быть определен в области, которую вы хотите использовать, установить в обработчике событий, например так: 

var attributes;
$('.edit').focus(function() {
   attributes = $(this).closest('tr').attr('class');
});

Однако в вашем случаевы захотите использовать эти данные , когда произойдет фокусировка , в целом выглядит так: 

function jedit() {
    $('#container').delegate('.edit', 'focus', function() {  
       var result = $(this).closest('tr').attr('class').split("-"),
           controller  = result[0],
           field       = result[1],
           id          = result[2];
       $(this).editable(basepath+controller+'/edit/'+field+'/'+id,{
           indicator:'<img src="'+basepath+'images/throbber.gif">'
       });
    });
}

Кроме того, в качестве отступления, если class не используется для другие причины, например стилизация ... рассмотрите возможность использования атрибута data- специально для данных, а не браузера, пытающегося найти / применить класс CSS здесь.

2 голосов
/ 25 марта 2011

Это работает для меня, вы ищете что-то другое? 

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
</script>

</head>
<body>

<form class="pelement">
    <input type="text" class="editable" value="some value here" />
</form>


<script language="javascript">
    $('.editable').focus(function(){
        console.log("parent: %s", $(this).parent().attr('class'));
    });
</script>
</body>
</html>
1 голос
/ 25 марта 2011

Нажатие на #container украдет фокус с любого ранее сфокусированного ввода, поэтому вам придется каким-то образом сохранить последний фокус на .edit вводе: 

var basepath, lastFocus;

$(document).ready(function() {
    $(".edit").focus(function(){ lastFocus = $(this); });

    basepath = "/mm/";
    jedit();
});


function jedit() {
    $('#container').live({
    click: function() {
        /* EDIT: In case lastFocus is null: */

       if(lastFocus == null) return;

        var attributes = lastFocus.closest('tr').attr('class');

        var splitResult = attributes.split("-");
        var controller  = splitResult[0];
        var field       = splitResult[1];
        var id          = splitResult[2];

        $('.edit').editable(basepath+controller+'/edit/'+field+'/'+id,{
            indicator:'<img src="'+basepath+'images/throbber.gif">'
        });

        }
    });
}
...