Temat: Podmiana fragmentu html na wynik zapytania

Mam listę wyglądającą jak ta z wycinka kodu:

<div class="user-folders">

<ul class="messenger-menu">

...

<li><img id="2" class="edit-directory pointer" alt="Edytuj folder" src="theme/gfx/action-icons/folder_edit.png"></li>

<li><img id="1" class="edit-directory pointer" alt="Edytuj folder" src="theme/gfx/action-icons/folder_edit.png"></li>

...

</ul>

</div>

i deklarację jQ:

        $('.edit-directory').click(function() {

            var id = this.getAttribute('id');

            $.get("ajax.php", { module: "messenger", action: "edit-directory", directoryID: id },

                function(data){

                    $(this).parent("li").replaceWith("<li>" + data + "</li>");

                });

        });

Chciałem robić tak, aby po kliknięciu w .edit-directory wykonało się zapytanie i jego wynik został wstawiony jako zawartość <li></li>, w którym uprzednio znajdował się element .edit-directory.

Zapytanie wykonuje się poprawnie, ale jego wynik nie pojawia się tam gdzie trzeba, wcale nie jest widoczny.

Co napisałem nie tak? Firebug nie znajduje błędów.Mateusz Ziarko edytował(a) ten post dnia 29.09.09 o godzinie 17:00

Temat: Podmiana fragmentu html na wynik zapytania

Może przestawione parametry wywołania AJAXa tak, że .get spodziewa się dostać JSON? Zdarzało mi się że w takim wypadku wogóle nie dostawałem odpowiedzi jeśli była inna niż JSON.

A wogóle nie prościej by było tak ;) ?

$('li','ul.messenger-menu')

      .click(function() {

                          $(this).load('ajax.php',......)



}

Temat: Podmiana fragmentu html na wynik zapytania

Spróbuję.
Odpowiedź wygląda tak:

<form action="index.php?module=messenger&action=edit-directory" method="post" enctype="multipart

/form-data">

        <input id="folder_edit_name" class="validate[required] width-120" type="text" name="name" value

="i jeszcze jeden" />

        <input type="hidden" name="directoryID" value="3" />

        <input class="submit accept" type="submit" name="save" value="Zapisz" />

        <input class="submit cancel" type="button" name="cancel" value="Anuluj" />

    </form>

czyli dokładnie tak jak powinna, a problem leży w tej linijce

                function(data){



                    $(this).parent("li").replaceWith("<li>" + data + "</li>");



                });

bo nie podmienia mi odpowiedniego <li></li> w liście na ten wynik.

Temat: Podmiana fragmentu html na wynik zapytania

sprawdz w konsoli czym jest this w funckji callback ajax(), byc moze jest to juz inny this niz w click() - jezeli o to chodzi, to zwyczajnie zapisz go do innej zmiennej przed wywolaniem ajax() i podstaw ja w swoim skrypcie zamiast obecnej this

Temat: Podmiana fragmentu html na wynik zapytania

Rzeczywiście dodanie linijki

var that = $(this);

przed wywołaniem zapytania $.get() naprawiło wszystko, dzięki!

I jeszcze pytanie nie związane dokładnie z tematem. Jeżeli wyświetlę wynik tego zapytania i będą tam kolejne elementy, które będą wywoływać następne akcje jQuery muszę jakoś przeładowywać deklaracje js? Spotkałem się z tym, że kiedy używając pluginu jquery.ajaxContent po załadowaniu za jego pomocą formularza, w którym następnie przechwytywałem submit, bądź walidowałem nie działało to poprawnie.

Temat: Podmiana fragmentu html na wynik zapytania

Mateusz Ziarko:
Jeżeli wyświetlę wynik tego zapytania i będą tam kolejne elementy, które będą wywoływać następne akcje jQuery muszę jakoś przeładowywać deklaracje js?

Tak, najlepiej za pomocą live'a lub livequery, a w ostateczności powtarzając część kodu w tym, co Ci ajaxowo zostanie zwrócone.

--
http://smartweb.smartmedia.com.pl - strony internetowe, serwisy społecznościowe, rozwiązania dla biznesu

Temat: Podmiana fragmentu html na wynik zapytania

