webForumDet fria alternativet

Hämta allt efter sista slashen med jQuery?

JavaScriptur Javascript

19 svar · 1 533 visningar · startad av bassebhu

bassebhuMedlem sedan nov. 20016 480 inlägg
#1

Hej alla glada!

Finns det något sätt att hämta allt efter sista slashen i en url?

T.ex. i denna länk:
http://www.link.com/kat/sida
Vill jag få ut "sida". Men den måste känna av efter sista slashen för länken skulle lika gärna kunna vara:
http://www.link.com/kat/underkat/sida2
Och i det fallet vill jag alltså bara ha "sida2"

Min kod ser just nu ut såhär hehe. Inte så snyggt och inte så allround.

$('a[rel="ajax"]').each(function() {
	var href = this.href;
	href = href.replace("http://","");
	href = href.replace("www.","");
	href = href.replace("sida.com/kat/underkat","");
	href = href.replace("sida.com/kat","");
	this.href = href.replace("/","");
});

Helst vill man ju ha bort allt som har med http, www, sida och .com att göra från koden och bara regexpa efter allt som finns efter sista "/"
Är det möjligt?

Tack!

LedelMedlem sedan dec. 2004736 inlägg
#2

Otestad kod, men borde fungera :)

this.href = this.href.substring(this.href.lastIndexOf("/") + 1);
bassebhuMedlem sedan nov. 20016 480 inlägg
#3

Yes, jag visste att det skulle vara enkelt. jQuery e faeen grymt :)

Tack!

voigtann1Medlem sedan juni 20019 519 inlägg
#4

Förstå inte varför du vill göra på det sättet. Du vill göra ett ajax anrop gissar jag på, hade inte först försökt byta url:en på alla de länkarna utan bindit click eventet att inte gå till default sidan utan kallar AJAX anropet istället.

bassebhuMedlem sedan nov. 20016 480 inlägg
#5

voigtann1 skrev:

Förstå inte varför du vill göra på det sättet. Du vill göra ett ajax anrop gissar jag på, hade inte först försökt byta url:en på alla de länkarna utan bindit click eventet att inte gå till default sidan utan kallar AJAX anropet istället.

Låter smart, hur gör man det? :)

Går det även att få så att om man skriver in detta i adressfältet:
http://www.sida.com/kat/underkat/sida
så skrivs det om till detta:
http://www.sida.com/#sida

Alltså att både länkar som innehåller kat/underkat/sida eller om man går direkt till kat/underkat/sida via adressfältet leder till #sida?

Det finns säkert hundra nackdelar och lika många bättre sätt för vad jag vill göra, men frågan kvarstår, hur gör man? :)

voigtann1Medlem sedan juni 20019 519 inlägg
#6

Fråga 1: Samma sak som Ledal, fast du har säkert ett click event redan men något i stil med:

$('a[rel="ajax"]').click(function(e) {
	e.preventDefault();
	var that = this;

	$.ajax({
		url: that.href,
		success: function(data){
			var url = that.href.substring(that.href.lastIndexOf("/") + 1);
			window.location.href = window.location.href.split("#")[0] + "#" + url;
			//...
		}
	});
});

gjorde: http://voigt.se/sandbox/jquery/ för något år sedan men den visar både med och utan javascript/jquery/ajax

2. Att göra att det du önskar där är "möjligt" men varför skall du göra det? Om jag förstå det hela rätt med # så är första delen du ha i din url: http://www.sida.com/kat/underkat/sida om du INTE ha javascript aktiverat medans http://www.sida.com/#sida är resultatet av en som har tryckt på en av dina ajax länkar.

båda länkarna bör fungera och visa samma resultat, bara att en laddas med ajax.

bassebhuMedlem sedan nov. 20016 480 inlägg
#7

Tack. Jag ser att du inte behöver använda anchors för att ladda in grejer. Alla som jag hittills har stött på göra liknande grejer använder anchors. Varför? Det är något jag inte hänger med på här :)

Har det något med sökvägarna att göra? Back/forward-knapparna i webbläsaren?

