Etikettarkiv: jquery

WordPress 5.7 kommer snart och med den versionen kommer en stor förändring

WordPress 5.7 är beräknat att släppas den 9 mars och blir då den första stora releasen av WordPress under 2021. En stor förändring är att det tas ett stort jQuery-kliv från version 1.12.4 till 3.5.1.

Vad är jQuery?

jQuery är ett javascript-bibliotek. Många av de funktioner som finns i WordPress och dess teman/tillägg är beroende av jQuery och det är därför en viktig del av hemsidor som är byggda med WordPress.

Varför genomförs denna uppdatering från utvecklarna av WordPress?

Den nuvarande versionen av jQuery som används av utvecklarna är sedan länge ansedd som utdaterad och osäker. Denna uppdatering kommer utöver den ökade säkerheten också göra din WordPress-installation mer effektiv nu när gammal kod byts ut mot ny och modern. Arbetet med att byta ut jQuery påbörjades redan med WordPress 5.5 och i och med version 5.7 slutförs arbetet. 

Påverkar uppdateringen just min hemsida och kan jag göra något för att förbereda mig?

I och med att man redan i WordPress 5.5 påbörjade arbetet borde du redan ha upptäckt om exempelvis menyer, tillägg etc inte har fungerat på din hemsida. Fungerar allt som det ska idag och du har den senaste versionen av WordPress (5.6.1 i skrivande stund) kommer du troligen inte att märka av denna uppdatering. 

Om du i dagsläget har en WordPress-version före 5.5 men planerar att uppdatera till senaste versionen av WordPress (alltid rekommenderat) kan det vara bra att du redan nu kikar igenom din hemsida. Detta gör du genom att installera tillägget Enable jQuery Migrate Helper på din WordPress-sida. Tillägget kan redan nu kika igenom din sida och varna dig om den innehåller något som just nu är beroende av den äldre jQuery-versionen.

Om du redan har uppdaterat till 5.5 och upplever att din sida uppför sig märkligt kan du i detta tillägg också välja att ställa in så att sidan körs på den gamla versionen av jQuery. Detta är dock enbart rekommenderat som en nödlösning medan du lagar/byter ut de delar av sidan som är beroende av den äldre jQuery-versionen.

Utvecklarna av jQuery Migrate Helper har flaggat för att de troligen inte ser någon vidareutveckling av tillägget utan att du framöver istället bör se till att de teman och tillägg du använder är uppdaterade för den nyare jQuery-versionen som WordPress använder från och med version 5.7.

Kan Loopias support hjälpa mig med detta?

Att felsöka och uppdatera din WordPress-sida bör i första hand utföras av dig som har installerat och administrerar sidan. Om ett tema eller tillägg inte fungerar korrekt i senare versioner av WordPress bör supporten för respektive tema/tillägg kontaktas i första hand.

Loopias support kan hjälpa till med att felsöka varför din hemsida inte fungerar eller installera tillägget, men om din hemsida kräver ett större arbete för att anpassas till senare versioner av WordPress och du själv känner att du inte har kunskapen rekommenderar vi att du anlitar en WordPress-utvecklare/webbyrå. 

Hör gärna av dig till vår återförsäljaravdelning på af@loopia.se så kan vi förmedla kontakt med en duktig WordPress-utvecklare från vårt nätverk av nära 4 000 webbyråer.

Dela detta inlägg:

Världens bästa påskpyssel med jQuery

Eftersom jag inte fick några kommentarer på min utmärkta SQL-skola så tänkte jag försöka hitta något lite mer hippt och inne att skriva om så här till påskhelgen. 😉

Vad passar då bättre än en artikel om det enormt härliga JavaScript-biblioteket jQuery som på egen hand gjort att klient-baserad programmering på webben har gått från att vara timtal av frustration och nya gråa hårstrån funna under varje kaffepaus, till att frammana mentala bilder av guld, rökelse och myrra.

För att göra det hela ännu roligare så tänkte jag visa hur man på ett enkelt sätt kan använda jQuery för att göra AJAX-baserade sökningar mot en webservice som vi lagt upp så att ni har något att testa mot.

För att använda jQuery så börjar man med att lägga till följande kodsnutt i <head>-sektionen av sitt HTML-dokument:

<script type="text/javascript"
   src="/js/jquery/jquery-1.2.1.min.js">
</script>

