Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Edit in place problem

[es] :: Javascript i AJAX :: Edit in place problem

[ Pregleda: 1348 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

Valerij Zajcev

Član broj: 40886
Poruke: 1374
*.dynamic.sbb.rs.



+2 Profil

icon Edit in place problem12.11.2011. u 17:09 - pre 150 meseci
Pokusavam da napravim edit in place u listi item-a. Problem je sto se ne bavim pretarno javascript-om i jquery-em i ponekad ne znam sta radim :)
Dakle imam listu komentara i sa klkom na link taj komentar postaje editable. Problem je sto kada imam recimo 4 komentara i kliknem na edit prikazu mi se 4 edit komentara.
Sta radim pogresno?
Code:
$('#editButton').live('click', function (e) {
        e.preventDefault();

        var container = $(this).closest('.commentWrap');
        var itemId = container.attr('id');

        var nestId = '#' + itemId;

        var txt = $('#commentTextValue').text();

        $(nestId + ' #commentTextValue').remove();
        $(nestId + ' #editButton').remove();
        $(nestId).prepend('<textarea id="editArea">' + txt + '</textarea>');
        $(nestId).append('<input type="submit" value="Ok" class="btnOk" />');
    })


    $('.btnOk').live('click', function (e) {
        e.preventDefault();
        var container = $(this).closest('.commentWrap');
        var itemId = container.attr('id');
        var text = container.find('textarea').val();

        var nestId = '#' + itemId;
        //alert(nestId);

        $.ajax({
            url: '/Comment/SaveComment',
            data: JSON.stringify({ CommentText: text, CommentId: itemId }),
            type: 'post',
            contentType: 'application/json',
            success: function (data) {
                if (data.success === true) {

                    $(nestId + ' #editArea').remove();
                    $(nestId + ' .btnOk').remove();
                    $(nestId).append('<h3 id="commentTextValue">' + data.message + '</h3>');
                    $(nestId).append('<a id="editButton" href="#">Edit</a>');

                }
            }
        });

    });


</script>

    <div style="border: 1px solid #dddddd;">
        @Html.ActionLink(@Model.Author, "SomeAction")
        <div class="commentWrap" id="@Model.CommentId">
            <p id="commentTextValue">@Model.CommentText</p>
            <a id="editButton" href="#">Edit</a>
        </div>
    </div>
 
Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-4.sezampro.rs.



+33 Profil

icon Re: Edit in place problem13.11.2011. u 09:25 - pre 150 meseci
Kao prvo, nelogično je da to "editButton" bude id atribut, jer će ih naravno biti više, tj. postojaće taj edit link za svaki komentar. Isto važi i za "commentTextValue". Šta više, taj "p" element uopšte i ne mora da markiraš nekom klasom, kako bi ga posle pronašao nekim jQuery selektorom, jer sve možeš da "dohvataš" relativno u odnosu na taj edit link. Tako bi npr. u tom callback-u za click event na taj edit link, comment wrapper imao preko var $wrapper = $(this).parent('div.commentWrap');, a taj paragraf u kojem je komentar preko: var $comment = $(this).prev('p');.

btw Razmisli i o rešenju da edit-ovanje radiš na dblclick na tekst komentara, a submit-ovanje na change event tog tekstualnog polja, jer tada ne bi bilo potrebe za tim linkovima, dugmadima, itd.
 
Odgovor na temu

Valerij Zajcev

Član broj: 40886
Poruke: 1374
*.dynamic.sbb.rs.



+2 Profil

icon Re: Edit in place problem13.11.2011. u 10:51 - pre 150 meseci
Promenio sam edit link da umesto id-a koristi class. Ali problem i dalje ostaje. Ali pazi ovo. Kada u html direktno upisem div-ove koji predstavljaju komentar sa svim podacima kao da sam ih dinamicki dodao. Onda radi kliknem na edit i dobijem tavno sto mi treba. Ali kada dinamicki dodam funkcija mi se izvrsi onoliko puta koliko imam komentara. Potpuno uvrnut problem :(
 
Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-4.sezampro.rs.



+33 Profil

icon Re: Edit in place problem13.11.2011. u 11:55 - pre 150 meseci
Mada se to podrazumeva, za svaki slučaj da te pitam da li taj JS kôd stoji unutar $(document).ready()? Ako je to slučaj, a i dalje se javlja taj problem, onda probaj da dodaš ovo: e.stopPropagation();, npr. ispod tog e.preventDefault();.
 
Odgovor na temu

Valerij Zajcev

Član broj: 40886
Poruke: 1374
*.dynamic.sbb.rs.



+2 Profil

icon Re: Edit in place problem13.11.2011. u 13:32 - pre 150 meseci
Probao. Nije ni jedno od ta dva :(
Vidis tacno sta se dogadja:
 
Odgovor na temu

Valerij Zajcev

Član broj: 40886
Poruke: 1374
*.dynamic.sbb.rs.



+2 Profil

icon Re: Edit in place problem13.11.2011. u 16:00 - pre 150 meseci
Ispravljen je problem.
Stavio sam script za edit dugme u html koji je ceo komentar.
I svaki dodati komentar je dodavao novi event.
Izbacio sam script u main stranicu (u koju dodajem komentare), tako da se event registruje samo jednom i sljaka :)
 
Odgovor na temu

[es] :: Javascript i AJAX :: Edit in place problem

[ Pregleda: 1348 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.