VPF::Динамическая подгрузка < select> - Форум программистов

WebUser

Дата 15.4.2007, 13:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 15.4.2007

Репутация: нет
Всего: нет

помогите разобратся, имеется сайт http://moikrug.ru/profile/educationadd/
нужно сделать также как и там выбор списков регионов, без перезагрузки страници

Когда выбираешь страну, скрипт даёт команду PHP скрипту вывести список регионов из БД MySQL
если выбираешь регионы то PHP скрипт должен вывести из БД города, точно также как на том сайте

искал в инэте, нигде не нашёл, пришлось с этого сайта брать, но вот проблема, как передавать данные немогу понять, вот тут если запустить ссылку то

http://moikrug.ru/widgets/ajax/regions?q=648 выведится список регионов
http://moikrug.ru/widgets/ajax/cities?q=14068 выведится списоу городов

я так понял это массив JS но я его совсем незнаю, владею немного PHP

вот отрывок того что выводится по ссылке

Код


// BEGIN JsHttpRequest JsHttpRequest.dataReady( 
'0', // this ID is passed from JavaScript frontend '', 
{ 'q': '648', 'result': [ 
{ 'id': '18009', 'parent_id': '648', 'russian': 'Киев и Киевская область' }, 
{ 'id': '18019', 'parent_id': '648', 'russian': 'Автономная Республика Крым' }, 
{ 'id': '18018', 'parent_id': '648', 'russian': 'Винницкая область' }, 
{ 'id': '18017', 'parent_id': '648', 'russian': 'Волынская область' }, 
{ 'id': '18016', 'parent_id': '648', 'russian': 'Днепропетровская область' } ... ] 
} ) // END JsHttpRequest

я так понял он делается средствами PHP с полученых данных, делает выборку данных из MySQL
но как он дальше делает я немогу понять, ведь ещё составляется список <option></option> как они передаются?

помогите пожалуйста, уже бъюсь столько времени

LSD

Дата 15.4.2007, 13:32 (ссылка)

(нет голосов)

Загрузка ...

Leprechaun Software Developer

Профиль
Группа: Модератор
Сообщений: 15718
Регистрация: 24.3.2004
Где: Dublin

Репутация: 1
Всего: 538

Модератор: перемещено из Java: Общие вопросы

--------------------

Disclaimer: this post contains explicit depictions of personal opinion. So, if it sounds sarcastic, don't take it seriously. If it sounds dangerous, do not try this at home or at all. And if it offends you, just don't read it.

Alx

Дата 16.4.2007, 00:05 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

во яндекс как скатился..

Добавлено через 1 минуту и 36 секунд

Цитата(WebUser @ 15.4.2007, 13:26

)

уже бъюсь столько времени

а ведь столько раз эту фишку делали.. даже либ готовых наверное уже с горлышком накопилось..

--------------------

WebUser

Дата 16.4.2007, 06:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 15.4.2007

Репутация: нет
Всего: нет

Цитата(Alx @ 16.4.2007, 00:05)

во яндекс как скатился..

Добавлено @ 00:07

Цитата(WebUser @ 15.4.2007, 13:26

)

уже бъюсь столько времени

а ведь столько раз эту фишку делали.. даже либ готовых наверное уже с горлышком накопилось..

я пытался найти на форуме, но не смог найти, может не правильно искал.
Не подскажите по каким запросам искать?

Exception

Дата 16.4.2007, 07:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 4525
Регистрация: 26.12.2004

Репутация: 1
Всего: 186

Цитата(WebUser @ 15.4.2007, 14:26

)

но как он дальше делает я немогу понять, ведь ещё составляется список <option></option> как они передаются?

Естественно, никак они не передаются smile

.
JS получает тот код с сервера и по нему строит option'ы.

Кстати, вот строящий код:

Код