Jag kan ju beskriva vad jag vill göra också. Det jag är ute efter är att ha en musikspelare på sidan som inte stannar när man byter sida och frames eller popup är uteslutet. Därav mitt intresse för ajax. Jag har fått det att funka tillfredsställande i en version med anchors (#sida) som är ajaxversionen för ?c=sida, men nu vill jag göra det för en wordpress-sida och den använder permalänkar med postnamn. Alltså t.ex. sida.com/kat/underkat/sida

Jag har testat lite ajaxplugins, men ingen funkade bra tyvärr så jag tänkte lösa det själv. Förslag på tillvägagångssätt?

Stort tack!

edit/ som svar på 2. Det var alltså för att jag med anchors ville att om någon skrev in adressen sida.com/kat/underkat/sida så ville jag att det skulle visas sida.com/#sida och undvika när man sedan klickar vidare att det blir sida.com/kat/underkat/sida#en-annan-sida

Ja, jag vet att jag vill ha en musikspelare som rullar hela tiden, men vägen dit är fortfarande rätt grumlig. All hjälp tas tacksamt emot, anchors eller inte!

voigtann1Medlem sedan juni 20019 519 inlägg
#8

anchors är för webbhistorik + att du kan bokmärka anchors (och triggar ajax på load eventet), men jag säger att alla sidor bör fungera med/utan javascript (så är det för mig, skadad kanske men jag vill inte utesluta någon besökare).

bassebhuMedlem sedan nov. 20016 480 inlägg
#9

Inte jag heller, men då blir det anchors. Ska testa din senaste kod. Det låter som en god idé att ändra länkarna först vid klicket.

Men jag skulle ändå föredra om mina kat/underkat/sida skrevs om till #sida vid load. Detta har att göra med att wordpressadministrationen skickar tillbaka en till länkarna utan anchors och om användaren fortsätter att surfa därifrån så blir det väldigt skumma länkar som han potentiellt bokmärker/skickar till en kompis. T.ex. kat/underkat/sida#en-helt-annan-sida

Jag kanske gör det krångligt för mig? Bör jag i så fall implementera anchors redan från wordpressadministrationen?

Tack igen!

bassebhuMedlem sedan nov. 20016 480 inlägg
#10

voigtann1 skrev:

Fråga 1: Samma sak som Ledal, fast du har säkert ett click event redan men något i stil med:

$('a[rel="ajax"]').click(function(e) {
	e.preventDefault();
	var that = this;

	$.ajax({
		url: that.href,
		success: function(data){
			var url = that.href.substring(that.href.lastIndexOf("/") + 1);
			window.location.href = window.location.href.split("#")[0] + "#" + url;
			//...
		}
	});
});

Jag testade din kod och det verkar funka, men den tar lite tid innan den reagerar. Är det alltid så med window.location.href eller kan man få bort det? Det tar liksom en halv sekund efter klicket som den reagerar.

Tack!

LedelMedlem sedan dec. 2004736 inlägg
#11

Menar du med "reagerar" att det tar en halv sekund innan URLen i webbläsaren uppdateras? För window.location.href uppdateras ju i "success-funktionen" i AJAX-anropet, vilket betyder att följande händer:

Klick->AJAX-anrop->Laddar...->Klart!->Uppdatera URL.
bassebhuMedlem sedan nov. 20016 480 inlägg
#12

Ledel skrev:

Menar du med "reagerar" att det tar en halv sekund innan URLen i webbläsaren uppdateras? För window.location.href uppdateras ju i "success-funktionen" i AJAX-anropet, vilket betyder att följande händer:

Klick->AJAX-anrop->Laddar...->Klart!->Uppdatera URL.

Ja, eller det tar uppemot en sekund innan något händer. Om jag ändrar länkarna i a-taggarna med jQuery så börjar det nya innehållet hämtas direkt ($('a[rel="ajax"]').each). Man får en direkt respons på att man har klickat. Men om jag låter ändringen göras först efter att man har klickat på länken ($('a[rel="ajax"]').click-versionen med window.location) så händer inget förrän en sekund efter att man har klickat, vilket förstör upplevelsen.

Men vad är det dumma med att byta ut länkarna med .each()? Har man javascript avstängt så körs ju aldrig funktionen och de riktiga länkarna visas.

voigtann1Medlem sedan juni 20019 519 inlägg
#13

det nya innehållet hämtas inte direkt med den kod du ha skrivit från början, däremot så skriver du om dina URL:er direkt, det är två olika saker.

jag skall nog inte lägga mig i det mer, men jag förstå inte varför du vill "visa" alla dina länkar som ankare, om jag försöker öppna länkara i ett nytt fönster så vill jag kunna se innehållet, vilket känns som det inte alls bli i ditt resultat.

Som Ledal säger, flytta bara upp location.href innan ajax anropet körs, jag tog det bara för givet att man vill bara få den nya länken när man faktist ha fått ett nytt innehåll på sidan, fel av mig kanske.

Varför jag inte hade velat köra each() är för att du verkar göra ett anrop till, så du loopar igenom samma selectorer två gånger, och inte verkar du spara dom så det är:
1. Hämtar alla a element, leta igenom de element som har en rel som är lika med ajax.
2. Loopar ut kollektionen och "fysiskt" ändra om länkarna.
3. Hämtar alla a element, leta igenom de element som har en rel som är lika med ajax.
4. Gör något med den nya kollektionen.

<a href="#fubar">a</a> gör en location.href om man skall se det i JS världen, samma resultat men jag hade aldrig skrivit #länk, då hade man gjort det från början.

LedelMedlem sedan dec. 2004736 inlägg
#14

voigtann1 skrev:

Som Ledal säger

Ledel ;)

