Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Определение select через ajax


Автор: Mastodont 19.6.2013, 17:46
На странице товара интернет-магазина выводится нормальная цена товара, цена со скидкой,  а также списки <select> для выбора ширины и высота матраса.

Также есть mysql таблица, в которой содержатся отношения [id товара] - [ширина] - [высота] - [цена] - [цена со скидкой]

При первоначальной загрузке страницы в select ширины попадает минимальное значение ширины из таблицы для данного товара. Чтобы сформировать список select высот товара, из таблицы выбираются все высоты для данного id товара и выбранной (в данном случае минимальной) ширины товара.

Соответственно, в поля цены и цены со скидкой выводятся цифры, соответствующие выбранным в данный момент в списках select ширины и высоты

Затем интереснее:

при изменении ширины меняется select высот - он заполняется новыми "ширинами" для выбранной высоты. Это работает

Далее на основании вновь измененной ширины и высоты должны выводится новые цены. Так вот тут не работает. Происходит такая вещь:

при выборке цены используется не новая ширина, а ровно предыдущая. То есть js-код width_matras = document.getElementById('matras_width_select').value обновляет переменную ровно при следующем перевыборе списка ширины.

Кто знает, почему ровно предыдущая? почему js не может сразу определить значения select-списка, только что замененного через ajax?

Привожу код:

select'ы ширины и высоты на странице товара
Код

<select id="matras_width_select" name="matras_width_select" onchange="ch_gabarity(); ch_cena_of_gabarity();">
                <?php
        $tovar_gabarity_query = "SELECT tovar_shir FROM tovar_size WHERE tovar_id = '{$data['data_id']}' GROUP BY tovar_shir";
        $tovar_gabarity_result = mysql_query($tovar_gabarity_query);
        
        if (!mysql_num_rows($tovar_gabarity_result) or $tovar_gabarity_result == false) {
        } else {
        
            while ($tovar_gabarity_data = mysql_fetch_assoc($tovar_gabarity_result)) {
            
                echo '<option value="'.$tovar_gabarity_data['tovar_shir'].'">'.$tovar_gabarity_data['tovar_shir'].'</option>';
            
            }
        
        }
        ?>
</select>

<select id="matras_height_select" name="matras_height_select" onchange="ch_cena_of_gabarity();">
                <?php
        $tovar_gabarity_query = "SELECT tovar_visota FROM tovar_size WHERE tovar_id = '{$data['data_id']}' GROUP BY tovar_visota";
        $tovar_gabarity_result = mysql_query($tovar_gabarity_query);
        
        if (!mysql_num_rows($tovar_gabarity_result) or $tovar_gabarity_result == false) {
        } else {
        
            while ($tovar_gabarity_data = mysql_fetch_assoc($tovar_gabarity_result)) {
            
                echo '<option>'.$tovar_gabarity_data['tovar_visota'].'</option>';
            
            }
        
        }
        ?>
        </select>


Сам ajax находится в конце <head>

Код

function ch_gabarity() {

    //получаем id товара
    var item_id = document.getElementById('item_id').value;
    
    //получаем выбранную ширину
    var width_matras = document.getElementById('matras_width_select').value;
    
    //ограничиваем список "высота" в зависимости от списка "ширина"
    abc_query = new XMLHttpRequest();
    abc_query.onreadystatechange = function() {
        if (abc_query.readyState == 4 && abc_query.status == 200) {
            document.getElementById('matras_height_select').innerHTML = abc_query.responseText;
            
            }
    }
    abc_query.open("GET", "http://<?php echo $parameters['project_url']; ?>/system/ajax_action.php?tovar_id=" +item_id+ "&shirina=" +width_matras+ "&ch_select=1", true);
    abc_query.send();

}

function ch_cena_of_gabarity() {

    //получаем id товара
    var item_id = document.getElementById('item_id').value;
    
    //получаем выбранную ширину
    var width_matras = document.getElementById('matras_width_select').value;
    
    //получаем выбранную высоту
    
    var height_matras = document.getElementById('matras_height_select').value;
    
    //меняем цену и цену со скидкой товара в зависимости от выбранной ширины или высоты
    xhttp=new XMLHttpRequest();    
    xhttp.onreadystatechange=function() {    
        if (xhttp.readyState==4 && xhttp.status==200)
            document.getElementById('cena').innerHTML=xhttp.responseText;    
    }    
    xhttp.open("GET", "http://<?php echo $parameters['project_url']; ?>/system/ajax_action.php?tovar_id=" +item_id+ "&shirina=" +width_matras+ "&visota=" +height_matras+ "&ch_cena=1", true);    
    xhttp.send();
    
}


И php-код, исполняющий ajax-запрос

Код

///меняем высоту в зависимости от ширины
if ($_GET['ch_select'] == 1) {

    $select_aviable_visota_query = "SELECT * FROM tovar_size WHERE tovar_id = {$_GET['tovar_id']} AND tovar_shir = '{$_GET['shirina']}';";
    $select_aviable_visota_result = mysql_query($select_aviable_visota_query);
    
    while ($select_aviable_visota_data = mysql_fetch_assoc($select_aviable_visota_result)) {
    
        $select_option .= '<option>'.$select_aviable_visota_data['tovar_visota'].'</option>';
    
    }
    
    echo $select_option;

}

//меняем цену и цену со скидкой в зависимости от ширины и высоты
if ($_GET['ch_cena'] == 1) {
    
    $tovar_size_query = "SELECT * FROM tovar_size WHERE tovar_id = '{$_GET['tovar_id']}' AND tovar_shir = '{$_GET['shirina']}' AND tovar_visota = '{$_GET['visota']}';";
    $tovar_size_result = mysql_query($tovar_size_query);
    

    if(!mysql_num_rows($tovar_size_result) or $tovar_size_result == FALSE) {
    } else $tovar_size_data = mysql_fetch_assoc($tovar_size_result);
            
        $abc = '<div style="float:left; margin:-3px 15px 0 0;"><h3>Цена</h3></div>
            <div style="text-align:center; margin:10px 10px 0 0;color:#abb8c2; font-size:12px; text-decoration:line-through; float:left; ">от '.ru_number($tovar_size_data['tovar_old_cena']).' руб</div>
            <span id="cena_matrasa">'.ru_number($tovar_size_data['tovar_cena']).' руб.</span>
            <div class="null"></div>';
            
    echo $_GET['visota'];

}

Автор: Arantir 19.6.2013, 17:58
Проблема некоторых вопрошающих в том, что они выкладывают кучу ненужной информации и недостаточно нужной.
Если у Вас проблемы с JS, то PHP тут вообще ни при чем. Только место занимает. Ваши коды у себя все равно никто запустить не сможет и то, что они выводят, придется "экстрасенсить".
Картинка вообще непонятно зачем =)

Можете привести код select-ов из исходного кода страницы? Можете показать, что выходит после ajax-запроса (как меняется select) - так же из исходного кода страницы. В общем только то, с чем работает Ваш JS-код, без лишнего.
А так же то, каким образом Вы получаете ширину после ajax-запроса.
Ajax-запрос происходит по какому событию? Изменение значения select?

Скорее всего проблема в том, что Вы не учли тот факт, что запрос асинхронный.

Автор: valiko 19.6.2013, 21:49
Привет. Я думаю что проблема в том, что вы генерируете список для select, а его самого не обновляете.
Вариант 1. Генерируйте все вместе (select и options), таким образом предыдущее значение стереться с DOM.
Вариант 2. Создайте div на JavaScript-е, добавьте в него новый select и удалите старый. Что то вроде этого скрипта. Надеюсь помог решить проблему
Код

<!DOCTYPE html>
<html>
<head>
<script>
var count = 0;
function displayDate()
{
var s = document.getElementById("i5");

var replacement = document.createElement("button");
replacement.setAttribute('id','i5');
replacement.setAttribute('type','button');
replacement.setAttribute('count',count);
replacement.setAttribute('onclick','displayDate()');
replacement.innerHTML = 'Display Date ' + count++;
document.getElementById("demo").removeChild(s);
document.getElementById("demo").appendChild(replacement);

}
</script>
</head>
<body>

<h1>My First JavaScript</h1>
<p id="demo">This is a paragraph.

<button id="i5" type="button" onclick="displayDate()">Display Date</button>
</p>
</body>
</html> 



Этот ответ добавлен с нового Винграда - http://ru.vingrad.com//object-id51c1c4ac6ccc192c04000002#findElement_E7045_51c1fd1e6ccc19955e0005d6_0

Автор: Mastodont 1.7.2013, 15:51
Вариант 1 и вар. 2 что то не прокатил, хотя может не совсем правильно их использовал, так как js знаю чуть больше, чем основы.

Но я добавил в select пункт "выбрать высоту", что создало необходимость так или иначе выбирать какой либо его пункт. Теперь все ок smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)