Trigger Select event

Question

I'm using my code to fetch data from a server and show it with inputs and labels.

My only problem is that, when I enter the page the select change is not triggered therefore I don't get any data. The only way to make it work is select another option and select the same again so the change event is triggered. $('#selectMRPC').trigger('change'); doesn't help.

How can I make my selectorMRPC() and $('#selectMRPC').change be executed when the page loads?

$(document).ready(function () {

    selectorMRPC();
    $('#selectMRPC').trigger('change');

    $('#selectMRPC').change(function () {
        //fetch data
        var mrpc = $(this).find('option:selected').data('mrpc');

        $('#paramBody').empty();
        for (var i = 1; i <= 10; i++) {
            var field = mrpc["field" + i];
            if (field !== undefined) {
                var parsedField = field.split('_');
                var value = parsedField[0];
                var type = parsedField[1];

                switch (type) {
                    case  "S":
                        type = "text";
                        if (value === '""')
                            value = null;
                        break;
                    case "B":
                        type = "checkbox";
                        break;
                    case "N":
                        type = "number";
                        value = parseInt(value);
                        break;
                    case "D":
                        type = "number";
                        value = parseInt(value);
                        if (value === '""')
                            value = null;
                        break;
                }
                //else use checkbox
                if(type === "checkbox")
                {
                    $('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><div class="checkbox checkbox-primary">' +
                        '<input class="text-center" id="field'+i+'" name="Fields" type="checkbox" value="' +value + '"><label for="field'+i+'"></label></div></tr>');
                }
                else
                {
                    $('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><input class="text-center" name="Fields" type="' + type + '" value="' +value + '"></tr>');
                }
            }
        }
    });


    function selectorMRPC() {
        $.ajax({
            type: 'post',
            url: 'IndividualSimulator',
            success: function (result) {
                $('#selectMRPC').empty();
                JSON.parse(result).forEach(function (mrpc) {
                    var option = $('<option>', {
                        value: mrpc.name,
                        text: mrpc.name
                    });

                    //Persist data with option
                    option.data('mrpc', mrpc);

                    $('#selectMRPC').append(option);
                });
            },
            error: function () {

            }
        });
        return false;
    }
});

now doesn't work. ` var field = mrpc["field" + i];` undefined... I need to run ajax first. probably because option:selected doesn't exist yet. — sdada
– sdada, Commented Nov 16, 2017 at 12:26
what are you talking about? selectMRPC is a select and its always there — sdada
– sdada, Commented Nov 16, 2017 at 12:28

gurvinder372 · Accepted Answer · 2017-11-16 12:34:44Z

1

How can I make my selectorMRPC() and $('#selectMRPC').change be executed when the page loads?

From your code and comments, following seems to be the sequence

selectorMRPC() creates data-mrpc attribute for the option
When the change event triggers, it looks for data-mrpc attribute
But you seem to trigger change event before AJAX success happens

Make it as following

$(document).ready(function() {
  selectorMRPC(); //notice that only this method is invoked
});

function selectorMRPC() {
  $.ajax({
    type: 'post',
    url: 'IndividualSimulator',
    success: function(result) {
      $('#selectMRPC').empty();
      JSON.parse(result).forEach(function(mrpc) {
        var option = $('<option>', {
          value: mrpc.name,
          text: mrpc.name
        });
        //Persist data with option
        option.data('mrpc', mrpc);

        $('#selectMRPC').append(option);
      });
      $('#selectMRPC').change(function() {
        //fetch data
        var mrpc = $(this).find('option:selected').data('mrpc');
        //rest of the code removed for simplification
      });
      $('#selectMRPC').trigger('change');

    },
    error: function() {

    }
  });
  //return false; this line doesn't make sense
}

answered Nov 16, 2017 at 12:34

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sdada Over a year ago

I see the problem now. The select is inside another content. When I click a button in the first content it goes to the second content and that's where the select is. How can I do this?

gurvinder372 Over a year ago

I am not able to see the button click logic in your question. Also, did you tried my answer?

sdada Over a year ago

I need something like: ***on second tab selected *** call the selectorMRPC

sdada Over a year ago

i will send some screen shots.

sdada Over a year ago

This button is on tab with id = "step1" i.gyazo.com/925b13b42f0cfc80baf44e7346ab9efe.png

|

Collectives™ on Stack Overflow

Trigger Select event

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related