Napisałem takie deklaracje:

    $(document).ready(function(){

        $('.edit-directory').live("click", function(){

            var parent = $(this).parent("li");

            var id = this.getAttribute('id');

            $.ajax({

                url: "ajax.php",

                type: "GET",

                data: ({ module: "messenger", action: "edit-directory", directoryID: id }),

                beforeSend: function(){

                    parent.html("<img alt=\"\" src=\"theme/gfx/loading.gif\" /> Ładowanie...");

                },

                success: function(data) {

                    parent.html(data);

                }

            });

        });

    });

    $(document).ready(function(){

        $("input[name='save']").live("click", function(){

            var parent = $(this).parent("form").parent("li");

            var that = $(this);

            var name = that.parent("form").find("input[name='name']").attr("value");

            var id = that.parent("form").find("input[name='directoryID']").attr("value");

            $.ajax({

                url: "ajax.php",

                type: "POST",

                data: ({ module: "messenger", action: "edit-directory", directoryID: id, name: name, save: "yes" }),

                beforeSend: function(){

                    parent.html("<img alt=\"\" src=\"theme/gfx/loading.gif\" /> Zapisywanie...");

                },

                success: function(data) {

                    parent.html(data);

                }

            });

        });

    });

Pierwszy cykl idzie tak jak trzeba czyli po kliknięciu w .edit-directory pojawia się formularz, po kliknięciu w odpowiedni przycisk pojawia się odpowiedni widok z nowym przyciskiem .edit-directory i tutaj zonk po kolejnym kliku mam białą stronę z wynikiem zapytania tj. formularzem. Co jest nie tak?

//edit
problem rozwiązanyMateusz Ziarko edytował(a) ten post dnia 02.10.09 o godzinie 15:19

Temat: Podmiana fragmentu html na wynik zapytania

Teraz coś takiego:

    $(document).ready(function(){

        $(".user-folders span.ajax-new-dir-form input[name='save']").click(function(){

            var parent = $(this).parent("form").parent("span");

            var that = $(this);

            var name = that.parent("form").find("input[name='name']").attr("value");

            $.ajax({

                url: "ajax.php",

                type: "POST",

                data: ({ module: "messenger", action: "add-directory", name: name, save: "yes" }),

                beforeSend: function(){

                    parent.append("<span class=\"loading\"><img alt=\"\" src=\"theme/gfx/loading.gif\" /> Zapisywanie...</span>");

                },

                success: function(data) {

                    $(".user-folders").find("span.loading").fadeOut("slow").remove("span.loading");

                    $(".user-folders").find("ul li:last").add("<li>" + data + "</li>").fadeIn("slow");

                    parent.slideToggle("slow").find("input[name='name']").attr("value","");

                }

            });

        });

    });



    $(document).ready(function(){

        $('.user-folders ul li .remove-directory').live("click", function(){

            var parent = $(this).parent("li");

            var id = this.getAttribute('title');

            $(this).append("<p class=\"dialog-box\">Jeżeli usuniesz folder, wszystkie znajdujące się w nim wiadomości zostaną przeniesione do folderu <em>Kopie robocze</em>.</p>");

            $(".dialog-box").dialog({

                title: 'Czy napewno chcesz usunąć ten folder?',

                show: 'scale',

                hide: 'scale',

                buttons: {

                    "TAK": function() {

                        $.ajax({

                            url: "ajax.php",

                            type: "POST",

                            data: ({ module: "messenger", action: "remove-directory", directoryID: id, yes: "yes" }),

                            beforeSend: function(){

                                 $(".dialog-box").append("<br /><img alt=\"\" src=\"theme/gfx/loading.gif\" /> Usuwanie...");

                            },

                            success: function() {

                                $(".dialog-box").dialog('close');

                                parent.fadeOut("slow");

                            }

                        });

                    },

                    "NIE": function() {$(this).dialog('close');}

                }

            });

        });

    });

Wpierw wywołuję usuwanie wiersza, wszystko ładnie ukrywa się. Następnie dodaję nowy i nie dość, że nie pojawia mi się to co dodałem to jeszcze pojawiają się wszystkie ukryte wiersze. Jak to zmodyfikować jakoś składnie? Przy podmianie add() na append() idzie ok z tym, że kolejne wiersze wychodzą mi poza granice przeznaczonego na nie boxa.

Temat: Podmiana fragmentu html na wynik zapytania

Nie możesz użyć add w zastępstwie append(), bo add służy do czegoś zupełnie innego.

W tym miejscu add() najwyraźniej łapie wszystkie <li> i na nich wykonuje fadeIn().