Hitory Back Method

General
1

Hi there,
I’m having a weird brain block right now and I’m just not able to get the History:back() method right.

I tried to paste directly into the link and into the click interaction, I tried 100’s of methods, but I must have made a simple mistake because it was supposed to work.

Methods I know:

<a href="javascript:history.back()">Go Back</a>

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

<button onclick="goBack()">Go Back</button>

<script>
    function goBack() {
        window.history.back();
    }
</script>

Haa, the days when I doubt my sanity…

Cheers :smiling_face_with_tear:

2

For the sake of your sanity :brain: :muscle::

1 Like
3

Using a click interaction works as a good alternative:

Screenshot 2023-10-05 at 16.09.51
Screenshot 2023-10-05 at 16.09.51281×769 11.7 KB

Screenshot 2023-10-05 at 16.09.30
Screenshot 2023-10-05 at 16.09.30635×682 7.05 KB

Screenshot 2023-10-05 at 16.09.16
Screenshot 2023-10-05 at 16.09.16635×682 16.2 KB

Screenshot 2023-10-05 at 16.09.22
Screenshot 2023-10-05 at 16.09.22635×682 10.7 KB

Note: Even though the element is clickable, if you want the element to present itself as interactive, you will either have to additionally specify a link url (e.g. “#”) or change the cursor to pointer via CSS.

1 Like
4

Hi @StrangeTech,
thank you a lot for saving my sanity :smiling_face: :+1:

I completly missed that the javascript got trimmed :grimacing:

I had exactly the click interaction you showed in your images and even a little debug via a toggle class. I thought that the Click is the activation of the javascript? :thinking:

Just to be sure, do you mean the link of the same block?
grafik
Wouldn’t that make the click interaction obsolete?

Haven’t heard of pointer, but do you mean THIS (cursor: pointer;)? :sweat_smile:

Cheers

1 Like
5

Yes, exactly.

They can both work together - but if you use the css, this is not necessary.

Yes, exactly - it has been a long day and my fingers may not have been keeping up with my thinking while typing that one, glad you interpreted the meaning - I’ve updated the comment.

1 Like
6

I am always grateful for others who invest their precious time to leave a comment and offer to help. Plus a little research on your own never hurts, it only helps to better understand the problem. :+1:

All the questioning is based on the fact that the recommended solutions do not work on my end :sweat_smile:

So my current steps are as follows:

1: creating a div and a paragraph
grafik

2: Adding the href as advanced attribute
grafik

this gives me the following html code:
grafik

3: Adding cursor: pointer; to my css
grafik

4: Creating for the same paragraph a Click interaction with the following code:
grafik

Which gives me the following html:

grafik
grafik1260×79 3.46 KB

and a “JavaScript exception” error?

Console 
09:27:59.914 Uncaught TypeError: c is null
    cc_interactions http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    cc_interactions http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    <anonymous> http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    <anonymous> http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    EventListener.handleEvent* http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
cc-interactions.min.js:1:5875
    cc_interactions http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    forEach self-hosted:203
    cc_interactions http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    <anonym> http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    forEach self-hosted:203
    <anonym> http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1
    (Async: EventListener.handleEvent)
    <anonym> http://localhost/Websites/Bugtest/wp-content/plugins/cwicly/assets/js/cc-interactions.min.js?ver=1.3.1:1

Am I doing something wrong? Are there steps that are redundant? Does this process work for you?
Whats wrong with my PC :joy:

Cheers

7

You will need to set the html tag to <a> for this method to work.

If you choose this method,. make sure you add an ID as per my screenshot - please see this tip to for the full explanation:

1 Like
8

Hi @StrangeTech,
tank you for all the support that has helped to solve this problem… and my sanity :yum:

So here are the two methods in a step-by-step guide for people like me who need baby steps. :sweat_smile:

Method 1 via Click Interaction

  1. Selecting your block for the interaction.
    grafik

  2. Check if the ID is toggled ON !!!
    grafik

  3. Click on Interaction
    grafik

  4. Select Current for the click event and go to the interactions.
    grafik

  5. Create a new interaction
    grafik

  6. Select the Custom Function for the Interaction:
    grafik

  7. Add the line history.back(); in the code area:
    grafik

With this the div block is ready to use, but it gets a better feeling to it when you set the cursor style to pointer.
grafik

  1. Navigate to your CSS Quick Editor and add the cursor: pointer; selector to your block class.
    grafik

With this you should have a working “page back” block :+1:

Method 2 via Attribute

  1. Selecting your block for the attribute.
    grafik

  2. Go to Advanced → Attributes and replace the Name with href and the Value with javascript:history.back().
    grafik

  3. Change the html element of your block to a hyperlink a.
    grafik

  4. Depending on your design, you may want to change your display settings.
    grafik

Cheers