Modify link behaviour when clicked

By: Enrico Brugnoni | Asked: 09/20/2023
ForumsCategory: General questionsModify link behaviour when clicked
Enrico Brugnoni asked 7 months ago

*See attachment
I need to modify the events of what happens when you click on the name of the image uploaded under a field, now once clicked it opens up a new tab and redirects the user to it, i need it to open a new tab and stay in the page.
I tried a multitude of approaches, i created the javascript code and inserted as a snippet,
also tried following this: https://formidableforms.com/knowledgebase/javascript-examples/And inserting it as a script in the \"after fields\" in the html part

Here is the javascript code used:.console.log(\"Diagnostic script started\");document.addEventListener(\'DOMContentLoaded\', function() { console.log(\"DOM loaded\"); var links = document.querySelectorAll(\'[data-dz-name] a\'); console.log(\"Number of links found:\", links.length); links.forEach(function(link) { link.addEventListener(\'click\', function(event) { console.log(\"Link clicked (bubbling phase)\"); event.preventDefault(); var newTab = window.open(link.href, \'_blank\'); window.focus(); }); // Add an event listener in the capturing phase link.addEventListener(\'click\', function(event) { console.log(\"Link clicked (capturing phase)\"); }, true); });});
The code is being run, seen from the console, but when using inspect element, the element always remains the same>
I tried a multitude of different codes and different approaches, but nothing worked, how can i change this?

Attachments
2 Answers
Victor Font answered 7 months ago
The span with the data-dz-name data element is not a link. Unless you transform it into a link with custom code, nothing is going to happen.
Enrico Brugnoni replied 7 months ago

logo_agenzia.jpg

i am referring to this link

Victor Font replied 7 months ago

Neither the thumbnail image nor the text are links. The thumbnail is an image and the text is just hard coded text. You would have to use jQuery to convert them to links so you can realize your requirements.

Enrico Brugnoni replied 7 months ago

in both cases this failed to show you the code since it's just printing the link itself, the following is what i am referring to when i say "the link", the one that is pressed in the attachment image

<blockquote><span data-dz-name=""><a href="https://relegiskey.com/wp-content/uploads/formidable/2/upload_field.jpeg&quot; target="_blank" rel="noopener">upload_field.jpeg</a></span></blockquote>

This shows that within the with the data-dz-name attribute, there is an anchor (<a>) tag, which is a link. This means that when users click on the text "upload_field.jpeg", they are clicking on a link.

*I added a new attachment to the original question so that you can better understant what i am saying

In the code i also added 2 debugging lines, one that tells me the number of links present, and the other tells me when a link is pressed, and they both work, suggesting the links are already there, but, no matter what i try, i just can't modify their behaviour.

Rob LeVineRob LeVine replied 7 months ago

Provide a link t o your website and a clear set of steps to reproduce the issue.

Enrico Brugnoni replied 7 months ago

Sure!
1 - Enter the website: https://relegiskey.com/login/
2 - log in with these credentials:
email: [email protected]
pass: Test1234
3 - Once logged in, you will see all the form entries displayed (one in this case)
4 - Press on "modifica" (Button in blue in the view, the last one), to view the full entry and modify it
5 - Once inside, you can see a lot of upload field, in some of them there are some uploaded files, for example the file "logo_agenzia" under the "Carta di identità" field, this is where the issue arises
6 - Different people would need to click on those files to see its contents, once you click on the name of the file (So you press on "logo_agenzia") a new tab is opened with the image, i would need the tab to open but the user to remain in the same page, so in the one where he is visualizing the full entry.
Is there any way of modifying such behaviour? If you need any more informations do not heasistate to ask, thanks a lot in andvance!

Rob LeVineRob LeVine replied 7 months ago

Thanks for the steps. Based on my research, you can no longer use javascript to open up a new tab without the focus being switched to it. Each user on his/her own browser can make it act that way, but it's no longer an option for a programmer to do that.
See the following for discussions and Fiddles that show the solution no longer works:
https://stackoverflow.com/questions/10812628/open-a-new-tab-in-the-background
https://stackoverflow.com/questions/7522565/how-to-stay-on-current-window-when-the-link-opens-in-new-tab
See the following for how to have an individual user make the change:
https://support.mozilla.org/en-US/questions/1327563

I'm wondering if you're not better off changing the link to a rollover popup that shows the image in its own box.

Enrico Brugnoni replied 7 months ago

Thank you for your research and you answer Rob! i will try to do such a thing, thanks again and have a good day!!

Victor Font answered 7 months ago
@Enrico Brugnoni , I am at a loss to understand how to help you. You haven't shown any links in your posts or images. Both of the images you added that you identify as a link are thumbnail images. You have not shown any links in the source code. I've attached an image of the source code showing the HTML for the upload field after I've added an image in my development environment. There is one link in the source code. The only link in this source code is the 'x' for removing an image. There are no links around the thumbnail or file name. Since we can't seem to understand each other clearly, I'm jumping out of this thread and hope there's somebody else here that can help you. Sorry.
Attachments
Enrico Brugnoni replied 7 months ago

I see, looking at the code it seems like its working different for me and you since i do have a link there, thank you anyway for yor time Victor, i really appreciate it!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right