Замена элемента на странице

@Vitukr · Регистрация: 08.11.2012

Студворк — интернет-сервис помощи студентам

Необходимо заменить элемент с вложенными элементами на странице.
Так не получается:

JavaScript
1
$('.product-list').replaceWith(function () { $().load('index.php?route=product/vsfilter *'); });

Необходимо содержимое элемента заменить другой страницей.

@Dolphin · 26.01.2013, 10:45

JavaScript
1
$('.product-list').html("Новое содержимое блока");

@Vitukr · 26.01.2013, 11:26 **[ТС]**

Сообщение от Dolphin

JavaScript
1
$('.product-list').html("Новое содержимое блока");

А как сюда "Новое содержимое блока" вставить вот эту страницу:

'index.php?route=product/vsfilter *'

@Dolphin · 26.01.2013, 11:34

JavaScript
1
$('.product-list').load("/index.php?route=product/vsfilter *");

@Vitukr · 26.01.2013, 13:01 **[ТС]**

Сообщение от Dolphin

JavaScript
1
$('.product-list').load("/index.php?route=product/vsfilter *");

Вобщем, ничего не получается.
Может я не так совсем делаю?
Я пытаюсь поставить фильтр для выбора товаров.
При выборе элементов фильтра и нажатия кнопки Submit, должны отсылаться данные в POST и обновляться элемент, который отвечает за список товаров.
Может есть другой способ реализации?

@Mullih · 26.01.2013, 13:30

Dolphin вам все правильно подсказал, ищите ошибочку у себя, в качестве примера приведу вам целую html страничку с 2 мя вариантами аякса, сокращенной записью и более расширенной, а также с вариантом конкатации параметров и сериализацией формы. Так сказать на любой вкус

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <meta name="viewport" content="width=device-width" />
 
    
 
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.min.js"></script>
</head>
<body>
    
 
 
<form action="/Home/Partial" method="GET">
    <select name="route">
        <option value="product">product</option>
        <option value="box">box</option>
    </select>
    <input type="submit" value="submit"/>
</form>
 
<div class="product-list"></div>
<div class="product-list1"></div>
<div class="product-list2"></div>
 
 
    
<script type="text/javascript">
    jQuery(function ($) {
        $('form').submit(function(e) {
            e.preventDefault();
 
            var $form = $(this);
 
            var params = $form.serialize();
            
            $('.product-list').load($form.attr('action') + "?route=" + $('[name="route"] option:selected', $form).val());
            
            $('.product-list1').load($form.attr('action') + "?" + params);
 
            //или
            
            $.ajax({
                url: $form.attr('action'),
                data: params,
                dataType: 'html',
                type: $form.attr('method'),
                success: function(data) {
                    $('.product-list2').html(data);
                }
            });
        });
    });
</script>
 
</body>
</html>

@Vitukr · 26.01.2013, 15:50 **[ТС]**

Спасибо за Вашу помощь, но у меня достаточно сложная ситуация.
Страница формируется с помощью MVC технологии на PHP.
Там модульная система, т.е. части страницы формируются за счет разных модулей, в том числе используется AJAX. Фильтр на страницу также добавляется с помощью AJAX. А поэтому простая замена элемента не подходит, искажается страница.
Я пытаюсь сделать так. Выбор в фильтре обрабатывается отдельной страницей, которую надо запустить через кнопку Submit фильтра. При этом перезагрузка страницы не нужна, а запускается выполнение на PHP формирование страницы, которой потом надо заменить исходную. Собственно это клон страницы с возможностью использования POST данных. Исходная страница этих POST данных не может обрабатывать.

В принципе все получается, остается одна проблема:
заменить исходную страницу ее клоном, двойником, в которой уже данные (таблицы) будут другие, в результате выполнения данных фильтра.
Каким методом AJAX или может просто jguery это можна сделать.
Так $(элемент).load(адрес) все проходит, но мне надо не для конкретного элемента, а всю страницу.

@Mullih · 26.01.2013, 15:54

JavaScript
1
$('body').load('url');

подойдет?

@Dolphin · 26.01.2013, 16:06

Сообщение от Mullih

подойдет?

Тогда лучше с перезагрузкой страницы делать..

@Vitukr · 26.01.2013, 16:21 **[ТС]**

Сообщение от Mullih

JavaScript
1
$('body').load('url');

подойдет?

Нет, теряется часть страницы.

Добавлено через 2 минуты

Сообщение от Dolphin

Тогда лучше с перезагрузкой страницы делать..

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

@Mullih · 26.01.2013, 16:31

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

@Vitukr · 26.01.2013, 16:39 **[ТС]**

В принципе нашел выход, подключать к странице клону все дополнения-модули и будет работать.

