[jQuery] Selector uit variabelen resulteert in foutmelding

[TheNephilim]

Om de state van een form te reconstrueren aan de hand van een query_string, heb ik een jQuery selector gemaakt die dat zou moeten doen. Echter blijf ik zitten met de foutmelding: Uncaught Error: Syntax error, unrecognized expression: #orderby-price-desc.

JavaScript:

$('#orderby-'+orderby+'-'+order.toLowerCase()+'').addClass('is-selected');

De selector in console.log(); en dan hardcoden is geen probleem, dan krijg ik netjes #orderby-price-desc terug.

Ben inmiddels al heel wat pogingen verder, maar niks mag baten. String() om de variabelen heen doet niks, replacen van whitespace ofzo is het ook niet. Iemand die ziet wat ik hier fout doe? Wellicht een heel simpel probleem, maar ik kom er echt niet uit.

[Patriot]

Even voor de duidelijkheid, als je de selector even apart neemt in een variabele en console.log()'t dan doet hij het nog niet? Het ziet er verder niet fout uit (de +'' op het einde is wat nutteloos, maar zou geen problemen moeten geven).

EDIT: Eventueel zou het nog wel interessant zijn om te weten waar orderby en order precies vandaan komen.

Ik kan me namelijk voorstellen dat het misgaat bij die toLowerCase().

[ Voor 28% gewijzigd door Patriot op 14-06-2013 17:49 ]

[jeroenikke]

Hier lukt 't wel:
http://jsfiddle.net/FZCSG/1/

Misschien een UTF8 character dat er uitziet als de juiste karaketer, maar eigenlijk net iets anders is (dash enzo)

Vraag eens het type op van uw 2 variabelen (typeof)

[ Voor 0% gewijzigd door jeroenikke op 14-06-2013 17:54 . Reden: sorry verkeerde url ]

[Patriot]

jeroenikke schreef op vrijdag 14 juni 2013 @ 17:53:
Hier lukt 't wel:
http://jsfiddle.net/FZCSG/1/

Link je nu verkeerd, of heb je je wijzigingen toevallig nog niet opgeslagen?

EDIT: Ah, inmiddels wel

[ Voor 7% gewijzigd door Patriot op 14-06-2013 17:58 ]

[TheNephilim]

Sorry voor de late reactie, maar hieronder een console.log(), typeof en $().

code:

#orderby-price-desc
string
string
Uncaught Error: Syntax error, unrecognized expression: #orderby-price-desc

Beide gewoon strings dus.

Patriot schreef op vrijdag 14 juni 2013 @ 17:47:
Even voor de duidelijkheid, als je de selector even apart neemt in een variabele en console.log()'t dan doet hij het nog niet? Het ziet er verder niet fout uit (de +'' op het einde is wat nutteloos, maar zou geen problemen moeten geven).

EDIT: Eventueel zou het nog wel interessant zijn om te weten waar orderby en order precies vandaan komen.

Ik kan me namelijk voorstellen dat het misgaat bij die toLowerCase().

De +'' is niet nodig, komt voort uit de vele pogingen die ik gedaan heb. toLowerCase() maakt geen verschil, dan zou hij het element niet moeten vinden, maar hij geeft nog steeds die error.

Ben ondertussen nog geen steek verder met dit bizarre probleem Jullie reacties worden uiteraard gewaardeerd, stapje voor stapje moeten we toch eens bij de oorzaak komen

---

Wat meer informatie

Het begint allemaal met een query string: quality[]=3&price_min=2&price_max=50&order=DESC&orderby=price. Deze trek uit elkaar met split() op eerst & en dan = teken. Daarmee bekijk ik de key en wil dan de manier van sorteren afkomstig uit de query string, laten zien in mijn webshop. Er zijn een 5-tal verschillende methodes, die ik voorzien van een uniek ID. Bijv. #orderby-quality-desc en #orderby-price-desc.

Ik loop overigens door de pairs (afkomstig van split()) heen en vul, als ik order of orderby tegenkom, twee variabelen die ik vooraf definieer: var order = ""; var orderby = "";. Met order = pair[1]; sla ik de value op in de variabelen.

Maar goed, zoals de typeof aangeeft, zijn het gewoon strings. Dus waarom dit toch weer misgaat, geeeeeen idee

---

Na wat geklooi, het blijkt ook echt alleen de #orderby-price-desc te zijn die niet werkt. #orderby-price-asc en alle andere versies doen het wel gewoon

[ Voor 31% gewijzigd door TheNephilim op 17-06-2013 17:16 ]

[Anoniem: 2935]

Kan je deze bug uitkleden tot een simpele testcase? Ik ben echt zwaar benieuwd wat hier nou misgaat.

[Patriot]

Tsja, dit werkt gewoon. Je moet hem wel even hier bekijken, anders heb je geen querystring.

Ik neem aan dat als je die code draait in je eigen omgeving dat hij het daar dan ook doet. Dan is het gewoon een kwestie van vergelijken om te kijken wat jouw code anders doet.

[TheNephilim]

Heb even gekeken, maar een volledige jsfiddle aanmaken, dat gaat wel even duren Ga het even proberen.

