webForumDet fria alternativet
Logga in / Bli medlem

2 jQuery problem...

JavaScript

46 svar · 1 894 visningar · startad av ramo_and

ramo_andMedlem sedan nov. 2010214 inlägg
Frågan#1

Ledsen att behöva starta ytterligare en tråd här men har stött på 2 nya problem som jag skulle behöva lösa...

Problem 1:
Jag vill att ett element skall ändras då jag klickar på "köpknappen" i webbutiken som jag håller på med. Det fungerar nästan, det är bara det att när man köper något så laddas sidan om och då försvinner den styling jag lagt till med jQuery. Min kod ser ut såhär:

<script type="text/javascript">
$(document).ready(function(){
  $(".buyimage").click(function(){
    $(".smallbasket_title").attr("padding: 0 0 0 28px");
  });
});
</script>

Det funkar liksom just i klickmomentet, men sen försvinner det. Måste man lägga till nån kod för att stylingen skall stanna kvar?

Problem 2
Jag försöker göra en enkel tab-meny med jQuery och för det har jag faktiskt tagit kod från vår hemsida och bara ändrat klassnamnen. Men de funkar så klart inte. Så här ser jQueryn ut:

<script type="text/javascript">
$(document).ready(function() {
$(function(){
  $("#tab_menu_menu li a").click(function(){
    $("#tab_menu_menu li a").removeClass("active");
    $(this).addClass("active");
    $("#tab_content > div").hide("fade");
    $($(this).attr("href")).show("fade");
    return false;
  });
});
</script>

Jag har även inkluderat ett extra script för detta:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Html-strukturen ser ut så här:

<div id="tab_menu">
  <ul id="tab_menu_menu">
    <li class="tablink1"><a class="active" href="#tab1">Betalningsalternativ</a></li>
    <li class="tablink2"><a href="#tab2">Före ditt köp</a></li>
    <li class="tablink3"><a href="#tab3">Efter ditt köp</a></li>
    <li class="tablink4"><a href="#tab4">Övrigt</a></li>
  </ul>
  <div id="tab_content">
    <div id="tab1" style="display: block;">
      innehåll
    </div>
    <div id="tab2" style="display: none;">
      innehåll
    </div>
    <div id="tab3" style="display: none;">
      innehåll
    </div>
    <div id="tab4" style="display: none;">
      innehåll
    </div>
  </div>
</div>

Ni kan se hur det fungerar bra här: https://www.nordicbrand.com

Vad gör jag för fel?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#2

Problem1: Ja, den gör ju rätt, den laddar sidan för du gör en postning till ett formulär, som jag skrev i din förra tråd: Det gå att lösa, med AJAX. Annars måste du sparar ner den i en cookie och sen kör igenom alla cookies på sajten för att hitta vilka den skall sätta paddingen på, känns omständligt.

Problem2: Vad fungera inte?

    $("#tab_content > div").hide("fade");
    $($(this).attr("href")).show("fade");

Det känns som du behöver sätta en tid på det, läs dokumentationen: http://docs.jquery.com/UI/Effects/Fade

Sen måste jag säga, är lite frustrerande på det sätt du jobbar, hoppar på andra delar innan du har löst dina andra trådar/problem. Känns som du kommer bygga upp ett berg av problem istället för att gå på det direkt och försöka lösa det.

ramo_andMedlem sedan nov. 2010214 inlägg
#3

Ok får försöka plugga lite AJAX då.. Det bästa vore om jag kunde få till en if sats där stylingen ändras bara om kunden har några varor i varukorgen. Men det är väl ännu svårare antar jag?

Jag provade att sätta tid, funkar inte. Fattar inte varför när det funkar fint på vår andra sida..

Ja det är väl inte ett optimalt arbetssätt faktiskt, men sidan måste bli klar nu och detta är dom sista grejerna jag måste fixa. Men du har rätt, det är inte smart att bygga upp ett berg av problem..

Det är också dumt att sidan inte ligger uppe ännu, för det att blivit mycket lättare att visa vad som är fel o så då. Förhoppningsvis kommer den upp denna veckan iaf.

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#4

Vad säger firebug? Får du något felmeddelnade?

ramo_andMedlem sedan nov. 2010214 inlägg
#5

Det är konsolen man ska aktivera i firebug va? Har gjort de o där säger den ingenting. Men om jag klickar på script så står det att det är fel på rad 17 i jquery.ui-min.js-filen. Verkar ju lite konstigt för den borde väl vara testade om den kommer från googleapis?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#6

kollade på din JS kod, du har skrivit fel:

$(document).ready(function() {
$(function(){

Det är samma sak dessa två rader, fick fel direkt när jag tog din kod som du har gett, plockade bort

$(document).ready(function() {

Och det fungerade klockrent.

Ett tips är att spara ner $("#tab_menu_menu li a") i ett objekt, då du kör den varje gång för att få en kollektion, så slipper din kod letar upp alla #tab_menu li a varje gång du kör onclick

ramo_andMedlem sedan nov. 2010214 inlägg
#7

Aah just jag la till det när de inte funkade för att testa om de hjälpte men de gjorde det inte o så glömde jag ju att ta bort det sen.

Nu tog jag bort document.ready som du skrev men de funkar fortfarande inte... mycket märkligt tycker jag.

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#8

Inkludera du inte jquery alls? du måste ha jquery tillsammans med jquery-ui. Vilken version av jquery körs?

Det ända jag kan tänka mig som är fel som du gör är att du försöker köra jquery innan den har laddats in för det fungera på: http://jsbin.com/ahitu4 (redigerade om din js kod lite, men funktionen är densamma).

ramo_andMedlem sedan nov. 2010214 inlägg
#9

Det är jquery version 1.4.2 som inkluderas i HEAD-tagen. Det är textalk själva som gör det.
All min egen jquery laddas efter den i sidhuvudet (inte HEAD).

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#10

laddas content in med ajax eller vad är det som händer?

Om jag kollar på din kod som du skickade i förra tråden så ser jag att du laddar in jquery-ui före du laddar in jquery

som de gör:

<script type="text/javascript" src="http://shop.textalk.se/js/Shop.min.js"></script><script type="text/javascript">//<![CDATA[
if (typeof jQuery == 'undefined') window.webshop.loadScript('jquery');
// ]]></script>

ett par rader längre ner, det kommer inte fungera.

när man kör dina koder i firefox med firebug så får jag följande felmeddelande:

jQuery is not defined
[Break on this error] e[d][1].apply(g.element,a)}},contains:...b.ui.isOverAxis(e,d,i)}})}})(jQuery);
jquery-ui.min.js (rad 17)
syntax error
[Break on this error] });</TD><TD CLASS="twsupper"><script type="text/javascript">\n