Добавлено через 43 секунды

Сообщение от Mullih

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

Сейчас на скринах покажу.

@Vitukr · 26.01.2013, 16:47 **[ТС]**

На первом скрине оригинальная страница до нажатия Кнопки "Filter".
На втором скрине уже страница клон после нажатия кнопки.
Все динамически подгруженные элементы на клоне не отображаются.
Как их подгружать при перезагрузке я уже догадался.
Осталось решить каким образом передавать данные в POST для того, чтобы страница клон их могла обрабатывать.
Скорее всего через jQuery.post() или чистый ajax.

@Mullih · 26.01.2013, 17:01

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

при фильтрации, на сабмите я так понимаю или клике, без разницы, вы прячете левые блок через hide() а вот с основным блоком как вам больше нравиться заменяеете на фильтрованный или тоже приячете, лично я за второй вариант, тогда пре удалении фильтров его подгружать сново не прийдеться, и собственно заполняете фильтрованный блок который был пустой див и был hidden, вы его отображаете

собственно на кнопки после загрузки фильтрованного блока подписываетесь на склик, или по последнему веянью моды если у вас jq версия больше 1,7 изначально прописываете на кнопки клик через on(...) или если jq меньше версия то испльзуйте live (но в jq 1.9 его уберут поэтому лучше изначально работать с новой версий) и забываете про перебинд обновляемого аяксом контента

и под конец когда вам надо снять фильтры то для первого варианта вы подгружаете изначальный нефельтрованный блок или по второму варианту делаете toggle для трех блоков (левого, основного и фильтрованного)

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Vitukr 14 / 4 / 1 Регистрация: 08.11.2012 Сообщений: 189 Записей в блоге: 1
	26.01.2013, 15:50 [ТС]
	Спасибо за Вашу помощь, но у меня достаточно сложная ситуация. Страница формируется с помощью MVC технологии на PHP. Там модульная система, т.е. части страницы формируются за счет разных модулей, в том числе используется AJAX. Фильтр на страницу также добавляется с помощью AJAX. А поэтому простая замена элемента не подходит, искажается страница. Я пытаюсь сделать так. Выбор в фильтре обрабатывается отдельной страницей, которую надо запустить через кнопку Submit фильтра. При этом перезагрузка страницы не нужна, а запускается выполнение на PHP формирование страницы, которой потом надо заменить исходную. Собственно это клон страницы с возможностью использования POST данных. Исходная страница этих POST данных не может обрабатывать. В принципе все получается, остается одна проблема: заменить исходную страницу ее клоном, двойником, в которой уже данные (таблицы) будут другие, в результате выполнения данных фильтра. Каким методом AJAX или может просто jguery это можна сделать. Так $(элемент).load(адрес) все проходит, но мне надо не для конкретного элемента, а всю страницу. 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	26.01.2013, 16:31
	так не так) этак не этак) вы бы где на хост положили и показали куда смотреть, может что по делу можно было бы и подсказать 0

@Vitukr 14 / 4 / 1 Регистрация: 08.11.2012 Сообщений: 189 Записей в блоге: 1
	26.01.2013, 16:47 [ТС]
	На первом скрине оригинальная страница до нажатия Кнопки "Filter". На втором скрине уже страница клон после нажатия кнопки. Все динамически подгруженные элементы на клоне не отображаются. Как их подгружать при перезагрузке я уже догадался. Осталось решить каким образом передавать данные в POST для того, чтобы страница клон их могла обрабатывать. Скорее всего через jQuery.post() или чистый ajax. Миниатюры 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	26.01.2013, 17:01
	честно говоря все выглядит довольно просто, только я их немного именую, первая страница состоит из левого блока и основного, вторая страница состоит из фильтровоного блока при фильтрации, на сабмите я так понимаю или клике, без разницы, вы прячете левые блок через hide() а вот с основным блоком как вам больше нравиться заменяеете на фильтрованный или тоже приячете, лично я за второй вариант, тогда пре удалении фильтров его подгружать сново не прийдеться, и собственно заполняете фильтрованный блок который был пустой див и был hidden, вы его отображаете собственно на кнопки после загрузки фильтрованного блока подписываетесь на склик, или по последнему веянью моды если у вас jq версия больше 1,7 изначально прописываете на кнопки клик через on(...) или если jq меньше версия то испльзуйте live (но в jq 1.9 его уберут поэтому лучше изначально работать с новой версий) и забываете про перебинд обновляемого аяксом контента и под конец когда вам надо снять фильтры то для первого варианта вы подгружаете изначальный нефельтрованный блок или по второму варианту делаете toggle для трех блоков (левого, основного и фильтрованного) 1