1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Hur inför man text genom enbart kod?

Svara
  • 1
  • 2
2024-07-20, 18:06
  #1
Finikanten
Medlem
Finikantens avatar
Jag använder den här koden för att föra in text i databasen men den funkar av någon anledning inte utan att vara kopplad till ett dataset. Problemet med datasetkoppling är att datasetet prioriterar min textbox inbyggda och begränsade funktion för att fejda ut text (använder animationer medan jag vill använda setTimeout). Min valda fade-tid som jag får genom fadeOptions blir helt enkelt ignorerad och detta trots att jag har valt "No fade" i textboxens animationssystem. Det funkar inte heller genom att koppla ifrån "textsuccess"-elementet från datasetet för då får jag ingen successtext alls. Sjukt störigt så har någon en kod som gör att man slipper använda ett dataset?

Kod: 
export function textsubmit_click(event) {
       wixData.get("Members", _owner.id)
          .then((item) => {
           item.description = ($w('#textBox2').value),
           wixData.update("Members", item);    
       if ($w("#textsuccess").hidden) {
           $w("#textsuccess").show('fade', fadeOptions)
     } else {
           $w("#textsuccess").hide('fade', fadeOptions)
           $w("#dataset6").save();
           console.log("added image");
   }
 })
}
__________________
Senast redigerad av Finikanten 2024-07-20 kl. 18:15.
Citera
2024-07-20, 20:00
  #2
Methos
Medlem
Till att börja med är ju Dataset i detta fallet bara en container, det är en array/lista. Såklart du förlorar ditt element om du tar bort den från denna array, eller hur?

Det är i Wix du skriver i, eller hur?

Vad vill du sedan göra?
Du skriver att du vill skriva till en databas/collection, vilket din kod;
Kod:
item.description = ($w('#textBox2').value), 
visar att du vill. Här hämtar du värdet i #textbox2 och för in det i obj.decription (om denna ens är okej?).

