CODEWITHSUNDEEP
javascriptvariablesdrop-down-menugreasemonkeyhtml-select
Archey
Archey

Reputation: 1342

Change a variable or activate a JS-linked <select> dropdown with Greasemonkey

I'm looking to change a javascript variable on page load with Greasemonkey.

The variable I'm looking to change is iDisplayLength the default value is 25, I want to change it to -1 on page load.

This is the script I tried; it did not work:

function changeTheDefaultViewVarLol() {
  location.href = "javascript:void(windows.iDisplayLength = -1)";
};

changeTheDefaultViewVarLol();


Edit: From a comment below, the target page is tf2spreadsheet.blogspot.com.

The OP is actually trying to change the number of rows displayed on the page -- a function that is triggered by the "Show {x} entries" <select> dropdown.

Upvotes: 2

Views: 486

Answers (1)

Brock Adams
Brock Adams

Reputation: 93483

You would just use:

unsafeWindow.iDisplayLength = -1;

No need for any of that changeTheDefaultViewVarLol() stuff.

However, this will not have the effect that you want if iDisplayLength is used by the page just after the page sets it to 25.

You will probably have to call a JS function to apply the new value. Link to the target page if this is the case.

Update for additional page information:

What you are actually trying to do is to invoke the "Show All entries" functionality of that page.

So, don't think in terms of poking JS variables, think in terms of activating whatever JS is tied to that <select>.

For a normal page similar to the one you specified, code like this would do it: 

var showAllOpt  = document.querySelector ('#main_table_length select option[value="-1"]');
var changeEvent = document.createEvent ("HTMLEvents");

if (showAllOpt) {
    showAllOpt.parentNode.selectedIndex = showAllOpt.index;

    changeEvent.initEvent ("change", true, true);
    showAllOpt.parentNode.dispatchEvent (changeEvent);
}


BUT, that page AJAXes-in the desired table long after the page "loads". So, an additional step is needed, like so:

var showAllEntriesSelect = setInterval ( function() {
        setSelectValueWhenitLoads (
            "#main_table_length select option",
            "-1",
            showAllEntriesSelect
        );
    }
    , 200
);

function setSelectValueWhenitLoads (cssSelector, targetValue, timerVar) {

    var showAllOpt  = document.querySelector (
        cssSelector + '[value="' + targetValue + '"]'
    );

    if (showAllOpt) {
        clearInterval (timerVar);
        showAllOpt.parentNode.selectedIndex = showAllOpt.index;

        var changeEvent = document.createEvent ("HTMLEvents");
        changeEvent.initEvent ("change", true, true);
        showAllOpt.parentNode.dispatchEvent (changeEvent);
    }
}

Upvotes: 1

Related Questions