Forum PHP.pl > Ajax - ajaxowanie linków

Pomoc - Szukaj - Użytkownicy - Kalendarz

Bart123

24.09.2014, 11:30:55

Witam. Zrobiłem coś takiego na szablonie WP Twenty Twelve, ale to ajaxowanie nie działa. Konsola Firefox wyrzuca, że metoda preventDefault(); jest przestarzała i i tak przeładowuje stronę, zamiast normalnie ajaxować link. Moje linki wyglądają w ten sposób MÓJADRES/?page_id="15".

Wydaje mi się, że z zapisem budowy linku w skrypcie może być coś nie tak.

Proszę Was o pomoc. Moglibyście to sprawdzić? Cały kod pisałem sam, wg. tutorialu - potem przerobiłem go na potrzeby swojej strony. Tyle, że w tutku działa, a u mnie nie.

CODE

$(function() {

$("column-wrap").append("<img class='ajaxloader' src='images/ajax-loader.gif' />");

var $content = $(".content"),
URL = ' ',
siteURL = "http://" + top.location.host.toString(),
$internalLinks = $('a[href]^=' + siteURL + ']'),
$ajaxSpinner = $(".ajax-loader"),
$el, allLinks = $("a");

$internalLinks.each(funtion() {

$(this).atrr("href", "#" + this.pathname);

}).click(function() {
ajaxSpinner.fadeIn();
$content.animate({opacity: "0.1"});
$el = $(this);
$(".current_page_item").removeClass(".current_page_item");
$allLinks.removeClass(".current_menu_item");
$content.load(URL);
URL = $el.attr("href").substring(1);
$content.load(URL, function (){
$el.addClass(".current_menu_item").parent().addClass(".current_page_item");
$ajaxSpinner.fadeOut();
$content.animate({opacity: "1"});
});
event.preventDefault();
return false;
});

});

Turson

24.09.2014, 11:37:38

Skoro masz
event.preventDefault();
to przekaż "event" w argumencie funkcji

Bart123

24.09.2014, 11:39:43

Turson - bardzo dziękuję za zainteresowanie, ale jak to dokładnie zrobić ?

Chodzi o coś takiego?

Function (event) {}?

Turson

24.09.2014, 11:42:01

[JAVASCRIPT] pobierz, plaintext 
 
$(function() {
 
$("column-wrap").append("<img class='ajaxloader' src='images/ajax-loader.gif' />");
        var $content = $(".content"),
        URL = ' ',
        siteURL = "http://" + top.location.host.toString(),
        $internalLinks = $('a[href]^=' + siteURL + ']'),
        $ajaxSpinner = $(".ajax-loader"),
        $el, allLinks = $("a");
        $internalLinks.each(funtion() {
 
        $(this).atrr("href", "#" + this.pathname);
                }).click(function(event) {
ajaxSpinner.fadeIn();
        $content.animate({opacity: "0.1"});
        $el = $(this);
        $(".current_page_item").removeClass(".current_page_item");
        $allLinks.removeClass(".current_menu_item");
        $content.load(URL);
        URL = $el.attr("href").substring(1);
        $content.load(URL, function (){
        $el.addClass(".current_menu_item").parent().addClass(".current_page_item");
                $ajaxSpinner.fadeOut();
                $content.animate({opacity: "1"});
                });
        event.preventDefault();
        return false;
        });
        });
 
[JAVASCRIPT] pobierz, plaintext

z resztą preventDefault() i return false robią to samo

Bart123

24.09.2014, 11:50:09

NIE DZIAŁA. Konsola: SyntaxError: missing ) after argument list. Próbuję to znaleźć.

Albo oślepłem, albo konsola zgłupiała. Wszystkie argumenty wyglądają na zamknięte.

Turson

24.09.2014, 11:59:13

literówka
$internalLinks.each(funtion()

Bart123

24.09.2014, 12:02:23

Nadal przeładowuje stronę

Zaraz coś mniie trafi. Wczoraj siedziałem pół doby nad tym badziewiem

Może ten zapis linka jest zły?

ja mam adres/?page_id=15 - na przykład.

Konsola tym razem nic nie wywala. Czyli tak, jakby wszystko było dobrze. Ajaxify.js też mam wczytany do nagłówka. I nadal nie działa.

Turson

24.09.2014, 12:05:55

Z jakiej racji robisz click() na attr "href" zamiast na cały element...?

@edit
Dobra, sam się zamieszałem.

Bart123

24.09.2014, 12:06:48

Pozmienałem nazwy linków na normalne czyli np. Adres/edukacja, albo Adres/Zainteresowania. Zmieniłem nieco kod ajax wg, tutorialu z Css Tricks. Teraz wygląda to tak. ALE NADAL NIE DZIAŁA.

[JAVASCRIPT] pobierz, plaintext 
 
 (function() {
 
$("wrapper").append("<img class='ajaxloader' src='images/ajax-loader.gif' />");
 
var $content = $(".content"),
URL = ' ',
siteURL = "http://" + top.location.host.toString(),
$internalLinks = $("a[href]^='"+siteURL+"']"),
hash = window.location.hash,
$ajaxSpinner = $("#ajax-loader"),
$el, $allLinks = $("a");
 
if (hash) {
$ajaxSpinner = fadeIn(); 
$content.animate({opacity: "0.1"});
$(".current_page_item").removeClass(".current_page_item");
$("a[href="+hash+"]").addClass(".current_menu_item").parent().addClass(".current_page_item");
hash = hash.substring(1);
URL = hash;
$content.load(URL, function() {
$ajaxSpinner.fadeOut();
$content.animate({opacity: "1"});
});
}
 
$internalLinks.each(function() {
 
$(this).attr("href", "#" + this.pathname);
 
}).click(function(event) {
$ajaxSpinner.fadeIn();
$content.animate({opacity: "0.1"});
$el = $(this);
$(".current_page_item").removeClass(".current_page_item");
$allLinks.removeClass(".current_menu_item");
URL = $el.attr("href").substring(1);
URL = URL;
$content.load(URL, function (){
 
$el.addClass(".current_menu_item").parent().addClass(".current_page_item");
$ajaxSpinner.fadeOut();
$content.animate({opacity: "1"});
 
 
});
});
 
e.preventDefault();
 
 })
 
[JAVASCRIPT] pobierz, plaintext

Funkcja nadal nie trybi, chociaż konsola nie wykazuje ANI JEDNEGO BŁĘDU Z JAVASCRIPT.

Moje menu wygląda mniej więcej tak: Oto fragment pliku header.php z mojej strony.

[HTML] pobierz, plaintext 
 
<div id="page" class="hfeed site">
 
    <header id="masthead" class="site-header" role="banner">
        <a href="http://ADRES/"></a>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle"></h3>
            <a class="assistive-text" title="Przeskocz do treści" href="#content"></a>
            <div class="menu-mymenu-container">
                <ul id="menu-mymenu" class="nav-menu">
                    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
                        <a href="http://ADRES/edukacja/" title="Edukacja"></a>
                    </li>
 
 
[HTML] pobierz, plaintext

Powoli tracę cierpliwość do tego cholerstwa. Dlaczego to nie działa?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.