IE10 - JQuery ajax html not loading data -

i have done research looking @ following post (ajax not work on ie10) , few other websites, unfortunately did not fixed problem , that's why need ;)

below can see jquery ajax script, problem can ajax , return value errordivstyle, not able load $("#mainview").html(data); data returned php script , html.

please note works fine in chrome, ff , ie 9 not ie10. there doing wrong ??

<script type="text/javascript">         $(document).ready(function () {         var category = $("#category").val();         $("#category").change(function(){             $.ajax({                 type: "post",                 url: "test.php",                 data: $(this).serialize(),                 cache: false,                 success: function(data) {                     if(data)                     {                         $("#mainview").html(data);                         $("#errordivstyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show();                     }                 }             });             return false;         });     });     </script> 

i see nothing blatantly wrong code.

if using newer version of jquery suggest changing:

$("#category").change(function(){ 

into

$("#category").on('change', function(){ 

and after

cache: false, 

add

datatype: 'html', 

also highly recommend using console.log()

if(data) {     //check if expected data correct     console.log(data);     //make sure can target #mainview     //should output amount of #mainviews on screen     console.log($("#mainview").length);      $("#mainview").html(data);     $("#errordivstyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show(); } 

edit:

    $("#category").on('change', function(){         e.preventdefault();         $.ajax({             type: "post",             url: "test.php",             data: $(this).serialize(),             cache: false,             datatype: 'html',             success: function(data) {                 if(data)                 {                     $("#mainview").html(data);                     $("#errordivstyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show();                 }             }         });     }); 

why returning false anyways? realized text field change listening for. e.preventdefault() isn't necessary either...

also if want pass single value test.php can try this:

    $("#category").on('change', function(){         $.ajax({             url: "test.php?q="+$(this).val(),             cache: false,             datatype: 'html',             success: function(data) {                 if(data)                 {                     $("#mainview").html(data);                     $("#errordivstyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show();                 }             }         });     }); 

edit: recursively trim array

/** * returns recursively trimmed variable * * @access   public * @param    mixed * @return   mixed */ if ( ! function_exists('trim_r')) {     function trim_r($var)     {         //in here can add more code handle objects did not because not using them function         //if (is_array($var) || is_object($var)){some code}         if (is_array($var))         {             return array_map('trim_r', $var);         }         else         {             return trim($var);         }     } }   // usage examples $_post = trim_r($_post); $_get = trim_r($_get); $_request = trim_r($_request); $custom_array = trim_r($custom_array);