-1

I have a select dropdown which comes from the controller using JSON and displaying on the view page.

Now my on change event is not working. If I added a select drop down direct on view then it's working but which is come from the controller that is not working.

Controller

$code.= '<!--more HTML code here-->

 I have more html code here

 <select name="yearDropdown"  class="form-control dropdownDuration">
 <option selected disabled >Select duration</option>  
 <option value="12m" <?php if($product['options']['duration'] == "12m"){ echo 'selected="selected"';} ?> >1 Year</option>
 <option value="6m" <?php if($product['options']['duration'] == "6m"){ echo 'selected="selected"';} ?>>6 months</option>
 </select>

I have more html code here

    <!--more HTML code here-->
    ';

on change script

$('.dropdownDuration').change(function () {
alert('hello');
});

AJAX

$(document).ready(function(){
$.ajax({ url:baseUrl+"/Member_controller/Section",
       // context: document.body,
       dataType: "json",
        success: function(data){
           //alert("done");
          //alert(data);

          $('#ProcessModel').html(data);
        }});

});

view

<div id="ProcessModel"></div>
user9437856
  • 2,360
  • 2
  • 33
  • 92
  • @Rory, I think you have to check again my question. – user9437856 Feb 02 '19 at 18:20
  • 1
    No, it's a duplicate. If you read that question you will understand why this does not work. Your fix is to use `$(document).on('change', '.dropdownDuration', function() { ... ` instead. – Rory McCrossan Feb 02 '19 at 18:26
  • @RoryMcCrossan, oh! yes, your last comment is working for me. Thanks for the help. I was confused in the duplicate link. – user9437856 Feb 02 '19 at 18:38

1 Answers1

1

Because .ajax() is asynchronous you need to delegate the change event because the select element (i.e.: dropdownDuration) does not exist yet:

$('button').on('click', function(e) {
    var data = '<!--more HTML code here-->' +
            '<select name="yearDropdown"  class="form-control dropdownDuration">' +
            '<option selected disabled >Select duration</option>' +
            '<option value="12m">1 Year</option>' +
            '<option value="6m">6 months</option>' +
            '</select>' +
            '<!--more HTML code here-->';
    $('#ProcessModel').html(data);
})

$('#ProcessModel').on('change', '.dropdownDuration', function () {
    console.log('hello: ' + this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="ProcessModel"></div>
<button>Simulate ajax</button>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
  • You added the select code in the script. but I am getting from the controller and I have some logic part in the above select dropdown. – user9437856 Feb 02 '19 at 18:14
  • @user9437856 No, I added the select code inside the button click. If you don't click the button no select code is added to the ProcessModel..... It's a way to simulate the arror condition – gaetanoM Feb 02 '19 at 19:03