En av de fina sakerna med jQuery är alla plugins man kan nyttja. I vårt fall kommer vi använda en plugin som heter jquery.suggest, vilken kräver att man också inkluderar jquery.dimensions.js från jQuery UI, som är ett underprojekt som tillhandahåller en rad med användbara komponenter för att bygga användargränssnitt, så vår kodsnutt för att inkludera allt godis ser ut som:

<link rel="stylesheet" type="text/css"
   href="/js/jquery/jquery.suggest.css" title="" media="screen" />
<script type="text/javascript"
   src="/js/jquery/jquery-1.2.1.min.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.ui-1.0/jquery.dimensions.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.suggest.js">
</script>

För att sedan göra om ett sökfält som har id=”domainsearch” och finns någonstans på vår sida till en AJAX-sökruta så använder vi följande kodsnutt:

$(document).ready(function() {
   $("#domainsearch").suggest("/search.php", {
      onSelect: function() {
         domain = this.value.replace(/^([^:]*):.*$/, "$1");
         status = this.value.replace(/^[^:]*:\s*(.*)$/, "$1");
         if (status == "ledig") {
            document.location.href =
               'https://www.loopia.se/bestall/bestalldoman/'
                  + domain;
         }
      }
   });
});

Detta exempel visar två koncept som är viktiga i jQuery. Först och främst så är det en bra vana att man lägger till den funktionalitet som man vill utöka sidan med på formen:

$(document).ready(function() {
   ... användbar funktionalitet här
});

När man gör på detta sätt så körs inte koden förrän sidan är helt färdigladdad, vilket oftast är önskvärt.

Det andra konceptet som visas upp är användandet av jQuery’s selector-funktionalitet för att välja vilka element som en eller flera funktioner ska appliceras på.

I detta fallet väljer vi att applicara funktionen suggest() på alla element som matchar (med CSS-syntax, se fullständig dokumentation här) #domainsearch, vilket betyder ”alla element med id satt till domainsearch”.

Funktionen suggest (vilket är vad jquery.suggest lägger till) tar en URL som ska anropas med XMLHttpRequest i bakgrunden samt ett antal parametrar, en av vilka är onSelect. onSelect anger vilken JavaScript-funktion som ska anropas när användaren har valt en rad ur sökresultatet.

Sökresultatet består av utmatningen från den anropade URL:en. Utmatningen ska ha en sökträff per rad.

Vi väljer att returnera sökresultat på formen:

doman.se:  ledig
doman.com: upptagen
doman.nu:  ledig

… och anger sedan i onSelect-funktionen att man ska skickas till vår beställningssida med domänen förvald om man väljer en ledig domän från sökresultaten.

För att mata denna lilla kodsnutt med data så använder vi oss av följande PHP-kod (sparad som search.php):

<?
   try {
      $client = new
         SoapClient('http://ws.loopia.se/LoopiaPublicServices.wsdl');

      $results = $client->search_domain_popular_tlds($_GET['q']);
         if ($results && count($results) > 0) {
            foreach ($results as $result) {
               if ($result->result == "FREE") {
                  echo $result->domain . ": ledig\n";
               } else {
                  echo $result->domain . ": upptagen\n";
               }
            }
         }
      } catch (Exception $e) {
         // Ignore exceptions, this simply means that no
         // results will be echoed to the user.
      }
?>

Ni kan ladda ned ett fullständigt exempel som bör fungera om ni bara packar upp det och laddar upp det i public_html för en domän eller subdomän hos oss.

Exemplet hittar ni också på http://sigint.se/.

Vad kan man mer göra med jQuery då? Ett vanligt användningsområde för JavaScript är att dölja och visa element när användaren gör något, t ex klickar på en knapp.

Istället för att böka med kod som:

var element = document.getElementById('someid');
if (element != null) {
	element.style.display = "none";
}

… och kämpa för att sedan få den att fungera i alla moderna webbläsare så använder man istället:

$("#someid").hide();
$("#someid").show();
$("#someid").toggle();

… med mera.

På så sätt kan man naturligtvis även använda andra selectors som t ex för class och mycket annat användbart.

Så gott som alla funktioner i jQuery, inklusive de ovan, returnerar ett nytt jQuery-object – så det går bra att kedja anropen om man vill göra flera saker med samma element. T ex:

$("#someid").fadeIn("slow").fadeOut("slow");

Vi har inkluderat lite test-animationer i exempelfilen ovan.

Hoppas att detta gett er lite kul inspiration att leka med över ledigheten.

Glad påsk!

Dela detta inlägg: