JQuery - Narzędzia, v2.

Piotr Kowalczyk
05.09.2015

No dobra przyznaje - moje dwie poprzednie funkcje były dość, hm, może tak; nie zawierały w sobie ducha jQuery ^^. To znaczy, jej ideai - oddzielenie JavaScriptu od HTML’a. Tak więc prezentuję wersję drugą :). Przy wykorzystaniu plugin livequery ( http://docs.jquery.com/Plugins/livequery ).

Linki:

$('a').livequery('click', function(event) {
if($(this).attr('name') != '#'){
           event.preventDefault();
            $("#loading").show();
            $('#content').load(
                $(this).attr('href'),
                function(){
                    $("#content").find('a');
                    Refresh();
                    $("#loading").hide();
                }
            );
} else {
  return true;
 }
});

I to wszystko - linki będą wykonywały się za pośrednictwem AJAX. Dodałem te loader - wystarczy wkleić odpowiedniego div’a o id ‘loader’, a ładowana strona pojawi się w divie o id ‘content’. Proste, prawda? To teraz formularze.

$('form').livequery('submit', function(event) {
if($(this).attr('name') != '#'){
           event.preventDefault();
          $("#loading").show();
           var url = $(this).attr('action');
            var met = $(this).attr('method');
            var form = $(this).attr('id');
            var data = $(this).serialize();
            $.ajax
            (
                {
                    type: met,
                    url: url,
                    data: data,

                    error: function (XMLHttpRequest, textStatus, errorThrown)
                    {
                        $("#content").append('Błšd obiektu o nazwie:'+XMLHttpRequest+'Komunikat:'+textStatus+'Rodzaj:'+ errorThrown);
                    },
                    success: function(html)
                    {
                        $("#loading").hide();
                        Refresh();
                        $("#content").html(html);

                    }
                }
        );    

    } else {
  return true;
 }
});

Proszę bardzo - formularze podobnie jak linki, wymagają tylko załączenia tego kodu JavaScript (oraz bibliotek jQuery ; livequery ), i będą się odbywały za pośrednictwem AJAX. Nic więcej zmieniać nie trzeba. Podobnie jak w wypadku linków potrzebne są dwa divy o id ‘loader’ (do procesu ładowania), oraz ‘content (do wczytywania zawartości.)

Pozdrawiam!

Zgłoś swój pomysł na artykuł

Więcej w tym dziale Zobacz wszystkie