jScrollPane jEditable проблемы DOM - PullRequest
Новая
       8

jScrollPane jEditable проблемы DOM

1 голос
/ 28 апреля 2010

У меня странная проблема.

Вот мой код. Я запускаю getJSON (), чтобы получить информацию из PHP, которая извлекается из БД, и я заполняю div результатом. У меня есть jScrollPane и jEditable, поэтому пользователь может прокрутить вниз и щелкнуть, чтобы редактировать любой контент. Иногда это работает, а потом не работает, что заставляет меня задаться вопросом, неправильно ли интерпретирует код браузер, или я неправильно понимаю фундаментальные концепции DOM ... 

$().ready(function() {
    $('#pane1').jScrollPane();
    $('#tab_journal').tabs();

    $('#tab2').load("/journal_new.php");

    var i=0;
    var row = '';
    var k, v, dt;

    $.getJSON("/ajax.php?j=22", function(data) {
        row = '<p>';
        while(i<data.length) {
            $.each(data[i], function(k, v) {
                if (k == 'subject') {
                    row += '<div style="font-size:1.5em; color:#000000;"><div class="editable" style="width:705px;" id="title-'+data[i].id+'">'+v+'</div></div>posted: '+dt+'<br />';
                } else if (k == 'dt') {
                    dt = v;
                } else if (k == 'msg') {
                    row += '<div class="editableMsg" style="width:705px; height:40px;" id="msg-'+data[i].id+'">'+v+'</div></p>';
                }
            });
            i++;
        }
        $('#pane1').append(row).jScrollPane({scrollbarWidth:10, scrollbarMargin:10, showArrows:true});
    });

    $('.editable').livequery(function () {
        $('.editable').editable("/savejournal.php", {
            submitdata : function() {
            },
            tooltip   : 'Click to edit',
            indicator : '<img src="/UI/images/indicator.gif">',
            cancel    : 'Cancel',
            submit    : 'OK'
        });
        $('.editableMsg').editable("/savejournal.php", {
            submitdata : function() {
            },
            tooltip: 'Click to edit',
            indicator : '<img src="/UI/images/indicator.gif">',
            cancel    : 'Cancel',
            submit    : 'OK',
            type      : 'textarea'
        });
        $(".editable,.editableMsg").mouseover(function() { $(this).css('background-color', '#FDD017'); });
        $(".editable,.editableMsg").mouseout(function() { $(this).css('background-color', '#fff'); });
    });
});

А потом HTML: 

<div id="tab_container" style="margin:0px 0px 2px 8px;">
    <ul id="tab_journal">
        <li><a href="#tab1"><span>View / Edit</span></a></li>
        <li><a href="#tab2"><span>New Entry</span></a></li>
    </ul>
</div>
<div id="tab1" style="margin:0px 0px 0px 8px;">
    <div id="pane1" class="scroll-pane super-wide"></div>
</div>
<div id="tab2" style="margin:0px 0px 0px 8px; width:700px;"></div>

Спасибо, мир.

1 Ответ

0 голосов
/ 29 апреля 2010

не смогли сломаться. Кажется, что строка кода: 

$('#tab2').load("/journal_new.php");

не делал браузер счастливым.

...