Yii2 ajax : одновременное обновление нескольких блоков на странице - Gorgona66/elena.spiktarenko-gmail.com GitHub Wiki
Релизация: 1) во view(главный вид страницы) размещаю блоки со своими идентификаторами
и кнопки для старта обработки
<div id="pr_all_header_2" class="pr_all_header2 pr_border">
<?php
$f=ActiveForm::begin(['options' => ['class' => 'form-horizontal']]); ?>
<div style = "margin-top:80px; text-transform: uppercase;">
<?= $f->field($model,'number') ?>
<?= Html::submitButton('Поиск', ['class' => 'btn btn-primary', 'on_click' => 'click_found()']) ?>
</div>
<?php ActiveForm::end();
?>
</div>
<div id = "pr_left" class = "pr_left pr_border"> Ищем номер
<?php
Pjax::begin(['id' => 'articul_show','enablePushState' => 'false']);
Pjax::end();
?>
Бренд
<?php
Pjax::begin(['id' => 'brend_show','enablePushState' => 'false']);
Pjax::end();
?>
<div id="pr_left_1" class="pr_border">
<div id = "block-for-choise">
<?php
Pjax::begin(['id' => 'manufacturer_left','enablePushState' => 'false']);
Pjax::end();
?>
</div>
</div>
<div id="pr_left_2" class="pr_border" >
<?php
Pjax::begin(['id' => 'brend_spisok','enablePushState' => 'false']);
Pjax::end();
?>
</div>
</div>
<div id = pr_right class = "pr_right pr_border" style = " margin-top : 100px;" >
<h4 id ="group1_h4" style="font-weight: bold;">Предложения на нашем складе </h4>
<?php
Pjax::begin(['id' => 'group1','enablePushState' => 'false']);
Pjax::end();
?>
<h4 id ="group5_h4" style="font-weight: bold;">Максиматор</h4>
<?php
Pjax::begin(['id' => 'maximator_data','enablePushState' => 'false']);
Pjax::end();
?>
<h4 id ="group2_h4" style="font-weight: bold;"> Аналоги на нашем складе</h4>
<?php
Pjax::begin(['id' => 'group2','enablePushState' => 'false']);
Pjax::end();
?>
<h4 id ="group3_h4" style="font-weight: bold;">Предложения на складах партнеров</h4>
<?php
Pjax::begin(['id' => 'group3','enablePushState' => 'false']);
Pjax::end();
?>
<h4 id ="group4_h4" style="font-weight: bold;"> Аналоги на складах партнеров</h4>
<?php
Pjax::begin(['id' => 'group4','enablePushState' => 'false']);
Pjax::end();
?>
</div>
2) В js файле
function showArticul(){
// показываем производителей на странице в левом углу
var url_here = document.location.href;
var url_brend =url_here.substring(0,url_here.indexOf("/catalog/"))+'/catalog/show-articul';
var number = document.getElementById('foundnumberform-number').value;
if (!number == '' ){
$.ajax({
url: url_brend,
data: {
articul: number
},
cache: false,
success: function (result) {
// data is ur summary
$('#articul_show').html(result);
}
});
}
}
function showBrend(){
// Выбираю бренды на странице и показываю их в левом углу
var url_here = document.location.href;
var url_brend =url_here.substring(0,url_here.indexOf("/catalog/"))+'/catalog/show-brend-left';
var number = document.getElementById('foundnumberform-number').value;
var manufacturers = [];
// dimElem_tr = document.getElementsByTagName('tr');
dimElem_tr = document.getElementsByClassName('price_position');
// включаю и отключаю
for (i = 1; i < dimElem_tr.length ; i++) {
if ( dimElem_tr[i].getElementsByClassName('manufacturer')[0] != undefined ){
//&& dimElem_tr[i].getElementsByClassName('manufacturer')[0].innerText !== '' ) {
brend = dimElem_tr[i].getElementsByClassName('manufacturer')[0].innerText;
if (brend.length > 0 && manufacturers.indexOf(brend) == -1) {
manufacturers.push(brend);
}
}
}
data_brend = JSON.stringify(manufacturers);
$.ajax({
url: url_brend,
data: {
data_brend: data_brend
},
cache: false,
success: function (result) {
// data is ur summary
$('#manufacturer_left').html(result);
}
});
}
function insert_in_page(positions) {
var dimElement = document.getElementsByClassName('price_position');
for (var i = 0; i < dimElement.length; i++) {
dimElement[i].getElementsByClassName('articul')[0].innerHTML = positions[i].articul;
dimElement[i].getElementsByClassName('manufacturer')[0].innerHTML = positions[i].manufacturer;
dimElement[i].getElementsByClassName('name')[0].innerHTML = positions[i].name;
dimElement[i].getElementsByClassName('exist')[0].innerHTML = positions[i].exist;
dimElement[i].getElementsByClassName('time_to_exe')[0].innerHTML = positions[i].time_to_exe;
dimElement[i].getElementsByClassName('price')[0].innerHTML = positions[i].price;
dimElement[i].getElementsByClassName('storage')[0].innerHTML = positions[i].storage;
dimElement[i].getElementsByClassName('group')[0].innerHTML = positions[i].group;
dimElement[i].getElementsByClassName('visible')[0].innerHTML = positions[i].visible;
dimElement[i].getElementsByClassName('artgroup')[0].innerHTML = positions[i].artgroup;
dimElement[i].getElementsByClassName('countgroup')[0].innerHTML = positions[i].countgroup;
dimElement[i].getElementsByClassName('minpricegroup')[0].innerHTML = positions[i].minpricegroup;
dimElement[i].getElementsByClassName('deliverymin')[0].innerHTML = positions[i].deliverymin;
if (dimElement[i].getElementsByClassName('visible')[0].innerHTML == 'visible') {
dimElement[i].hidden = false;
}
else {
dimElement[i].hidden = true;
}
}
}
function getMaximator()
{
// получить блок проценка
var url_here = document.location.href;
var url_maximator =url_here.substring(0,url_here.indexOf("/catalog/"))+'/maximator/found-maximator';
// var url_maximator =url_here.substring(0,url_here.indexOf("/catalog/"))+'/maximator/drow-maximator-count';
var number = document.getElementById('foundnumberform-number').value;
if (!number == '' ){
$.ajax({
url: url_maximator,
data: {
articul: number
},
cache: false,
success: function (result) {
// data is ur summary
$('#maximator_data').html(result);
showBrend();
}
});
}
}
function getMaximatorCount()
{
// получить блок проценка
var url_here = document.location.href;
// var url_maximator =url_here.substring(0,url_here.indexOf("/maximator/")+10)+'found';
var url_maximator_count =url_here.substring(0,url_here.indexOf("/catalog/"))+'/maximator/drow-maximator-count';
var number = document.getElementById('foundnumberform-number').value;
if (!number == '' ) {
// var url_procenka ="/procenka/found-number";
$.ajax({
url: url_maximator_count,
cache: false,
data: {
articul: number
},
success: function (result) {
// data is ur summary
$('#pjax_max_count').html(result);
}
});
}
}
function showManufacturersSpisok()
{
// получить блок проценка
var url_here = document.location.href;
// var url_maximator =url_here.substring(0,url_here.indexOf("/maximator/")+10)+'found';
var url_brends_spisok =url_here.substring(0,url_here.indexOf("/catalog/"))+'/inteo/get-brends-spisok';
var number = document.getElementById('foundnumberform-number').value;
if (!number == '' ) {
$.ajax({
url: url_brends_spisok,
cache: false,
data: {
articul: number
},
success: function (result) {
// data is ur summary
$('#brend_spisok').html(result);
}
});
}
}
function getInteoArticulBrend()
{
// получить блок проценка
var url_here = document.location.href;
var url_inteo_articul_brend =url_here.substring(0,url_here.indexOf("/catalog/"))+'/inteo/get-brends-spisok';
var number = document.getElementById('foundnumberform-number').value;
if (!number == '' ) {
$.ajax({
url: url_brends_spisok,
cache: false,
data: {
articul: number
},
success: function (result) {
// data is ur summary
$('#brend_spisok').html(result);
}
});
}
}
function click_found()
{
// Максиматор
showArticul();
getMaximator();
getMaximatorCount();
// showManufacturers();
// Интео
showManufacturersSpisok(); // список возможных брендов из данного источника
}
function choise_brend()
{
var manufacturers;
var delivery;
var isShowBestPrice;
var condition;
var dimElem_tr;
var dimElem_tr_class;
// Показывать лучшую цену
var table = document.getElementById("block-for-choise");
var brends = table.getElementsByClassName("elemActive");
// var brends = table[j].getElementsByClassName("elemActive");
// Получаю массив строк
dimElem_tr = document.getElementsByTagName('tr');
}
function found_choise_brend()
{
var block_brend = document.getElementById('pr_left_2');
var dimElement = block_brend.getElementsByClassName("elemActive");
var dim_found_choise_brend = [];
if ( dimElement.length = 0) {
alert("Ничего не выбрано");
}
else {
for (var i = 0; i < dimElement.length; i++) {
console.log('dimElement '+dimElement);
console.log(' i ='+i);
console.log(dimElement[i]);
articul = dimElement[i].getElementsByClassName('articul')[0].innerText;
brend = dimElement[i].getElementsByClassName('manufacturer')[0].innerText ;
dim_found_choise_brend.push({});
dim_found_choise_brend[i]["articul"] = articul;
dim_found_choise_brend[i]["brend"] = brend;
}
// получить блок проценка
var url_here = document.location.href;
var url_inteo_articul_brend_data = url_here.substring(0, url_here.indexOf("/catalog/")) + '/catalog/found-articul-brend';
$.ajax({
url: url_inteo_articul_brend_data,
cache: false,
data: {
dim_found: JSON.stringify(dim_found_choise_brend),
},
success: function (data) {
// data is ur summary
data_parse = JSON.parse(data);
$('#group1').html(data_parse['group1']);
$('#group2').html(data_parse['group2']);
$('#group3').html(data_parse['group3']);
$('#group4').html(data_parse['group4']);
$('#count_group1').html(data_parse['count_group1']);
$('#count_group2').html(data_parse['count_group2']);
$('#count_group3').html(data_parse['count_group3']);
$('#count_group4').html(data_parse['count_group4']);
showBrend();
}
});
}
// ready_document();
}
function click_brends_choise(target)
{
if ((target.className == 'elem')||(target.className == 'elemActive'))
{
highlight(target); // подсветить
}
// choise_brend();
// scroolUp();
}
$(document).ready(function() {
var dimElement = document.getElementsByClassName('price_position');
var positions = [];
var articul = "";
var manufacturer = "";
var storage = "";
var group_articul = 0;
var i;
click_found();
for ( i=0; i<dimElement.length; i++ ) {
positions.push([]);
positions[i].articul = dimElement[i].getElementsByClassName('articul')[0].innerHTML;
positions[i].manufacturer = dimElement[i].getElementsByClassName('manufacturer')[0].innerHTML;
positions[i].name = dimElement[i].getElementsByClassName('name')[0].innerHTML;
positions[i].exist = dimElement[i].getElementsByClassName('exist')[0].innerHTML;
positions[i].time_to_exe = dimElement[i].getElementsByClassName('time_to_exe')[0].innerHTML;
positions[i].price = dimElement[i].getElementsByClassName('price')[0].innerHTML;
positions[i].storage = dimElement[i].getElementsByClassName('storage')[0].innerHTML;
positions[i].group = dimElement[i].getElementsByClassName('group')[0].innerHTML;
positions[i].visible = dimElement[i].getElementsByClassName('visible')[0].innerHTML;
positions[i].artgroup = dimElement[i].getElementsByClassName('artgroup')[0].innerHTML;
positions[i].countgroup = dimElement[i].getElementsByClassName('countgroup')[0].innerHTML;
positions[i].deliverymin = dimElement[i].getElementsByClassName('deliverymin')[0].innerHTML;
positions[i].minpricegroup = dimElement[i].getElementsByClassName('minpricegroup')[0].innerHTML;
}
// сортируем positions по : group, storage, time_to_exe, price,
pos_sort = makeResultForView(positions);
insert_in_page(pos_sort);
polosatik();
$('a[href^="#"]').click(function () {
elementClick = $(this).attr("href");
window.location.href = elementClick;
// определяем верхние координаты
tableFixed = document.getElementById('table-fixed');
add_destination = tableFixed.offsetTop+tableFixed.offsetHeight;
destination = $(elementClick).offset().top - 110;
// destination = $(elementClick).offset().top - add_destination;
if (navigator.appName == 'safari') {
$('body').animate({scrollTop: destination}, 1100);
}
else{
window.scrollBy(0,(-(top)));
$('html,body').stop().animate({scrollTop: destination}, 500);
return false;
}
});
filterForShow();
})
Разберем подробно одну из функций
function found_choise_brend()
{
var block_brend = document.getElementById('pr_left_2');
var dimElement = block_brend.getElementsByClassName("elemActive");
var dim_found_choise_brend = [];
// Выбираем на странице данные и помещаем их в массив dim_found_choise_brend
if ( dimElement.length = 0) {
alert("Ничего не выбрано");
}
else {
for (var i = 0; i < dimElement.length; i++) {
console.log('dimElement '+dimElement);
console.log(' i ='+i);
console.log(dimElement[i]);
articul = dimElement[i].getElementsByClassName('articul')[0].innerText;
brend = dimElement[i].getElementsByClassName('manufacturer')[0].innerText ;
dim_found_choise_brend.push({});
dim_found_choise_brend[i]["articul"] = articul;
dim_found_choise_brend[i]["brend"] = brend;
}
// определяем адрес экшена
var url_here = document.location.href;
var url_inteo_articul_brend_data = url_here.substring(0, url_here.indexOf("/catalog/")) + '/catalog/found-articul-brend';
// отправляем запрос на сервер
// массив преобразуем в JSON-строку
// ответ от сервера получаем в виде json, расшифровываем и размещаем каждый элемент массива в своем блоке на главной странице соответственно id
// после этого отрабатывает функция showBrend(), которая должна ждать заполнения страницы
$.ajax({
url: url_inteo_articul_brend_data,
cache: false,
data: {
dim_found: JSON.stringify(dim_found_choise_brend),
},
success: function (data) {
// data is ur summary
data_parse = JSON.parse(data);
$('#group1').html(data_parse['group1']);
$('#group2').html(data_parse['group2']);
$('#group3').html(data_parse['group3']);
$('#group4').html(data_parse['group4']);
$('#count_group1').html(data_parse['count_group1']);
$('#count_group2').html(data_parse['count_group2']);
$('#count_group3').html(data_parse['count_group3']);
$('#count_group4').html(data_parse['count_group4']);
showBrend();
}
});
}
// ready_document();
}
3) В контроллере:
Здесь декодируются из json наши данные. Выбираются Данные, которые должны отражаться во вью. Формируется массив render, где каждый элемент массива - отдельный рендер вида с данными. После этого render опять шифруется json и возвращается назад для дальнейшей обработки javascript-ом
public function actionFoundArticulBrend() // поиск по артикулу и бренду
{
$data = json_decode(Yii::$app->request->get('dim_found'));
$result = [];
//Поделить на группы
$group1 = []; // оригиналы на нашем складе
$i1 = 0;
$group2 = []; // аналоги на нашем складе
$i2 = 0;
$group3 = []; // оригиналы на чужих складах
$i3 = 0;
$group4 = []; // аналоги на чужих складах
$i4 = 0;
foreach ($data as $data_one)
{
$articul = $data_one->articul;
$brend = $data_one->brend;
$result_one = InteoController::getDataArticulBrend($articul, $brend);
if (is_null($result_one) == false)
{
foreach ($result_one->products as $one)
{
$one->visible = "start";
$one->artgroup = "artgroup";
$one->countgroup = 0;
$one->deliverymin = 0;
$one->deliveryminprice = 0;
$one->minpricegroup = 0;
$one->dover = false;
if ($one->article == $articul && $one->manufacturer == $brend)
{
if (strripos($one->storage, "AUTOMAFIA") == true)
{
$group1[$i1] = $one;
$group1[$i1]->group = 1;
$i1 = $i1 + 1;
} else
{
$group3[$i3] = $one;
$group3[$i3]->group = 3;
$i3 = $i3 + 1;
}
} else
{
if (strripos($one->storage, "AUTOMAFIA") == true)
{
$group2[$i2] = $one;
$group2[$i2]->group = 2;
$i2 = $i2 + 1;
} else
{
$group4[$i4] = $one;
$group4[$i4]->group = 4;
$i4 = $i4 + 1;
}
}
}
}
}
$group_render['group1'] = $this->renderAjax('show_group',
[
'group' => $group1,
]);
$group_render['group2'] = $this->renderAjax('show_group',
[
'group' => $group2,
]);
$group_render['group3'] = $this->renderAjax('show_group',
[
'group' => $group3,
]);
$group_render['group4'] = $this->renderAjax('show_group',
[
'group' => $group4,
]);
$group_render['count_group1'] = $this->renderAjax('show_group_count',
[
'group_count' => $i1,
]);
$group_render['count_group2'] = $this->renderAjax('show_group_count',
[
'group_count' => $i2,
]);
$group_render['count_group3'] = $this->renderAjax('show_group_count',
[
'group_count' => $i3,
]);
$group_render['count_group4'] = $this->renderAjax('show_group_count',
[
'group_count' => $i4,
]);
return json_encode($group_render);
}
или экшен попроще
public function actionShowBrendLeft()
{
// находим бренды для страницы (когда будет несколько источников - объединять и сортировать массив)
$request = Yii::$app->request;
$brend =json_decode($request->get('data_brend')) ;
// $maximator_brend = MaximatorController::getBrendFromMaximator($articul);
return $this->renderAjax('brend_left',
[
'manufacturers' => $brend,
]);
}
public function actionShowArticul()
{
// находим бренды для страницы (когда будет несколько источников - объединять и сортировать массив)
$request = Yii::$app->request;
$articul =$request->get('articul') ;
return $this->renderAjax('show_articul',
[
'articul' => $articul,
]);
}