<script type="text/javascript">//<![CDATA[
window.load[window.load.length] = function(){
    $('mainform').blur();
    setDefaultValueForInput('Начало', 'education_start_year');
    setDefaultValueForInput('Окончание', 'education_end_year');
    hide('education_left_from_grade_note');
    hide('education_field_note');
            var education_degree_school = '2318';
    var education_degree_spec = '243';
    if (0) {
     if (0) {
            hide('fieldRow');
        } else {
            var faculties = new DependingSelect( 'faculties', { 
                language: 'russian', 
                multiple: false, 
                invitingOptionName: 'Выберите факультет', 
                command: '/widgets/ajax/faculties', 
                otherWord: 'Другое', 
                otherHandler: function(state) {
                 $('education_field').disabled = !state;
                 $('education_field')[state ? 'removeClassName' : 'addClassName']('disabled');
                    $('education_field').style.display = state ? '' : 'none';
                }
            } );            
            hide('leftFromGradeRow');
        }
        return;
    }
    
    
    var show = function(element) {
        var element = $(element);
        if (!element) return;
        $(element).style.display = ''
    }
    
    var toggleDegreeSchool = function (state) {
        hide('fieldRow');
        hide('universityAbbr');
        hide('leftFromGradeRow');
        hide('middleSchoolCellForm');
        show('education_school_other');
        if (state == 'middle') {
            show('leftFromGradeRow');
            show('middleSchoolCellForm');
        } else if (state == 'spec') {
            show('fieldRow');
        } else if (state == 'university') {
            show('fieldRow');
            show('universityAbbr');
        } else {
            ;
        }
    }
    

    var cmd = '';
            cmd = '/widgets/ajax/unis4list';
        toggleDegreeSchool();
        
    var countries = new DependingSelect( 'countries', { 
        language: 'russian', 
        multiple: false, 
        invitingOptionName: '- Выберите страну -'
    } );
    var regions = new DependingSelect( 'regions', { 
        language: 'russian', 
        multiple: false, 
        invitingOptionName: '- Выберите регион -', 
        command: '/widgets/ajax/regions', 
        instantSelect: true
    } );
    var cities = new DependingSelect( 'cities', { 
        language: 'russian', 
        multiple: false, 
        invitingOptionName: '- Выберите город -', 
        command: '/widgets/ajax/cities', 
        otherWord: 'Другой', 
        otherHandler: function(state) {
         $('education_city_other').disabled = !state;
         $('education_city_other')[state ? 'removeClassName' : 'addClassName']('disabled');
            $('education_city_other_row').style.display = state ? '' : 'none';
        }
    } );
    var schools = new DependingSelect( 'schools', { 
        language: 'russian', 
        multiple: false, 
        invitingOptionName: '- Выберите учебное заведение -', 
        command: cmd, 
        otherWord: 'Другое', 
        
        otherHandler: function(state) {
            $('schoolOtherRow').style.display = state ? '' : 'none';
         ['education_school_other', 
            'education_school_other_type_did', 
            'education_school_other_number', 
            'education_school_other_abbr'].each(function(id){
             $(id).disabled = !state;
             $(id)[state ? 'removeClassName' : 'addClassName']('disabled');
            });
        }
        
    } );
    var faculties = new DependingSelect( 'faculties', { 
        language: 'russian', 
        multiple: false, 
        invitingOptionName: 'Выберите факультет', 
        command: '/widgets/ajax/faculties', 
        otherWord: 'Другое', 
        otherHandler: function(state) {
         $('education_field').disabled = !state;
         $('education_field')[state ? 'removeClassName' : 'addClassName']('disabled');
            $('education_field').style.display = state ? '' : 'none';
        }
    } );
    faculties.bindToParent( schools );
    schools.bindToParent( cities );
    cities.bindToParent( regions );
    regions.bindToParent( countries );

    setDefaultValueForInput('Город, если другой', 'education_city_other');
    setDefaultValueForInput('Другое / Полное наименование', 'education_school_other');
    setDefaultValueForInput('№', 'education_school_other_number');
    setDefaultValueForInput('Другое / Аббревиатура', 'education_school_other_abbr');
    
    var degree = $('education_degree_did');
    var prevDegree = degree.value;
    
    Event.observe(degree, 'change', function (){
        switch (degree.value) {
        case education_degree_school:
            schools.setCommand('/widgets/ajax/schools4list');
            toggleDegreeSchool('middle');
            break;
        case education_degree_spec:
            schools.setCommand('/widgets/ajax/colleges4list');
            toggleDegreeSchool('spec');
            break;
        case '0':
            schools.setCommand('/widgets/ajax/unis4list');
            toggleDegreeSchool();
            break;
        default:
            if (prevDegree != education_degree_school && prevDegree != education_degree_spec && prevDegree != '0') break;
            schools.setCommand('/widgets/ajax/unis4list');
            toggleDegreeSchool('university');
        }
        prevDegree = degree.value;
    });
    
};
//]]>
</script>

А вот библиотека, которая ему нужна:

http://moikrug.ru/data/scripts_3637413260.js?3436015138