Så det är inte konstigt att koder inte fungera som det skall.

ramo_andMedlem sedan nov. 2010214 inlägg
#11

Nu funkar det! Tackar!

Jag skulle dock mycket gärna vilja fixa till varukorgen. Det jag helst skulle vilja ha är som det är på hemmabutikerna

http://www.webshop.hemmabutikerna.se/prisfest-c-191-1.aspx

Går det att göra med javascript/ajax/jquery eller nåt utifrån den htmlstruktur som jag kan se? Eller måste man kunna gå ner djupare i koden för att lösa det?

Om det inte går, så skulle jag vilja göra det möjligt att kundkorgen kan stylas lite annorlunda när det ligger varor i den. Går det att göra?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#12

båda sakerna du be om gå, men det är rätt "mycket jobb" att göra det, postar "lägg till varukorg" skriptet med AJAX, få en response tillbaka från AJAX, ta html strukturen från response datan, ersätt den gamla fältet med det nya varukorgsfältet ifrån response datan. Så hade jag gjort det, även om det är teoretiskt så fungera det (har gjort det tidigare).

ramo_andMedlem sedan nov. 2010214 inlägg
#13

Ajfan då... Lär ju tar år o dar för mig då som inte kan nån ajax alls.. finns de nån bra tutorial eller så som jag skulle kunna titta på?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#14

Antingen lär du dig AJAX från scratch, men jquery underlätta allt med ajax: http://api.jquery.com/category/ajax/

ramo_andMedlem sedan nov. 2010214 inlägg
#15

Ok, tack för tipset :)

Har andra två snabba frågor:

1. Om ett element t ex. har padding-left: 0px o så ändra jag det till padding-left: 20px med jQuery så visas de först med padding-left: 0px i kanske 0,5 sek o sen blir de padding-left: 20px. Finns det nåt sätt att åtgärda det så att man ser det med padding-left: 20px direkt när sidan laddas?

2. Kan man göra en insertAfter/appendTo på en <br/> tag i en text med jquery? t ex efter ett visst ord så skall en radbrytning komma?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#16

1. Ja, kör jquery skriptet så fort elementet finns, utan att vänta på DOM-Ready
2. appendTo gå nog inte, eller det lär väl gå men kommer nog ställa till en hel del problem, men insertAfter, så länge du kan hitta rätt <br /> så kan du göra vad du vill med den, att söka upp ord i text: Regex och köra en replace på det.

ramo_andMedlem sedan nov. 2010214 inlägg
#17

aa fast de ja menade var att jag vill "inserta" en br-tag efter ordet "vara" i varukorgen tex. det är alltså bara text där utan någon <br>. Det kanske inte går?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#18

ja, det gör du med regex.
hitta elementen du vill ha en linebreak på med jquery, ta dess html, leta upp ordet "vara" (regex (\bvara\b)) och ersätt med "$1<br />".

ramo_andMedlem sedan nov. 2010214 inlägg
#19

Jag googlade lite och gjorde ett eget försök på detta men de gick ju inte så bra.. min kod ser ut såhär:

<script type="text/javascript">

$(".linkbasket").regexp("\bvara\b").replaceWith("$1<br>");

</script>

Vad är fel?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#20

nej, det är fel, $(".linkbasket") retunera ett jquery objekt, du får loopar igenom hela kollektionen (se $.each) och ta dess orginal HTML och ersätt ogrinal html med den nya formaterade html

eller om du kör den senaste versionen av jquery så kan du använda dig av en funktion direkt i html http://api.jquery.com/html/

276 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
119 ms — deklarationer (db)
0 ms — hämta statistik (cache)
145 ms — hämta tråd, inlägg och bilagor (db)
129 ms — ändringar (db)