We help IT Professionals succeed at work.

My change event dropdown box is not triggering my event

lulu50
lulu50 used Ask the Experts™
on
Hi,

my Group select is not triggering my on change event.

1. I have a select dropdown list that select px or dx .....
2. Upon selecting from the first dropdown list the Group select will get populated with a list of dx or px.....
3. ounce the user select from the list of dx or px I need to populate the textarea with the list Item.
but for some reason my Group Select is not triggering my on change event to send the data to the textarea called ItemsTextArea

<script>
    $(document).ready(function () {

       // debugger;

        $('#OperatorSelect').multiselect(getOperatorOptions(true));
        $('#ConditionSelect').multiselect(getOperatorOptions(true));
        $('#ValueSelect').multiselect(getOperatorOptions(true));
        $('#GroupSelect').multiselect(getGroupOptions(true));


        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    var arr = [ '<option>Select</option>' ];
                    $.each(json, function (i, obj) {
                        arr.push('<option value="' + json[i].Value + '">' + json[i].Text + "</option>");
                    });
                    $('#GroupSelect').closest("td").html("<select id='GroupSelect' name='GroupSelect'>" + arr.join("") + "</select>");
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });

//I'm not sure why my GroupSelect is not getting triggered 
//I tried to do the old way of JavaScript onchange() but that didn't work either. 
       
     [b]   $("#GroupSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedGroup').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $("#GroupSelect").val('#ItemsTextArea');
            });
        });
[/b]
        



        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'
            }
        }


        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }

     


    });




</script>

Open in new window



my controller: 

  [HttpPost]
        public JsonResult RulePartialView(CABRRulePartialViewModel model)
        {
            if (model.HiddenFieldForSelectedGroup == 0)
            {
                model.SelectGroupDataSource = _careAdvanceBusinessRulessService.SelectedDataFromCondition(model.HiddenFieldForSelectedCondition);
                return Json(model.SelectGroupDataSource, JsonRequestBehavior.AllowGet);
            }
            //It goes to here and return the data from the group 
            model.SelectListItemForTheGroup = _careAdvanceBusinessRulessService.SelectedDataFromGroup(model.HiddenFieldForSelectedGroup);
            return Json(model.SelectListItemForTheGroup, JsonRequestBehavior.AllowGet);
        }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
lulu50Web application

Author

Commented:
My textarea

  <tr> 
                <td colspan="4">
                    @Html.TextAreaFor(x => x.ItemsTextArea, new { @class = "form-control", rows = 6, @style = "width:100%; margin-top:10px;", @maxlength = 900 })
                </td>
            </tr>

Open in new window

Multitechnician
Top Expert 2014
Commented:
replace :
        $("#GroupSelect").change(function (event) {
by :
        $(document).on("change", "#GroupSelect", function (event) {


<script>
    $(document).ready(function () {

        // debugger;

        $('#OperatorSelect').multiselect(getOperatorOptions(true));
        $('#ConditionSelect').multiselect(getOperatorOptions(true));
        $('#ValueSelect').multiselect(getOperatorOptions(true));
        $('#GroupSelect').multiselect(getGroupOptions(true));


        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    var arr = [ '<option>Select</option>' ];
                    $.each(json, function (i, obj) {
                        arr.push('<option value="' + json[i].Value + '">' + json[i].Text + "</option>");
                    });
                    $('#GroupSelect').closest("td").html("<select id='GroupSelect' name='GroupSelect'>" + arr.join("") + "</select>");
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });

//I'm not sure why my GroupSelect is not getting triggered
//I tried to do the old way of JavaScript onchange() but that didn't work either.

//        $("#GroupSelect").change(function (event) {
        $(document).on("change", "#GroupSelect", function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedGroup').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $("#GroupSelect").val('#ItemsTextArea');
                });
        });

        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'
            }
        }


        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }

    });
</script>

Open in new window

lulu50Web application

Author

Commented:
ah that's great!!!!

My event works now.

Thank you so much

Lulu50
leakim971Multitechnician
Top Expert 2014

Commented:
de rien, tout le plaisir est pour moi
lulu50Web application

Author

Commented:
I'm using Google for my French lol

Merci beaucoup