jScrollPane jEditable DOM problems

Question

Hello world,

I am having a funky problem. See (this link won't disappear): www.skitzo.org/~el/bugjeditable.png for the firebug output screenshot.

Here's my code. I run getJSON() to fetch the info from the PHP which pulls from DB and I fill a div with the result. I have jScrollPane and jEditable so a user can scroll down and click to edit any of the content. It works sometimes and then it doesn't work which makes me wonder if the browser is not interpreting the code properly or if I am misunderstanding fundamental DOM concepts here....

$().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'); });
    });
});

And then the 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>

Thanks world.

Answer 1

Have been unable to break. Seems that the line of code:

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

was not making the browser happy.