CODEWITHSUNDEEP
jqueryinternet-explorer
RyanP13
RyanP13

Reputation: 7743

jquery .change not firing in IE but working in FFOX

I have the following HTML:

<form method="post" action="#" name="dialog_head" id="dialog_head" class="jqtransform">   
    <ul>
        <li class="pdf">
            <a title="This PDF document opens in a new window" target="_blank" href="#">Save as PDF</a>
        </li>
        <li class="print">
            <a target="_blank" href="#">Print Price Report</a>
        </li> 
        <li>
            <label for="dialog_select">Select Price Report:</label>
            <select name="dialog_select" id="dialog_select"><option value="PriceReport/13415939">23 April 2010</option>
<option value="PriceReport/13415510">16 April 2010</option>
<option value="PriceReport/13415009">09 April 2010</option>
<option value="PriceReport/13414608">02 April 2010</option>
</select>
        </li>   
    </ul>
</form>

With the following jqQuery event listener attached to the select:

   $('select#dialog_select').live('change', function() {
        alert("foo");

        //set the select value
        var $optionVal = $(this).val();

        if ($optionVal != '') {

            // remove testing class for when new report has been requested
            $('#cboxLoadedContent > div').addClass('dialog_loading').removeClass('dialog_loaded');

            // call the price report and replace current price report
            $.ajax({
                type: 'GET',
                url: $optionVal,
                dataType: 'html',
                cache: true,
                success: function(data) {

                    var $findData = $(data).find('.Section1');

                    $('.Section1').fadeOut('fast', function() {

                        $('.Section1').replaceWith($findData).fadeIn('fast');

                        $('.Section1, .Section1 table').css({
                            'width': '95%',
                            'margin': 'auto'
                        });

                        // testing class for when report has been successfully loaded
                        $('#cboxLoadedContent > div').removeClass('dialog_loading').addClass('dialog_loaded');

                    });
                },

                error: function(xhr, ajaxOptions, thrownError) {
                    // testing class for load error
                    $('#cboxLoadedContent > div').removeClass('dialog_loading dialog_loaded').addClass('dialog_load_failure');
                    alert(xhr.status);
                    alert(thrownError);
                }

            });
        }

    });

This works in FFOX but not in IE7 and i don't know why???

Upvotes: 0

Views: 216

Answers (2)

Greg
Greg

Reputation: 7922

  $('#dialog_select').change(function() { ... });

should do the trick.

There's no point in prepending your id with "select" by the way. The only thing it could do is slow down jquery by making it isolate your select tags. Id is always fastest.

EDIT - as Sadat mentioned, this code should be wrapped in at least a

$(document).ready(function(){ ... });

if it isn't already.

Upvotes: 3

Sadat
Sadat

Reputation: 3501

Try like-

$(
  //do your all job here
   $('select#dialog_select').live('change', function() {
   ....
   ....
   )

);

Upvotes: 1

Related Questions