bassebhuMedlem sedan nov. 20016 480 inlägg
#15

Tack igen voigtann, för din kunskap och tålamod. Jag hoppas att du förstår att jag inte vet vad jag gör, utan kopierar och klistrar och hoppas på det bästa :)

Anledningen till att jag vill att någonting ska ske direkt är att jag har en liten snutt som hämtar in rätt data från en php-fil beroende på vad som kommer med anchorn. Den funktionen sätter en laddningssymbol tills sidan har laddats och det blev kaka på kaka med klick->en sekunds väntan->laddningssymbol->visa innehåll. Om jag tog bort $ajax.-stycket så blev det som jag tänkte mig (helt utan att veta vad det stycket hade för uppgift)! ;)

$('a[rel="ajax"]').click(function(e) {
	e.preventDefault();
	var that = this;

	var url = that.href.substring(that.href.lastIndexOf("/") + 1);
	window.location.href = window.location.href.split("#")[0] + "#" + url;

});

Nu har jag de riktiga länkarna i mina a-taggar och får anchors först när man klickar på länkarna. Då körs denna lilla vackra snutt:

$(function(){

  var cache = {
    '' : $('.defaultcontent')
  };
  
  $(window).bind( 'hashchange', function(e) {
    
    var url = $.param.fragment();
    $('#menu-meny a').removeClass('current-menu-item');
    $('.ajaxcontent').children(':visible').hide();
    var slug = '<?php bloginfo( 'wpurl' ); ?>/'+url;
    $('a[href="'+slug+'"]').addClass('current-menu-item');
    
    if (cache[url]) {
      cache[url].fadeIn('slow');
    } else {
      $('.load').show();
      cache[url] = $('<div class="bbq-item"/>')
        .appendTo('.ajaxcontent')
        .load('<?php bloginfo( 'template_url' ); ?>/content.php?c='+url, function(){
          $('.load').hide();
        });
        $('.ajaxcontent').hide();
        $('.ajaxcontent').fadeIn('slow');
    }

  })

  $(window).trigger( 'hashchange' );
  
});

hehe, jag är ganska rolig va? :e

Om ni orkar mer... Går de här två funktionerna att baka ihop i samma snutt? click och hashchange är väl det som talar om om något ska ändras i de resp. snuttarna?
Sorry att jag fortsätter med mina anchors, men webbhistoriken och bokmärkesfinessen lockade.

voigtann1Medlem sedan juni 20019 519 inlägg
#16

går säkert att göra, få ta en titt imorgon om jag få tid till det.

bassebhuMedlem sedan nov. 20016 480 inlägg
#17

voigtann1 skrev:

går säkert att göra, få ta en titt imorgon om jag få tid till det.

Sweet, tack! Uppskattas verkligen!

voigtann1Medlem sedan juni 20019 519 inlägg
#18

borde kanske bara att köra:

$('a[rel="ajax"]').click(function(e) {
	e.preventDefault();
	location.href = location.href.split("#")[0] + "#" + this.href.substring(this.href.lastIndexOf("/") + 1);
});

Svårt för mig att köra tester då jag inte har något ;)

bassebhuMedlem sedan nov. 20016 480 inlägg
#19

Tack för hjälpen!

Det dök dock upp en sista fråga (PHP, sorry) ;)

WordPress använder väl htaccess för att göra "permalänkar".

Jag brukar vanligtvis använda ?c=kategori och då kan jag enkelt kolla om c är satt med isset($_GET['c'])

Om wordpress nu i stället skriver sida.com/kategori hur kan göra liknande koll ifall "kategori" är isset? Måste jag söka igenom urlen eller finns värdet "kategori" att nå på nåt sätt?

Tack!

voigtann1Medlem sedan juni 20019 519 inlägg
#20

"Jag" hade kört en helt egen variant, struntat i att försöka "splitar" länkarna, jag hade kört:

http://minsida.se/#http://minsida.se/kategori

och kört hela hash-värdet och kört AJAX anropet mot 'http://minsida.se/kategori' istället, eller vad innehåller '<?php bloginfo( 'wpurl' ); ?>'?

136 ms totalt · 3 externa anrop · v20260731065814-full.c74b5be1
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)