За последние 24 часа нас посетили 16845 программистов и 1646 роботов. Сейчас ищут 832 программиста ...

(PHP + MySQL + $.ajax) != IE

Тема в разделе "JavaScript и AJAX", создана пользователем tectolog, 18 мар 2011.

  1. tectolog

    tectolog Активный пользователь

    С нами с:
    1 фев 2011
    Сообщения:
    7
    Симпатии:
    0
    Привет всем.
    Не могу разобраться с глюком в ИЕ(6/7/8) при работе динамически подгружаемых селектов и загрузки данных из БД на страницу через функцию jquery $.ajax. Подскажите какое-нибудь направление для поиска решений.

    Описание проблемной ситуации:
    1. На сайте присутствуют две независимые друг от друга формы, состоящие из select-ов. В первой форме значения option-ов определены заранее в php-файле. Каждый select подвешен на jquery change, по факту чего через $.ajax в контроллер отправляются selected значения формы, далее передаются в модель, в модели делается запрос к БД, вынимаются соответствующие данные и массивом передаются обратно в контроллер, а из него в лайот, который через $.ajax (dataType: "html") вставляется в указанный элемент страницы - здесь все работает во всех браузерах, включая ИЕ(6/7/8).
    Пример кода jquery:
    Код (Text):
    1. $(document).ready(function(){
    2.     $("#width, #profile, #diametr").change(function(){
    3.         $.ajax({
    4.             type: "POST",
    5.             dataType: "html",
    6.             url: "typesize/result_ajax",
    7.             data: {'width' : $("#width option:selected").text(),
    8.             'profile' : $("#profile option:selected").text(),
    9.             'diametr' : $("#diametr option:selected").text()},
    10.             success: function(data){
    11.                 $("#result").html(data);
    12.             }
    13.         });
    14.     });
    15. });
    2. Во второй форме значения option-ов загружаются из БД, в каждый следующий select загружаются данные из БД по факту выбора option в предыдущем select. Здесь так же select-ы подвешены на jquery change, по факту чего через $.ajax в контроллер отправляется selected значение, далее передается в модель, в модели делается запрос к БД, вынимаются соответствующие данные и массивом передаются обратно в контроллер, а из него в лайот, который через $.ajax (dataType: "html") вставляется в указанный следующий select - здесь все работает во всех браузерах, так же в ИЕ7 и 8 со следующими оговорками:
    Первая HTML+CSS проблема: открывающееся окно списка select смещается вверх браузера (липнет к верху монитора, поверх браузера)- как это можно вылечить?
    Вторая HTML+CSS проблема: по факту выбора значения в select, изменяется ширина (уменьшается) следующего select, в который вставляются option со значениями из БД по факту выбора значения в текущем select. Почему это происходит? В CSS на select задана width в процентах.
    Третья (самая главная проблема): по факту нижеследующего описания не отражаются данные, которые возвращаются из БД - это происходит только в ИЕ6/7/8 (в остальных браузерах все работает на ура!)
    описание - результат работы с select-ами заключается в том, что когда выбраны все динамически подгружаемые select-ы в контроллер отправляются их значения, откуда передаются в модель, там производится выборка из БД, полученный массив отдается обратно в контроллер, а из него в соответствующий лайот для распределения данных по элементам самого лайота, чтобы через $.ajax (dataType: "html") все это целиком вставилось в элемент страницы.
    Примеры скрипта jquery:
    Код (Text):
    1. ...
    2. $("#modifi").change(function(){
    3.         $.ajax({
    4.                 type: "POST",
    5.                 dataType: "html",
    6.                 url: "select/result_ajax",
    7.                 data: {'year' : $("#year option:selected").text(),
    8.                 'model' : $("#model option:selected").text(),
    9.                 'marka' : $("#marka option:selected").text(),
    10.                 'modifi' : $("#modifi option:selected").text()},
    11.                 success: function(data){
    12.                     $("#result_select").html(data);
    13.                 }
    14.         });
    15.     });
    16. ...
    DebugBar выдает следующее:
    заголовки:

    Код (Text):
    1. POST /select/select/result_ajax HTTP/1.1
    2. x-requested-with: XMLHttpRequest
    3. Accept-Language: ru
    4. Referer: http://magazin.local/select/auto
    5. Accept: text/html, */*
    6. Content-Type: application/x-www-form-urlencoded
    7. Accept-Encoding: gzip, deflate
    8. User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; Trident/4.0; FunWebProducts; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
    9. Host: magazin.local
    10. Content-Length: 56
    11. Connection: Keep-Alive
    12. Cache-Control: no-cache
    13. Cookie: ci_session=a%3A4%3A%7Bs%3A10%3A%22session_id%22%3Bs%3A32%3A%22b94b1288854f144f4c5ef8ba4b081189%22%3Bs%3A10%3A%22ip_address%22%3Bs%3A9%3A%22127.0.0.1%22%3Bs%3A10%3A%22user_agent%22%3Bs%3A50%3A%22Mozilla%2F4.0+%28compatible%3B+MSIE+6.0%3B+Windows+NT+5.1%3B%22%3Bs%3A13%3A%22last_activity%22%3Bs%3A10%3A%221300441235%22%3B%7Da55192a8edc7115417675ebf8bbf981c
    14.  
    15. year=1998-2007&model=Kangoo&marka=Renault&modifi=1.9+dCi
    HTTP/1.1 200 OK
    Date: Fri, 18 Mar 2011 09:40:43 GMT
    Server: Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8k PHP/5.3.3
    X-Powered-By: PHP/5.3.3
    Content-Length: 887
    Keep-Alive: timeout=5, max=97
    Connection: Keep-Alive
    Content-Type: text/html; charset=UTF-8

    контент:
    Код (Text):
    1. <div id="result_tyre">
    2.                                 <span class="title_result">ШИНЫ</span><br>
    3.                                 <span class="subtitle_result">Штатные размеры</span><br><ul></ul><span class="subtitle_result">Нештатные размеры</span><br><ul></ul><span class="subtitle_result">Размеры для тюнинга</span><br><ul></ul>                            </div>
    4.                             <div id="result_disk">
    5.                                 <span class="title_result">ДИСКИ</span><br>
    6.                                 <span class="subtitle_result">Штатные размеры</span><br><ul></ul><span class="subtitle_result">Нештатные размеры</span><br><ul></ul><span class="subtitle_result">Размеры для тюнинга</span><br><ul>                            </div>
    Если кто знает, помогите разобраться. Если необходимо, скину остальные скрипты для общего понимания проблемы.
    Примечание: все скрипты, файлы сайта, БД, таблицы, поля таблиц в utf-8, отличная от utf-8 кодировка cp1251 использовалась при импорте CSV экселевского файла. В экселевском формате находились кириллические текстовые данные, которые при импорте с настраиваемой кодировкой utf-8 просто обнуллись, поэтому пришлось использовать cp1251.

    Заранее благодарю за помощь.