4

I have a dynamically generated dropdown select feature that numerically pages through a book. I wish to create a table of content feature that allows users to click a link to jump to pages within the book. I've implemented a vanilla javascript solution (see below) that selects by index BUT the update isn't triggered (page number changes in the pager but it doesn't advance the page).

I welcome a way to make the javascript change trigger or a jquery solution. Thanks!

function selectOption(index) { document.getElementById("tei_pager").options.selectedIndex = index; }
<select id="tei_pager" class="form-select"> <option value="10917">1</option> <option value="10918">2</option> <option value="10919">3</option> </select> <a href="javascript:void(0);" onclick="selectOption(1);">Second Page</a>

and this section of a separate jquery is binding the select

 // Bind page changes to the select. $("#tei_pager").change(function () { Drupal.settings.islandora_paged_tei_seadragon_update_page( $(this).val(), $(this).children("option:selected").text() ); });
Improve this question
3
  • ` BUT the update isn't triggered` - what you mean by that? What is the (js) part which is loading your page? Commented Nov 25, 2020 at 19:18
  • It doesn't look like you are using the page besides to just select it in the drop down. In order to advance to that page, you will need two parts: First, each page will need some kind of identifier wrapping the content like a div or something and the second part will be the javascript that will be used to go to that page. You haven't provided any code or reference to how the pages are actually structured in the HTML. Commented Nov 25, 2020 at 19:19
  • I was trying to simplify because it's in Drupal so there is a lot of php and js. You can see a demo of the issue here: diglib.amphilsoc.org/islandora/object/tunicanotebook01-test - if you click links, dropdown pager advances but pages don't. If you mouseclick on pager both advance. Commented Nov 25, 2020 at 21:11

3 Answers 3

Reset to default
3

I adapted a solution from here: Change <select>'s option and trigger events with JavaScript Having the selection made by js rather than a mouseclick was inhibiting the process.

My solution looks like:

js

function selectOption(index){ if (index == 0) { document.getElementById("tei_pager").options.selectedIndex = index; } else { document.getElementById("tei_pager").options.selectedIndex = (index - 1); } if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); document.getElementById("tei_pager").dispatchEvent(evt); } else { document.getElementById("tei_pager").fireEvent("onchange"); } }

html

<select id="tei_pager" class="form-select"> <option value="10917" selected="selected">1</option> <option value="10918">2</option> <option value="10919">3</option> <option value="10920">4</option> <option value="10921">5</option> <option value="11192">6</option> <option value="11193">7</option> </select> <a href="javascript:void(0);" onclick="selectOption(0);">First Page</a> <a href="javascript:void(0);" onclick="selectOption(6);">Sixth Page</a>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can set the value of the select tag.

function selectOption(val) { document.getElementById("tei_pager").value = val; }
<select id="tei_pager" class="form-select"> <option value="10917">1</option> <option value="10918">2</option> <option value="10919">3</option> </select> <a href="javascript:void(0);" onclick="selectOption('10918');">Second Page</a>

Improve this answer

Comments

0

If the change event of the select element is to trigger the Drupal code you have at the end of your question,

then change:

$("#islandora_paged_tei_seadragon_pager").change(function () { ....

to:

$("#tei_pager").change(function () { ....

UPDATE

If by ....dynamically generated dropdown select.... you mean to say that the select element is created after DOM ready event, then consider re-writing it as follows:

$(document).on('change', '#tei_pager', function () { ....
Improve this answer

1 Comment

Thanks. Unfortunately that was a copy/paste mistake. I edited the question accordingly.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.