Men din föregående kod säger något helt annat.
Kod:
export function textsubmit_click(event) {
       wixData.get("Members", _owner.id)
          .then((item) => {} 

Här hämtar du en post i din "Collection" (det skriker SQL-backend om detta tilltag) när du trycker på en knapp. Du har valt att hämta en enda post från Members med _owners.id. Funktionen get() returnerar objektet Promise som troligen är ett Dataset i grunden; Dict/Json (eller vad vi nu vill kalla det). Så hur du än gör kommer du att få en Dataset mot dig.

Antingen hämtar du en post i Mebers:

Kod: 
export function textsubmit_click(event) {
       wixData.get("Members", _owner.id)
          .then((item) => {
           ($w('#textBox2').text = item.description,
           
      })
  .catch((err) => {

    console.log(err);

  });


}


Eller så skriver du till databasen:
Kod: 
let toInsert = {

  title: ($w('#textBox_title').text,
  first_name: ($w('#textBox_fname').text,
  last_name: ($w('#textBox_lname').text,
};

wixData.insert("myCollection", toInsert)
  .then((item) => {
    console.log(item); 
  })
  .catch((err) => {
    console.log(err);
  });


Vill du uppdatera en befintlig post:

Kod: 
let toInsert = {
  id: $w('#textBox_id').text,
  title: ($w('#textBox_title').text,
  first_name: ($w('#textBox_fname').text,
  last_name: ($w('#textBox_lname').text,
};

wixData .update("myCollection", toUpdate)
  .then((results) => {}
  .catch((err) => {

    console.log(err);

  });

Givetvis kan du göra en massa logik som att du kontrollerar om du har posten i din DB och sedan uppdaterar eller skriver till den beroende på om den finns eller inte. MEN du kan inte mixa dessa instruktioner i samma kodsnutt som du gjorde.


__________________
Senast redigerad av Methos 2024-07-20 kl. 20:10.
Citera
2024-07-20, 20:41
  #3
Finikanten
Medlem
Finikantens avatar
Stort tack för din respons. Med "wixData.get("Members", _owner.id)" ville jag visa att det handlar om databasen Members och "currently logged in user" (_owner). Dina exempel kommer till användning när jag ska försöka fixa till detta men vad tror du det beror på att texten blir inlagd men successtexten visas inte?
__________________
Senast redigerad av Finikanten 2024-07-20 kl. 20:43.
Citera
2024-07-20, 21:06
  #4
Methos
Medlem
Citat:
Ursprungligen postat av Finikanten
Stort tack för din respons. Med "wixData.get("Members", _owner.id)" ville jag visa att det handlar om databasen Members och "currently logged in user" (_owner). Dina exempel kommer till användning när jag ska försöka fixa till detta men vad tror du det beror på att texten blir inlagd men successtexten visas inte?

Ja du, troligen har det att göra med TexBox.show(effect, Effectoptions)
Du har satt TextBox.show("fade", FadeOptions), men du ger mig inte Dicten som du har skapat här.
Jag skulle kolla där först.
Sedan skulle jag bryta ut hela den där if-satsen från .get(){}, och lägga den efter din hämtning är klar.
Nu ligger if-satsen i get()-funktionen, vilket kan skapa en del intressanta beteenen.


(Det här är en av anledningarna till att jag absolut vägrar att se en blandning mellan backend och frontend).
Citera
2024-07-20, 21:09
  #5
Finikanten
Medlem
Finikantens avatar
Något jag inte förstår med din insert-kod är hur databasen ska veta vilken användare texten ska läggas in till i databasen utan wixData.get("Members", _owner) eller wixUsers.currentUser.id?
Citera
2024-07-20, 21:13
  #6
Finikanten
Medlem
Finikantens avatar
Citat:
Ursprungligen postat av Methos
Ja du, troligen har det att göra med TexBox.show(effect, Effectoptions)
Du har satt TextBox.show("fade", FadeOptions), men du ger mig inte Dicten som du har skapat här.
Jag skulle kolla där först.
Sedan skulle jag bryta ut hela den där if-satsen från .get(){}, och lägga den efter din hämtning är klar.
Nu ligger if-satsen i get()-funktionen, vilket kan skapa en del intressanta beteenen.


(Det här är en av anledningarna till att jag absolut vägrar att se en blandning mellan backend och frontend).

Ja din hypotes låter logisk så jag får prova mig fram men vad menar du med "Dicten"?

Är det så här du menar att jag bör skriva istället?

Kod: 
let fadeOptions = {
 "duration": 1000,
 "delay": 500
};

export function textsubmit_click(event) {
       wixData.get("Members", _owner.id)
          .then((item) => {
           $w('#textBox2').value = item.description,
           $w("#dataset6").save();
           console.log("added image");
       if ($w("#textsuccess").hidden) {
           $w("#textsuccess").show('fade', fadeOptions)
     } else {
           $w("#textsuccess").hide('fade', fadeOptions)
  }
})
      .catch((err) => {

          console.log(err);
});
}
__________________
Senast redigerad av Finikanten 2024-07-20 kl. 21:26.
Citera
2024-07-20, 21:27
  #7
Methos
Medlem
Citat:
Ursprungligen postat av Finikanten
Ja din hypotes låter logisk så jag får prova mig fram men vad menar du med "Dicten"?

Kolla de låghängande frukterna. Men vännen, dessa diskussioner vi tar upp här och i de 10 andra trådarna är kraftigt förenklade baskunskaper. Hur har du lyckats programmera detta ramformat i flera år?

Nåja, lite sidospår.

En Dict -Dictionary är en datatyp precis som String, Integer, List, Array osv.

Det jag kallar Dict/Dictionary är datastruktur {Key:Value}, dvs ett uppslagsverk!
Du stoppar in en nyckel och får dess information.
I webb kallas dessa ofta för Json, som ofta är en lista av {Key:Value}

I Java, Javascrpt, Winx osv är detta:

Kod:
let fadeOptions = {
  duration: 2000,
  delay: 1000,
}; 

Just
{ Key: Value, Key1: Value}

TextBox.show("fade", { duration: 2000, delay: 1000})

Kolla att du verkligen har denna fadeOption på det här sättet ovan.
Citera
2024-07-20, 21:58
  #8
Finikanten
Medlem
Finikantens avatar
Citat:
Ursprungligen postat av Methos
Kolla de låghängande frukterna. Men vännen, dessa diskussioner vi tar upp här och i de 10 andra trådarna är kraftigt förenklade baskunskaper. Hur har du lyckats programmera detta ramformat i flera år?

Nåja, lite sidospår.

En Dict -Dictionary är en datatyp precis som String, Integer, List, Array osv.

Det jag kallar Dict/Dictionary är datastruktur {Key:Value}, dvs ett uppslagsverk!
Du stoppar in en nyckel och får dess information.
I webb kallas dessa ofta för Json, som ofta är en lista av {Key:Value}

I Java, Javascrpt, Winx osv är detta:

Kod:
let fadeOptions = {
  duration: 2000,
  delay: 1000,
}; 

Just
{ Key: Value, Key1: Value}

TextBox.show("fade", { duration: 2000, delay: 1000})

Kolla att du verkligen har denna fadeOption på det här sättet ovan.

He he, citationstecknen fick jag genom den här sidan och ja jag har nästan kod-dyslexi så det tar lång tid att greppa hur det mesta hänger ihop.

https://ninotutorials.wixsite.com/cr...nners-wix-code
Citera
2024-07-20, 22:09
  #9
Methos
Medlem
Citat:
Ursprungligen postat av Finikanten
Något jag inte förstår med din insert-kod är hur databasen ska veta vilken användare texten ska läggas in till i databasen utan wixData.get("Members", _owner) eller wixUsers.currentUser.id?

Vi tittar på koden igen:

Kod:
let toInsert = {
  id: $w('#textBox_id').text,
  title: ($w('#textBox_title').text,
  first_name: ($w('#textBox_fname').text,
  last_name: ($w('#textBox_lname').text,
}; 

toInsert är här en Dict (eller Has-table som Java vill att det kallas)
Som du ser innehåller den nycklarna id, title, first_name, last_name.
Som du ser har vi ID i dicten.

Kod:
wixData .update("myCollection", toUpdate)
  .then((results) => {}
  .catch((err) => {

    console.log(err);

  }); 

Här sätter du in hela dicten i update() och den funktionen kommer att sedan leta upp ID och uppdatera det som behövs uppdateras.

wixData.insert() behöver inte ha något ID i sin hashtabell/dict för funktionen kommer att skapa ett ID själv. Du sätter ju in en ny post i databasen så du har ju inga referenser i databasen. Men du kan givetvis sätta in ID själv, genom samma procedur som för update(), då får posten en fast ID som du har satt.
Du ska inte uppdatera befintlig post med insert()




Citat:
Ursprungligen postat av Finikanten

Är det så här du menar att jag bör skriva istället?



Nja, jag menade mer att jag inte såg dina egna data i fadeOptions.

Med narmare eftertanke är nog ifsatsen bra där den är. MEN

Vi kolla på den:
Kod: 
 
export function textsubmit_click(event) {
         wixData.get("Members", _owner.id)
                      .then((item) => {
                                $w('#textBox2').value = item.description,
                                        $w("#dataset6").save();
                                         console.log("added image");
                                                     if ($w("#textsuccess").hidden) {
                                                         $w("#textsuccess").show('fade', fadeOptions)
                                                         }  
                                         else {
                                                    $w("#textsuccess").hide('fade', fadeOptions)
                                                  }
                                     

	
	



                                          })
                                .catch((err) => {
                                           console.log(err);
                                             });


	
	



}

Vad händer här?
Ta en stund funderare över vad en här koden säger tillsammans med den övriga funktionen.
Citera
2024-07-20, 22:18
  #10
Finikanten
Medlem
Finikantens avatar
Avsikten är ju att textelementet $w("#textsuccess") först ska dröja i 500 millisekunder och när det sedan visas ska det fejda bort efter 1000 millisekunder. Eftersom det är hidden från början så har jag lagt in detta:

if ($w("#textsuccess").hidden) {
$w("#textsuccess").show('fade', fadeOptions)

När det väl visas så gör } else {
$w("#textsuccess").hide('fade', fadeOptions) att texten börjar fejda bort först efter att den har gjorts synlig genom den övre koden.

Men det var en smart reflektion av dig som jag tror stämmer. Hur bör jag då skriva istället för att båda funktionerna ska kicka in utan problem?

Jag har som sagt hämtat min kod från någon annan som skrev på just detta sättet:

export function button1_click(event) {
//Add your code for this event here:
if ($w("#image1").hidden) {
$w("#image1").show('fade', fadeOptions)
} else {
$w("#image1").hide('fade', fadeOptions)
}
}
__________________
Senast redigerad av Finikanten 2024-07-20 kl. 22:23.
Citera
2024-07-20, 22:26
  #11
Methos
Medlem
Citat:
Ursprungligen postat av Finikanten
Avsikten är ju att textelementet $w("#textsuccess") först ska dröja i 500 millisekunder och när det sedan visas ska det fejda bort efter 1000 millisekunder. Eftersom det är hidden från början så har jag lagt in detta:

if ($w("#textsuccess").hidden) {
$w("#textsuccess").show('fade', fadeOptions)

När det väl visas så gör } else {
$w("#textsuccess").hide('fade', fadeOptions) att texten börjar fejda bort först efter att den har gjorts synlig genom den övre koden.

Jag har som sagt hämtat min kod från någon annan som skrev på just detta sättet:

export function button1_click(event) {
//Add your code for this event here:
if ($w("#image1").hidden) {
$w("#image1").show('fade', fadeOptions)
} else {
$w("#image1").hide('fade', fadeOptions)
}
}




Nej, så fungerar inte en jämförelse.
koden bakom din text råder:
jämför a och b
om olika, hoppa till "else"

Det betyder att if och else hör ihop och är en del av samma funktion. Det är två syskon om man så vill.
Om du har uppfyllt jämförelsen i if() så kommer händelsen under if() att triggas. När den är klar så hoppar maskinen ur denna kodsnutt och vidare bort från if-else. Else kommer alltså inte att triggas av att din show()-funktion släpper efter 500 milisekunder.

I ditt sista exempel har vi en liten "lysknapp"; när du trycker på knappen kollar if-else om ($w("#image1").hidden =true (dvs gömnd). Den visar sedan ($w("#image1"). Nästa gång du trycker på knappen är ju ($w("#image1")=false, synlig, och därför går "else" in och gör den ($w("#image1").hidden =true. Nästa gång du trycker så är ju ($w("#image1") gömd och då blir den synlig osv.



Och buggen du har just nu är att du nog inte säkert vet om din ($w("#textsuccess").hidden) verkligen är ställd med .hidden =true (dvs gömd från första början). Anledningen till att den inte syns är just för att den är gömd från start.
Annars skulle du få ett felmeddelande om din fadeObjets inte finns tillgänglig.
__________________
Senast redigerad av Methos 2024-07-20 kl. 22:32.
Citera
2024-07-20, 22:30
  #12
Finikanten
Medlem
Finikantens avatar
Citat:
Ursprungligen postat av Methos
Nej, så fungerar inte en jämförelse.
koden bakom din text råder:
jämför a och b
om olika, hoppa till "else"

Det betyder att if och else hör ihop och är en del av samma funktion. Det är två syskon om man så vill.
Om du har uppfyllt jämförelsen i if() så kommer händelsen under if() att triggas. När den är klar så hoppar maskinen ur denna kodsnutt och vidare bort från if-else. Else kommer alltså inte att triggas av att din show()-funktion släpper efter 500 milisekunder.

Och buggen du har just nu är att du nog inte säkert vet om din ($w("#textsuccess").hidden) verkligen är ställd med .hidden =true (dvs gömd från första början). Anledningen till att den inte syns är just för att den är gömd från start.
Annars skulle du få ett felmeddelande om din fadeObjets inte finns tillgänglig.

Jag har kollat efter och textelementet är gömt (hidden) så det kan inte vara problemet. Hur tycker du att jag bör skriva koden istället?
Citera
Svara
  • 1
  • 2

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in