The following tag (which is located on a web page) gets replaced by the content that they type in within the form (which is located on another page):
{tag_event dinner description}
The possible values for the above is anything, ie. there’s no pre-determined value.
The problem is that the user may not type anything into this field and therefore the label that says “Dinner:” would need to be removed in that case. In fact the whole contents of the above mentioned <p> tag would need to be hidden or removed.
I’ve already tried the following code which uses the p tag to check if it’s empty or not:
I tested the above code by going into the web app and removing data from the “Dinner” form field. I then went to the web page and refreshed and it successfully removed the p tag from view by hiding it with inline css. The problem now is that if I go back to the web app form and populate the dinner field with data, update the web app item, and then go back to the web page and refresh, it doesn’t show the p tag, so there must be some sort of disconnect which I can’t work out.
I wondered if anyone could tell me where I’ve gone wrong?
You might need to explain a bit more how this is all set up. The way you’ve described it, the “web app” is something separate from the “web page”.
Anyhow, I’m not a programer, but I would think that a program itself should check whether there’s any data for a particular field, and add a paragraph or not, as appropriate. (That’s what you’d do if using a server-side language.)
I’m using Adobe Business Catalyst to create the web app. The web app creation tool within BC just lets you create form fields and then you insert the names of the fields within web pages to act as placeholders. In my example the placeholder in the following code is {tag_event dinner description}:
When someone fills out the form in the web app, it populates parts of the web page. I said in my original post that I tested out the code by going to the web app and removing the text in the form field called “tag_event dinner description” and then clicked the update button within the app interface. After I did this, I went to the web page, refreshed the browser, and the p tag was hidden because the placeholder called {tag_event dinner description} was not populated so I assumed that my code was working. When I tested a second time, by inserting some text into the web app form field, after refreshing the browser, the p tag didn’t show.
I’m not even sure if my code is working at all. I mean if the code is checking to see if the contents of the p tag is empty then, I assume that from the browser perspective, {tag_event dinner description} is considered empty and any other text is considered populated. I’m just not sure how the app talks to the browser.
So I’m not sure if anyone here has any experience with Business Catalyst apps or can explain how it all might be working and perhaps provide a solution.
I wondered if I could get some further help with this problem? I found out that I could check whether the p element is empty or not and then remove it with the following jQuery:
$(“.element:isempty”).remove();
As I don’t have much jQuery experience I’d need help extending the above code. The target html is as follows:
Sorry, I thought I had better clarify my question:
The following p tag contains a <span> element with an id of “populated”. If there is any text within the span, then I need for the p tag with an id of “pTag” to be remain, however if there is no text within the span then I need the p tag to be removed:
I’m not really sure if this would improve your situation at all, but you could try some simple JS like this:
(function() {
var p = document.getElementById('pTag');
var s = document.getElementById('populated');
if (!s.innerHTML) {
p.style.display = 'none';
}
}());
Here it is in action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="pTag" class="close-space"><strong>Dinner: </strong><span id="populated"></span></p>
<script>
(function() {
var p = document.getElementById('pTag');
var s = document.getElementById('populated');
if (!s.innerHTML) {
p.style.display = 'none';
}
}());
</script>
</body>
</html>
This would of course require a page refresh to restore the paragraph after content has been added. I’m not into jQuery, but I enjoy playing around with very simple JS.
I’ve tested your code but it’s not working. I’m pointing to a jQuery library but not javascript so could that be the problem?
Also, I have other jQuery on the page so I’m a bit worried about page load if I have to load another javascript library so maybe jQuery is the better way to go?
If you put that bit of code inside <script> tags at the bottom of your page, just before the closing </body> tag (as in the full code I posted), it should work. E.g.
[COLOR="#0000CD"]<script>[/COLOR]
(function() {
var p = document.getElementById('pTag');
var s = document.getElementById('populated');
if (!s.innerHTML) {
p.style.display = 'none';
}
}());
[COLOR="#0000FF"]</script>[/COLOR]
[COLOR="#FF0000"]</body>[/COLOR]
It’s just plain JavaScript, so no library is required. The browser itself processes JavaScript.
I moved the code block as you suggested and it’s working perfectly now so thanks so much for that. Just a couple more questions if that’s ok?
(1) Does javascript always need to go at the end of the html file?
(2) If I add an id=“populated” to another line, for example the cost line, will the code work for both the dinner and cost lines?
No, but these days it’s generally considered best practice to put it there. It makes life slightly easier to put it there, too. Otherwise, you have to add in extra code to tell the JS not to run until the page has loaded. (My very simple code would not work as is if placed at the top of the page, because it would be targeting elements that haven’t loaded yet.)
If I add an id=“populated” to another line, for example the cost line, will the code work for both the dinner and cost lines?
No, it needs to be modified for that purpose. You can only use an ID once per page. if you’d like help with it, perhaps indicate how many elements you need to target.
Ok thanks for clarifying the position of the javascript.
With regard to the extra elements, at this point, I’d only need to target the cost as well because if it’s an unpaid event then there won’t be any cost. I understand that you can only use 1 id per page but if I used a class instead, couldn’t I target as many elements as I want? The html would be like this:
Could you help extend the code to cover the above scenario? It would be great if you could explain the code so that if I need to target another element in future maybe I could extend it myself.
Though my JS skills are meagre at best, here’s a modified version that should do what you require:
<script>
(function() {
var span = document.querySelectorAll('.populated');
for (var i = 0, ii = span.length; i < ii; i++) {
var para = span[i].parentNode;
if (!span[i].innerHTML) {
para.style.display = 'none';
}
}
}());
</script>
As long as each new paragraph includes an element with a class of “populated”, the script should continue to work.
Note that I’ve modified your HTML a bit. You can’t have class="" twice on an element, but you can add multiple, space-separated classes within the one class="" instance. Also, consider whether you really need two classes. If all paragraphs of this type share the “close-space” style, then just use the “pTag” class to include these styles. And if all of these paragraphs have the “pTag” class, then go one step further and remove those as well, instead wrapping all of these paragraphs in a div and giving that the class name instead. So, if the wrapper has a class of “p-wrap”, for example, then you’d say something like:
.p-wrap p {
[I]place all of the pTag and close-space styles here[/I]
}
Anyhow, here’s a full code example of the script with the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p class="pTag close-space"><strong>Dinner: </strong><span class="populated"></span></p>
<p class="pTag close-space"><strong>Cost: </strong><span class="populated"></span></p>
<script>
(function() {
var span = document.querySelectorAll('.populated');
for (var i = 0, ii = span.length; i < ii; i++) {
var para = span[i].parentNode;
if (!span[i].innerHTML) {
para.style.display = 'none';
}
}
}());
</script>
</body>
</html>