Het gaat overigens om de location.hash die base64 (urlsafe) encoded is.

---

Edit

Het lijkt erop dat de location.hash niet pakt bij jsfiddle: http://jsfiddle.net/F5t7Z...URFU0Mmb3JkZXJieT1wcmljZQ

Verder is het zo aardig nagebouwd. Alles wat er toe doet zit erin, nu nog uitvinden waarom die location.hash niks doet.

Edit

Ah, eindelijk het probleem gereproduceerd! ^^

http://jsfiddle.net/F5t7Z/4/

location.hash werkt niet, dus gewoon de base64 string erin geknikkerd. Zelfde error!

---

Edit

de Base64 decode gooit roet in het eten. Gewoon de al gedecode string werkt namelijk wel, door JS laten decoden gaat niet goed.

Optisch is er niks aan de string te zien, toch gaat er iets mis met de DESC.

Laatste jsFiddle: http://jsfiddle.net/F5t7Z/5/

[ Voor 76% gewijzigd door TheNephilim op 18-06-2013 14:06 ]

[RobIII]

Isoleer je probleem dan for Pete's sake eens...

Dit is isoleren. Heel die andere meuk is totaal overbodig. Zoals je in je console kunt zien is er niets "geks" _{(niks "optisch" geneuzel »» meten == weten dus gewoon ASCII codes printen!)} aan de hand met "DESC" dus daar ligt 't niet aan. Als je dan een beetje verder kijkt zie je wel dat price 2 nul-bytes bevat... *HINT*

Als ik even die base64.js achterwege laat en atob* gebruik zie je de nul-bytes als sneeuw voor de zon verdwijnen.

* Gecko/WebKit only AFAIK. dus je zult nog wel een (fatsoenlijke) base64 implementatie moeten vinden Of je gebruikt de huidige implementatie en stript eerst de nul-bytes uit de resultstring voordat je er verder iets mee gaat doen.

(En waarom gebruik je jQuery 1.10? )

[ Voor 71% gewijzigd door RobIII op 18-06-2013 14:55 ]

[Spinal]

RobIII schreef op dinsdag 18 juni 2013 @ 14:31:
(En waarom gebruik je jQuery 1.10? )

jQuery 1.10 !== 1.1.0 1.10 is de nieuwste uit de v1-reeks

[RobIII]

Spinal schreef op dinsdag 18 juni 2013 @ 15:13:
[...]

jQuery 1.10 !== 1.1.0 1.10 is de nieuwste uit de v1-reeks

Ai My bad. Ik dacht dat 't bij 1.9.x zou blijven sinds de 2.x release.

[ Voor 4% gewijzigd door RobIII op 18-06-2013 15:36 ]

[TheNephilim]

RobIII schreef op dinsdag 18 juni 2013 @ 14:31:
Isoleer je probleem dan for Pete's sake eens...

Dat zou de volgende stap zijn, was er dus net achter dat het de Base64 was die roet in het eten gooide. Kwam wat tussen hier op kantoor. Al heb je het wel heel netjes gereduceerd tot het ware probleemgebied, thanks! ^^

Dit is isoleren. Heel die andere meuk is totaal overbodig. Zoals je in je console kunt zien is er niets "geks" _{(niks "optisch" geneuzel »» meten == weten dus gewoon ASCII codes printen!)} aan de hand met "DESC" dus daar ligt 't niet aan. Als je dan een beetje verder kijkt zie je wel dat price 2 nul-bytes bevat... *HINT*

Wow, had eigenlijk verwacht dat een .trim() het een en ander op zou lossen. De \0 heb ik al eerder ruzie mee gehad. Dat was alleen in de php-backend, blijkbaar begon dat hier al dus

console.log(s[i], s.charCodeAt(i)); kende ik nog niet, dat is natuurlijk ideaal om strings goed mee te bekijken. Heb nog wl eens ruzie met strings in JavaScript namelijk

Als ik even die base64.js achterwege laat en atob* gebruik zie je de nul-bytes als sneeuw voor de zon verdwijnen.

* Gecko/WebKit only AFAIK. dus je zult nog wel een (fatsoenlijke) base64 implementatie moeten vinden Of je gebruikt de huidige implementatie en stript eerst de nul-bytes uit de resultstring voordat je er verder iets mee gaat doen.

De base64 heb ik ergens vandaan geplukt en aangepast. Standaard base64 is niet url-safe en dat had ik wel nodig. Als window.atob wel url-safe is, dan kan ik die misschien gebruiken, maar heb wel bredere ondersteuning nodig.

Tjah, wat moet ik verder zeggen, bedankt!

De replace(/\0/g,'') heb ik nu als oplossing gebruikt. Werkt helemaal naar behoren nu, ga nu (eindelijk) eens aan het opschonen. Heb hier al menig middag mee lopen klooien

---

Wat ik trouwens was vergeten aan passen: input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); moet worden input = input.replace(/[^a-z0-9\-_]/gi, "");.

Hij zou moeten voldoen aan de RFC 4648 'base64url' encoding

[ Voor 6% gewijzigd door TheNephilim op 18-06-2013 16:10 ]