Hi I have a bit of a complex question that I hope has a simple answer, when in sandbox mode and adding a made up customer I get through some of it and the details show in one item, I continue to progress through the website and then a new item is added within the data collection but for the same made up customer, taking two line within the data collection with some blank fields in both items relating to one made up customer? I am unsure as to why this is happening but I need all input details on the same item line as these will be linked to one customer?
I hope someone can help?
@yisrael-wix
You say you add a made up customer, and then progress through the website where a new line is added to the collection. If you are updating the previous information, then you should use .update() on the item and not another .save().
If that’s not it, you’ll have to share your code in order to give us a chance to figure out what’s wrong.
This is fantastic I will trawl through the code and make my updates, update rather than save, many thanks for such a speedy response.
Hi @yisrael-wix ,
so to be asking another question but I am struggling to get a copy of a code to placed within my dataset on the same item in the collection this has sort of worked in the past but isn’t at present, could you have a look at the code and advise where I am going wrong? it seems to only work with save not update or insert?
import wixData from ‘wix-data’;
$w.onReady( function () {
$w(“#html5”).onViewportEnter(() => {
var url = $w(“#url”).value;
$w(“#html5”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=” + url
$w(“#html5”).show();
});
});
$w.onReady( function () {
$w(“#html4”).onViewportEnter(() => {
var url1 = $w(“#url1”).value;
$w(“#html4”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=” + url1
$w(“#html4”).show();
});
});
$w.onReady(() => {
const dataset = $w(“#dataset1”);
dataset.onReady(() => {
const { url, urlQrCode } = dataset.getCurrentItem();
$w(“#html5”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=” + url;
const { url1, url1QrCode } = dataset.getCurrentItem();
$w(“#html4”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=” + url1;
$w(“#dataset1”).setFieldValues({
“urlQrCode”: $w(“#html5”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=” + url,
“url1QrCode”: $w(“#html4”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=” + url1
})
wixData.update(“Details”)
.then((results) => {
let item = results; //see item below
})
. catch ((err) => {
let errorMsg = err;
});
});
});
any help greatly appreciated.
Si
@simonadams A few points:
It is incorrect to have multiple page onReady() event handlers. This can result in unpredictable behavior. You should have only one onReady() which contains all of your page declarations and initialization code.
You don’t have the proper syntax for the .update(). See the .update API for details and examples. When you do an insert() you don’t need an item id - it will be assigned when the item is saved. But for an update(), the database needs to know what item you are updating.
You are using setFieldValues() incorrectly. You need a key and value. You have an expression as the value and you’re trying to set the value as an HtmlComponent (sort of). To be honest, I don’t know what you are trying to do in the setFieldValues().
@yisrael-wix the code has worked in the past but not always as expected, I’m trying to generate a qrcode from the link through the html element and then save the image once it returns to the data collection. Any help would be great. Si
@simonadams What are you trying to do here:
"urlQrCode": $w("#html5").src = "https://api.qrserver.com/v1/create-qr-code/?format=svg&data=" + url,
You can’t set a database field to an HtmlComponent. You can’t just get the “value” of the HtmlComponent (I guess that would be the generated qrcode) by setting it to a variable. In other words, this won’t work:
$w("#html5").src = "https://api.qrserver.com/v1/create-qr-code/?format=svg&data=" + url,
let qrcode = $w("#html5");
You communicate with an HtmlComponent by passing messages. If you really want - or need - to use an HtmlComponent for this, then you should read more about how to use an HtmlComponent. There are also some HtmlComponent examples that might help:
Multiple Markers in Google Maps
Embed Google Map on your site with multiple location markers, marker clustering, and custom controls using the HTML component.
Fullscreen with HTML Component
This example demonstrates the requestFullscreen method of the HTML fullscreen API as used to change a specified element to full screen.
I would suggest trying the qrcode NPM library available from the Wix Package Manager:
I hope this helps. Good luck and have fun!
@yisrael-wix Hi I have manageto set the database field to the generated QR code from the html component and it seems to be being stored appropriately within the data collectio. I would however prefer to utilise a resource such as the QRcode npm module. Which I have tried a number of times to achieve the same result. The npm module seems not to generate QRCodes no matter how I utilise it. I would welcome an example of how to utilise the qrcode module as this I am sure will make many people’s work easier. Si
@simonadams Glad you got it worked out. Is an image (qrcode) being saved or a URL?
As far as an example for the qrcode library, there’s nothing planned right now. NPM libraries aren’t really part of the Wix Code product so the examples that we have now we’re just developed to demonstrate how to use NPM libraries in general.
@yisrael-wix an image is being saved as I set this to the field property and it all Seems to be working well, I will provide the code that works once back on my laptop. Si
As promised this is the code, it may not look pretty or conform to normal code but it does exactly what I need it to do which is to generate a code, show the code on the page in the html component and save it to the dataset as an image I hope it helps others, I hope that you can achieve the same results:
import wixData from ‘wix-data’;
$w.onReady( function () {
$w(“#html5”).onViewportEnter(() => {
var url = $w(“#url”).value;
$w(“#html5”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=”+ url
$w(“#html5”).show();
});
});
$w.onReady( function () {
$w(“#html4”).onViewportEnter(() => {
var url1 = $w(“#url1”).value;
$w(“#html4”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=”+ url1
$w(“#html4”).show();
});
});
$w.onReady(() => {
const dataset = $w(“#dataset1”);
dataset.onReady(() => {
const {url,urlQrCode} = dataset.getCurrentItem();
$w(“#html5”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=”+ url;
const {url1,url1QrCode} = dataset.getCurrentItem();
$w(“#html4”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=”+ url1;
$w(“#dataset1”).setFieldValues({
“urlQrCode”: $w(“#html5”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=”+ url,
“url1QrCode”: $w(“#html4”).src = “https://api.qrserver.com/v1/create-qr-code/?format=svg&data=”+ url1
});
$w.onReady(() => {
$w(“#dataset1”).save()
.then( (item) => { let
urlQrCode = item.urlQrCode,
url1QrCode = item.url1QrCode
});
});
});
});
@simonadams You have multiple page onReady() event handlers. There really should only be one - otherwise behavior can be unpredictable.
Your setFieldValues() code really doesn’t make sense to me. But, if it works, who am I to argue.