I am trying to remove an embedded HTML component from a dynamic page if it is empty (no src URL in the database). Is there a way to do this? What I have setup is an embedded HTML dynamically pulling a provided URL based on the artist to display their Spotify, Soundcloud and Tunein embed player. But if there is not a URL provided for any of the items I get a Wix error, obviously because the component wants a URL. I can hide and collapse the component, but not sure how to properly deal with this type of error. I’m assuming removing the component if empty would be a good practice. But couldn’t find any info.
Any help would be appreciated.
Thanks for getting back, that was actually one of the tutorials I came across to help me hide the embed html component on the dynamic page. But I still get an error message in the console because the component is still technically there with an empty src url. I can get it to hide and collapse if there is no url provided in the dataset. Just wondering if there is a way to completely delete or remove the component from the page onload if the src url is undefined or null? Or if the error is really not a big deal when the site is live?
@jvirgen05 - Did you find a solution for this?
Perhaps consider assigning a URL to the HTML component (through your code) if the src is null to avoid the error. Since it is hidden, the URL used shouldn’t matter. That is if you are concerned about the error
Yeah, in a way. It’s been a while since I worked on it so give me a moment to look at my code.
Thanks for your suggestion. It’s been a while since I worked on this but I believe my intention was to (delete element) not have anything at all when the url is empty but include and display element when a url is. So for example if an artist doesn’t have a spotify or soundcloud account to link to, then that section is empty on the page versus an artist that does have a spotify playlist, then the link is added in the database so the html element can display on the page. That way I can save on load times for artist that don’t have urls.
Here is the code, I tried to simplify it since I actually set this up to work with multiple tabs and switch between different elements like, Spotify, Soundcloud, Bio, Youtube etc. But this should work if you are just trying to display one element.
$w.onReady(function () {
$w("#dynamicDataset").onReady( () => {
//Connects dynamic item to the Dataset you pull info from, while getting the URL from the column the data nest in
const itemUrl = $w('#dynamicDataset').getCurrentItem().spotifyPlaylistUrl;
//The HTML element with an ID name of #htmlSpotify, that we are dynamically adding the src URL
$w('#htmlSpotify').src = itemUrl;
// Checks if the current item has a value in the "spotifyPlaylistUrl" field
var item = $w("#dynamicDataset").getCurrentItem();
//Create an IF statement to deal with undefined (no URL), which if its true, then we collapse the HTML element
if (item["spotifyPlaylistUrl"] === undefined) {
// Collapses the HTML element if there is no value for "spotifyPlaylistUrl" so that there isn't an empty box taking up space and anything below this will shift upward. Plus we display a message/text to user
$w("#htmlSpotify").collapse();
$w("#textNoMessage").show();
} else {
$w("#htmlSpotify").src = itemUrl;
$w("#htmlSpotify").expand();
$w("#htmlSpotify").show();
$w("#textNoMessage").hide();
}
} );
});
let fadeOptions = {
"duration": 200,
"delay": 800
};
let fadeOutOptions = {
"duration": 90,
"delay": 0
};
Yes - I was hoping you had found a solution to delete the element so that the code isn’t shown. The collapse and hide functions are nice from a User Experience perspective, but the source code is still there. That is my issue.
Yeah, I couldn’t find a way to actually delete the component if there was no url being dynamically added. But I was able to deal with the error message and hide the html elment. So at least the page isn’t loading up a hidden placeholder url or keep getting an error (its basically an empty DIV that is hidden until a URL is provided on the backend).
Hello,
Anybody got a solution? I have successfully managed to collapse 3 components using the code written here, populated with different field keys and IDs for each element of course. But when I try to collapse a YouTube video on a dataset item that has an empty URL field it does not work. Any help?
$w.onReady(() => {
$w("#dataset1").onReady(() => {
// Gets the current item properties and stores them in a variable called item
const item = $w("#dataset1").getCurrentItem();
// Checks if the current item has a value in the "video" field
if (!item.theConceptText) {
// Collapses the video player if there is no value for "video"
$w("#text51").collapse();
}
});
});
Thanks for your time,
Georgios
Not sure if you saw my code in Charles K. thread. But have you tried this:
$w.onReady(function () {
$w("#dynamicDataset").onReady( () => {
//Connects dynamic item to the Dataset you pull info from, while getting the URL from the column the data nest in
const itemUrl = $w('#dynamicDataset').getCurrentItem().spotifyPlaylistUrl;
//The HTML element with an ID name of #htmlSpotify, that we are dynamically adding the src URL
$w('#htmlSpotify').src = itemUrl;
// Checks if the current item has a value in the "spotifyPlaylistUrl" field
var item = $w("#dynamicDataset").getCurrentItem();
//Create an IF statement to deal with undefined (no URL), which if its true, then we collapse the HTML element
if (item["spotifyPlaylistUrl"] === undefined) {
// Collapses the HTML element if there is no value for "spotifyPlaylistUrl" so that there isn't an empty box taking up space and anything below this will shift upward. Plus we display a message/text to user
$w("#htmlSpotify").collapse();
$w("#textNoMessage").show();
} else {
$w("#htmlSpotify").src = itemUrl;
$w("#htmlSpotify").expand();
$w("#htmlSpotify").show();
$w("#textNoMessage").hide();
}
} );
});
let fadeOptions = {
"duration": 200,
"delay": 800
};
let fadeOutOptions = {
"duration": 90,
"delay": 0
};
I found a solution for my issue. I was looking at it more from an SEO perspective, as the boxes I was hiding were sometimes headers. If the field was empty, it would collapse it properly but the code would then show an empty header tag (not ideal). Therefore, I just changed the html to be empty. The Wix div tag for the collapsed component is still there, but thats not a concern.
const header = $w('#text248').text;
if (header === '') {
$w('#text248').html = "";
$w('#text248').collapse();
}