Другое дело, что тебе, наверное удобнее будет сделать это более простым способом, то бишь самому парсить ответ сервера.

Цитата(WebUser @ 16.4.2007, 07:50

)

Не подскажите по каким запросам искать?

Ай-ай-ай, а почему я с первого раза нашёл?

Alx

Дата 16.4.2007, 07:22 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

Exception,

Цитата

http://www.thefutureoftheweb.com/blog/2006...-side-scripting

кстати, очень даже хорошая вещь!! надо будет запомнить.

--------------------

WebUser

Дата 16.4.2007, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 15.4.2007

Репутация: нет
Всего: нет

Alx, за ссылку спасибо, вариант неплохой, но всёже это не то, там данные поступают без value, только имена. А ведь должно получится таким образом <option value="4">Москва</option>

Exception, всё верно, все функции JS я сохранил у себя на localhost и путя изменил туда же, тоесть когда загружаю скопированную страницу http://localhost/index.php у меня всё работает как надо

все данные берутся по ссылки
http://moikrug.ru/widgets/ajax/regions?q=648

путь я указал в место
command: '/widgets/ajax/regions',

на этот
command: 'http://www.moikrug.ru/widgets/ajax/regions',

всё работает так как и нужно, но ведь данные скрипт получает с того сайта а мне нужно со своего

я решил сделать таким образом, полученный результат при выполнении по ссылки
http://moikrug.ru/widgets/ajax/regions?q=648
сохранить в файл например data.js

в нём находится

Код


// BEGIN JsHttpRequest JsHttpRequest.dataReady( 
'0', // this ID is passed from JavaScript frontend '', 
{ 'q': '648', 'result': [ 
{ 'id': '18009', 'parent_id': '648', 'russian': 'Киев и Киевская область' }, 
{ 'id': '18019', 'parent_id': '648', 'russian': 'Автономная Республика Крым' }, 
{ 'id': '18018', 'parent_id': '648', 'russian': 'Винницкая область' }, 
{ 'id': '18017', 'parent_id': '648', 'russian': 'Волынская область' }, 
{ 'id': '18016', 'parent_id': '648', 'russian': 'Днепропетровская область' } ... ] 
} ) // END JsHttpRequest

а путь в скрипте я указал такой
command: 'data.js',

но почемуто список не загружается, пишет "Идёт загрузка..." и больше ничего не происходит

что я не так делаю?

Это сообщение отредактировал(а) WebUser - 16.4.2007, 13:29

Exception

Дата 16.4.2007, 18:27 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 4525
Регистрация: 26.12.2004

Репутация: 1
Всего: 186

Цитата(WebUser @ 16.4.2007, 14:23

)

что я не так делаю?

Используешь библиотеку, пользоваться которой не умеешь. Зачем?

Цитата(WebUser @ 16.4.2007, 14:23

)

вариант неплохой, но всёже это не то, там данные поступают без value, только имена. А ведь должно получится таким образом <option value="4">Москва</option>

Просто включи /dev/head и всё путём smile

Цитата(WebUser @ 15.4.2007, 14:26

)

Когда выбираешь страну, скрипт даёт команду PHP скрипту вывести список регионов из БД MySQL
если выбираешь регионы то PHP скрипт должен вывести из БД города, точно также как на том сайте

Создаём файлы countries.php, regions.php, cities.php.

countries.php
Возвращает список стран в таком виде:

Код

[
    { id: 0, name: 'Россия' },
    { id: 1, name: 'США' },
    { id: 2, name: 'Украина' }
]

regions.php?country=XXX
Возвращает список регионов в стране с id country в таком виде:

Код

[
    { id: 0, name: 'Центральный' },
    { id: 1, name: 'Северозападный' },
    { id: 2, name: 'Бла бла бла' }
]

cities.php?region=XXX
Возвращает список городов в регионе с id region в таком виде:

Код

[
    { id: 0, name: 'Питер' },
    { id: 1, name: 'Москва' },
    { id: 2, name: 'Урюпинск' }
]

Естественно, идентификаторы должны быть уникальны среди регионов/стран/городов, соответственно, и должны браться из базы данных.

Далее, пусть у нас есть

Код

<form>
    <select id="countries" onchange="beginLoad ('regions');">
    </select>

    <select id="regions" onchange="beginLoad ('cities');">
    </select>

    <select id="cities">
    </select>
</form>

Клиентский код (помести в отдельный .js-файл):

Код

