0

I want to change the options in a dropdown menu in a website I use, so as to increase the number of rows it displays in a table. Since I use Firefox, my thought was to use GreaseMonkey, but I'm having trouble since most resources on this were written before the backward-compatibility breaking GM 2.0 update, because jQuery is involved, and also because my JS knowledge fits comfortably on the head of a pin.

Here's the full HTML code but the relevant excerpts are below. The dropdown code:

<select onchange="set_pagination(this.value)">

    <option value="10"></option>
    <option value="20"></option>
    <option value="30"></option>
    <option value="40"></option>
    <option value="50" selected="selected"></option>

</select>

And here's the set_pagination function:

function set_pagination(val) {
        jQuery('#my_word_bank_div').fadeTo('fast', 0.5);
        jQuery.post("/learningcenter/account/set_pagination", {number_of_rows_perpage: val}, function(data){
            if(data.error == "") reload_table(1);
            else alert(data.error);
        }, "json");
    }

My naive solution of redefining the function but setting val to a constant (e.g. 200) didn't work, probably due to my misuse of unsafeWindow. I did find this similar request but I'm not sure it applies anymore.

Community
  • 1
  • 1
traycerb
  • 83
  • 9

1 Answers1

0

Well, I found my answer, sort of. Using this answer for guidance, and learning some basics about using jQuery to access elements without an id, and also by value, I came up with the following simple Greasemonky script:

// ==UserScript==
// @name        ZZZZ
// @namespace   http://www.example.com*
// @description Add dropdown option
// @include     http://www.example.com*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_getResourceText
// @grant       GM_addStyle
// @grant       GM_xmlhttpRequest
// @grant       GM_getResourceUR
// ==/UserScript==

var rowDropdownAddOption = $('[value=50]').after ('<option value="51">Show 51</option>');

This successfully adds the dropdown option I'm after, but (SPOILER ALERT), of course the server must check the parameters, and anything >50 is rejected. Which, of course, just goes to show my naivete in all matters web. I think this means it can't be done, unless someone can offer up some other solution.

Community
  • 1
  • 1
traycerb
  • 83
  • 9
  • Don't use jQuery for something like this. jQuery is 82kiB of minimized code which you're loading in order to save a few characters of vanilla JavaScript. That's not a good trade-off for your users. What if they have hundreds of tabs open to that page? What you're doing could easily be done as `document.querySelector('[value=50]').insertAdjacentHTML('afterend', '');` – Makyen Oct 08 '17 at 04:44
  • How are we supposed to "offer up some other solution" when you haven't described what you *actually* want to do. You've said you want another option added to a ` – Makyen Oct 08 '17 at 04:51