0

I have a project that is implemented with Django, Dojo and JS. I've been banging my head against this issue all week and cannot find any hints online as to what the problem might be. Hopefully someone here has either run into this issue as well and can shed some light on the problem.

I have an unordered list <ul> similar to the following:

`````
<ul>
  <li><a target="displayArea" id="pre-select" href="foo.html>Foo</a></li>
  <li><a target="displayArea" href="bar.html">Bar</a></li>
  <li><a target="displayArea" href="baz.html">Baz</a></li>
</ul>
```

elsewhere in the code is the target iframe:

```
<iframe style="border: none;" name="displayArea" id="displayArea" width="100%" height="95%" title="Report Area"></iframe>
```

When I mouse over and click "Foo" it works as expected, "Foo" is displayed in the iframe shown above. If, however, I execute the following script which is immediately after the </ul> in the code:

<script>
  window.document.getElementById('pre-select').click();
</script>

"Foo" is not displayed in the iframe, instead it briefly appears in the host window frame then disappears. I'm not sure why there is a difference clicking directly on the link as it appears in the <ul> or executing the <script> that does the "click" programmatically.

Any insight would be greatly appreciated...

As stated in the problem description I expected the link to appear in the target iframe when the script:

<script>
  window.document.getElementById('pre-select').click();
</script>

is executed but it doesn't appear in the iframe. If the link is clicked with the mouse it works as expected.

ControlAltDel
  • 33,923
  • 10
  • 53
  • 80
pblanco4
  • 3
  • 2
  • Is the iframe located before the anchors on the page? – epascarello Dec 01 '22 at 18:40
  • this may be of some help: https://stackoverflow.com/questions/11127908/difference-between-click-and-actually-clicking-a-button-javascript-jquery – markfila Dec 01 '22 at 19:56
  • @epascarello - The iframe is definitely before the anchors on the page. – pblanco4 Dec 01 '22 at 20:57
  • @markfila - I'm looking at the link you sent, the answer may be buried in there somewhere. – pblanco4 Dec 01 '22 at 20:59
  • Maybe it is browser blocking it from lack of user interaction with the page. Maybe do something like `const a = document.querySelector("#pre-select"); document.querySelector(\`[name="${a.target}"]\`).src = a.href;` – epascarello Dec 01 '22 at 21:34
  • @epascarello - That wasn't it either but I'm going to start fresh tomorrow and attack it from a different angle. Thanks to everyone for their help! – pblanco4 Dec 01 '22 at 22:45

1 Answers1

0

I was able to accomplish what I needed to by adding an onload to the of my HTML like this:

<body onload="document.getElemenById('pre-select').click()">

This does exactly what I need and can be changed easily when the users inevitably change their minds :)

Thanks to epascarello and markfila for their help pointing me in the right direction.

pblanco4
  • 3
  • 2