function load (url, callback) {
    var httpObj = false;
    if (typeof XMLHttpRequest != 'undefined') {
        httpObj = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try{
            httpObj = new ActiveXObject('Msxml2.XMLHTTP');
        } catch(e) {
            try{
                httpObj = new ActiveXObject('iMicrosoft.XMLHTTP');
            } catch(e) {}
        }
    }
    if (!httpObj) return;

    httpObj.onreadystatechange = function() {
        if (httpObj.readyState == 4) { // when request is complete
            callback(httpObj.responseText);
        }
    };
    httpObj.open('GET', url, true);
    httpObj.send(null);
}

fillSelect (elementId, JSON) {
    var select = document.getElementById (elementId);

    while (select.options.length) {
        select.options[0] = null;
    }

    var data = eval(JSON);
    for (var i = 0; i < data.length; i++) {
        select.options[select.options.length] = new Option(data[i].id, data[i].name);
    }
}

beginLoad (elementId) {
    switch (elementId) {
        case "countries":
            load ("countries.php", function (response) { fillSelect ("countries", response); });
            break;
        case "regions":
            var countries = document.getElementById ("countries");
            load ("regions.php?country=" + countries.options[countries.options.selectedIndex].value , function (response) { fillSelect ("regions", response); });
            break;
        case "cities":
            var regions = document.getElementById ("regions");
            load ("cities.php?region=" + cities.options[cities.options.selectedIndex].value , function (response) { fillSelect ("cities", response); });
            break;
    }
}

Вот эта функция должна вызываться при загрузке страницы:

Код

function onLoad () {
    beginLoad ("countries");
}

Вроде как всё.

Это сообщение отредактировал(а) Exception - 16.4.2007, 18:31

Alx

Дата 16.4.2007, 19:10 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

Exception,
маладца smile

сам писал?

--------------------

Exception

Дата 16.4.2007, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 4525
Регистрация: 26.12.2004

Репутация: 1
Всего: 186

Дык это за десять минут пишется.
Код не проверял, но должен работать.

Это сообщение отредактировал(а) Sardar - 16.4.2007, 21:18

WebUser

Дата 17.4.2007, 12:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 15.4.2007

Репутация: нет
Всего: нет

Exception, спасибо огромное, но чесно сказать я всёравно не понял smile

вы уж извините, но я джава скрипт незнаю, мне сложно понять, и что-то сделать. Но всёравно спасибо за помощь.

Я тут нашёл один на сайте
http://www.salix.gr/ajax_linked_selectboxes

вот сам пример
http://www.salix.gr/demos/lsb_demo/example_2.php

всё как и надо, при выборе первого списка, пока второй загружается высвечивается "Идёт загрузка..."
для меня это важно, также структура БД тоже как у меня (один к одному)

также там заметил что можно указав значения можно получить выполненный результат, а не изначальную форму таким образом форму можно применить в редактировании чего либо или при поиске
тоесть все выбранные элементы выделяются и курсор на них направлен.

12345c

Дата 17.4.2007, 13:34 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Вероятно, тут пример, только подправить JS, чтобы в Мозилле работал:
http://forum.vingrad.ru/index.php?showtopic=136858 - Работа функции JS для передачи данных из XMLHttp, динамическая навигация на основе select

Exception

Дата 17.4.2007, 19:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 4525
Регистрация: 26.12.2004

Репутация: 1
Всего: 186

Цитата(WebUser @ 17.4.2007, 13:20

)

вы уж извините, но я джава скрипт незнаю, мне сложно понять, и что-то сделать.

Я же тебе полный код написал smile

! Не надо ни в чём разбираться, он же работает. Что-то непонятно -- спроси конкретно.

Конечно, не хочешь -- не пользуй smile

.
Просто этот код куда проще чем то, на что ты дал линку.

WebUser

Дата 20.4.2007, 10:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 15.4.2007

Репутация: нет
Всего: нет

Exception, да вы не обижайтесь, правдо, ну на самом деле, просто мне сложно даже в этом разобратся, ну что сделаешь я ведь JS вообще не изучал ни сколько
а за помощь всёравно Вам спасибо

andro_id

Дата 24.4.2007, 15:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 17.4.2007
Где: Москва

Репутация: нет
Всего: 1

Цитата

countries.php
Возвращает список стран в таком виде:

Код


[
    { id: 0, name: 'Россия' },
    { id: 1, name: 'США' },
    { id: 2, name: 'Украина' }
]

А как с помощью php получить выборку из БД такого вида?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »