Simualating User Clicks Using Javascript Or Jquery

There is a website that I want to simulate user clicks on. In this website, there is the following div, let's call it div1, where there is a dropdown menu. There are actually other

Solution 1:

Usually you could use:

$("#level1-option").val(valueToSet).trigger("click")

or

$("#level1-option").val(valueToSet).trigger("change")

but it might depend on the rest of the code on the webpage.

Solution 2:

Try ...

$(element).trigger('click');

... from jQuery.

Solution 3:

Try dispatching onchange event once you have changed its value:

varnumber = document.getElementById('level1-option');
setSelectedValue(number,  "p3");
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
number.dispatchEvent(evt);

Solution 4:

Sorry, that I couldn't help with the overlay issue. Your markup is pretty complex.

Anyway, I coded a bit for the updating/fetching data from database. Please find below a demo of it. The demo is also here at jsFiddle

The JSON data looks like this {"data": ["1st_1", "1st_2", "1st_3"]}

During my work I had one issue that wasn't that easy to solve, but another SO question helped here. If you'd only use the change event you can't trigger the first element to fetch your next data. The counter trick works pretty well.

var dynamicOptions = (function () {

    var url; // here you can add your url to the backend script// urlList only required for demo because no backend availablevar urlList = ['http://www.mocky.io/v2/54839e2a2f4b84a0041bba49',
        'http://www.mocky.io/v2/54839e4c2f4b84a5041bba4a',
        'http://www.mocky.io/v2/54839e6a2f4b84a9041bba4b'];
    
    var cc = 0; // click counter// e.g. $optionEl = $('#firstSelection');// $nextOptionEl = $('#secondSelection');functionSelector($optionEl, $nextOptionEl) {
        this.$optionEl = $optionEl;
        this.$nextOptionEl = $nextOptionEl;
       
        this.ajaxRequest = function (optionValue) {
            return $.ajax({
                type: 'GET', // later 'POST'//data: {'data': optionValue}, // for postingurl: url,
                contentType: "application/json",
                dataType: 'jsonp',
                context: this,
            });
        };
      
        this.getData = function(value) {
            url = urlList[value]; // simulating backend returns based on this valuevar ajaxReq = this.ajaxRequest(value); // this.value not used in this demo
            ajaxReq.success(this.jsonCallback)
                .fail(function (xhr) {
                alert("error" + xhr.responseText);
            });
        };
        // handle click and change event. Source from here: https://stackoverflow.com/questions/11002421/jquery-event-to-fire-when-a-drop-down-is-selected-but-the-value-is-not-changethis.clickHandler = function ($element) {
            //console.log($element);var that = this;
            return $element.click(function () {
                //console.log('clicked');
                cc++;
                if (cc == 2) {
                    $(this).change();
                    cc = 0;
                }
            }).change(function (e) {
                cc = -1; // change triggered//console.log(this.value);
                that.getData(this.value);
            });
        }

        this.clickHandler($optionEl);

        this.jsonCallback = function (json) {
            var $nextEl = this.$nextOptionEl;
            $nextEl.empty();                    // clear selection
            $nextEl.prop('disabled', false);    // enable 2nd selectthis.triggerChangeEvent(); // maybe a check if they really changed would be good
            $.each(json.data, function (index, value) {
                $('<option/>')
                    .val(index)
                    .text(value)
                    .appendTo($nextEl);
            });
        };

        this.triggerChangeEvent = function () {
            var event = jQuery.Event("optionsChanged");
            event.context = this;
            event.message = "Options changed, update other depending options";
            event.time = newDate();

            $.event.trigger(event);
        };
    }

    return {
        Selector: Selector
    }; // make Selector public
})();

$(function () {
    var $first = $('#firstSelection');
    var $second = $('#secondSelection');
    var $third = $('#thirdSelection');

    // use our dynamic options selector classvar options12 = new dynamicOptions.Selector($first, $second);
    var options23 = new dynamicOptions.Selector($second, $third);

    $(document).on('optionsChanged', function (e) {
        console.log("options changed", e);
        var obj_id = e.context.id;
        //console.log(obj_id);
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /><div><formrole="form"><divclass="form-group"><label>Please select first value:</label><selectid="firstSelection"class="form-control"><optionvalue="0">0</option><optionvalue="1">1</option><optionvalue="2">2</option></select></div><divclass="form-group"><label>Please select second value:</label><selectid="secondSelection"class="form-control"disabled="true"><!-- fetched from server --></select></div><divclass="form-group"><label>Please select third value:</label><selectid="thirdSelection"class="form-control"disabled="true"><!-- fetched from server --></select></div></form></div>