Change Page title Dynamically

Ask the community
1

I am trying to change Page Title Dynamically,

But, Custom Code isn’t working in Softr Custom Code (Footer, Custom code block, etc…)

Here is the code below,

It works well in debugger(F12) Console,

but, not working in Softr Custom code only.

Thanks in advance : )

image
[Changed Page title by Debugger Console(F12)]

{Custom Code below}

var content_title = document.querySelector (“#list-back > section > div > div > div > div > div > div > div:nth-child(3) > div > div > div > div > h3”).textContent;

document.title = content_title;

[end of code]

2

You want to do this all along your website or for specific pages?

3

Hi matthieu_chateau,
i want this for ‘Each’ ‘Specific’ pages.

e.g.)
Contents | (Contents Title)
Q&A | (Q&A Title)
Case | (Case Title)
etc. . .

4

Just in case but did you add the script tags?
A javascript code starts with <script> and ends with </script>.

5

yes i did,

i removed <script> and </script> in the Question.

Original Code is below,

<script>

var content_title = document.querySelector (“#list-back > section > div > div > div > div > div > div > div:nth-child(3) > div > div > div > div > h3”).textContent;

document.title = content_title;
</script>

6

Try this one

<script>
window.onload = function() {
  var content_title = $('#list-back > section > div > div > div > div > div > div > div:nth-child(3) > div > div > div > div > h3').text();
  document.title = content_title;
};
</script>
7

Okay, I tired that one.

Now, Title does not exist anymore.

title code is now <title> </title>

and page title is URL of the page now.

picture below,

image
image1986×750 132 KB

8

and it also works well with
Chrome Debugger(F12) Console

it shows the console and changes Page title in right way.

image
image809×105 4.46 KB

9

It works for me… so I don’t know… I’m stuck here, can you try to add the code in the footer of the page? if it’s not already done

10

Thanks, I already did it in the footer code.
And new thing is,
it works really well wirhout variables.

image
image2588×1271 432 KB

11

The thing is it works for me so I don’t know, or it comes from your browser or there is a conflict with another code

12

Okay, I’ll figure it out and share the reason why.

13

Was this ever figured out? I’d love to be able to do this for my database site, but I have no idea what I’m doing with it.

Also, how would one go about customising this? For example, I have a table called Members, and the member’s name is what I want the page title to be on the list details pages. A specific member example is this page, where the name (Nakazawa Yuuko) would automatically become the page title.

I’d rather not do it manually, as I have almost 290 member records alone, along with everything else in the database!

(Apologies if this is a simple fix and I’m overlooking it. I do have a SEO:Title field in the Members table, but I can’t seem to get that to work, either…)

14

@Zeke can you check your airtable SEO:Title fields doesn’t contain spaces or other characters ?

15

Here is one of our examples https://www.softr.io/templates-new/school-portal/r/D7uEQMyU333FZtZznetRbH

1 Like
16

Whoops, it turns out I was being silly about something. Not quite sure what I did, but it’s fixed itself. Sorry for being dumb!