2 jQuery problem...

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?

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.

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.

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

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?

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

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.

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).

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).

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.

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?

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).

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å?

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

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?

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.

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?

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 />".

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?

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/