Гость
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Работа с параметрами ссылки <a> / 2 сообщений из 2, страница 1 из 1
21.06.2020, 20:59
    #39971528
MsGuns
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Работа с параметрами ссылки <a>
Здравствуйте !

По клику на заголовке таблицы готовится "пакет" для ajax-запроса.
Надо передать два параметра: один - статичный - индекс колонки, из разметки (код ниже), второй - ID выбранного в дереве узла, по которому производится выборка в грид. Значение ID заносится при каждом выборе нового узла в глобальную переменную JS.
Задача - добавить или заменить (при повтором клике) этот второй параметр в url.

Код:

Код: html
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.
60.
61.
62.
63.
64.
65.
66.
67.
68.
        function ItemNodeClick(event) {
            var node = event.target;
            if (ActiveTreeNode != null) ActiveTreeNode.className = 'nodeInActive';
            node.className = 'nodeActive';
            ActiveTreeNode = node;
            ActiveNodeID = node.parentNode.querySelector('input').value;
        }

       function columnHeadClick(event) {
            var url = event.target;
            // Добавление в url параметра NodeID
            //if (url.searchParams.has('NodeID')) {
            //    url.searchParams.set('NodeID', ActiveNodeID);
            //}
            //else {
            //url.URLSearchParams.append('NodeID', ActiveNodeID);
            //}

            var searchParams = new URLSearchParams(url.toString());
            alert(searchParams.toString())
            searchParams.append('NodeID', ActiveNodeID);
//            searchParams.append('NodeID', ActiveNodeID);
            alert(searchParams.toString())
            alert(event.target.search);
            return false;

      ...

            <div class="animalgridcontent">
                <div id="ajaxLoadingID" style="display: none;"><p style="color:red;"> Выполнение запроса.. </p></div>
                <table class="animaltable">
                    <thead class="animalgridHeader">
                        <tr>
                            <th>
                                @Ajax.ActionLink("Имя животного", "AnimalNames", new { OrdCol = 0 }, ajaxoptions, 
                                new { @class = "animalgridColumnHeader", onclick = "columnHeadClick(event)" })
                            </th>
                            <th>
                                @Ajax.ActionLink("Владелец", "AnimalNames", new { OrdCol = 1 }, ajaxoptions, 
                                new { @class = "animalgridColumnHeader", onclick = "columnHeadClick(event)" })
                            </th>
                            <th>
                                @Ajax.ActionLink("Возраст", "AnimalNames", new { OrdCol = 2 }, ajaxoptions, 
                                new { @class = "animalgridColumnHeader", onclick = "columnHeadClick(event)" })
                            </th>
                            <th>
                                @Ajax.ActionLink("Пол", "AnimalNames", new { OrdCol = 3 }, ajaxoptions, 
                                new { @class = "animalgridColumnHeader", onclick = "columnHeadClick(event)" })
                            </th>
                            <th>
                                @Ajax.ActionLink("Континет", "AnimalNames", new { OrdCol = 4 }, ajaxoptions, 
                                new { @class = "animalgridColumnHeader", onclick = "columnHeadClick(event)" })
                            </th>
                            <th>
                                @Ajax.ActionLink("Страна", "AnimalNames", new { OrdCol = 5 }, ajaxoptions, 
                                new { @class = "animalgridColumnHeader", onclick = "columnHeadClick(event)" })
                            </th>
                            <th>
                                @Ajax.ActionLink("Город", "AnimalNames", new { OrdCol = 6 }, ajaxoptions, 
                                new { @class = "animalgridColumnHeader", onclick = "columnHeadClick(event)" })
                            </th>
                        </tr>
                    </thead>
                    <tbody id ="ajaxContainer">
                    </tbody>
                </table>

            </div>



Не могу разобраться как взять из линка url для SearchParams и как после работы с ним засунуть модифицированный url в ссылку назад (закомментаренный код).

Помогите кто чем может :)
...
Рейтинг: 0 / 0
22.06.2020, 13:56
    #39971822
MsGuns
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Работа с параметрами ссылки <a>
Разобрался :)

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
        function columnHeadClick(event) {
            var url = event.target;  // Получить елемент-ссылку <a> где был клик 
            var u = new URL(url);    // Взять url из элемента
            // Проверить есть ли параметр 'NodeID' в url (если на заголовке этой колонки не было кликов, то его не будет, иначе - он уже есть)
            // Если параметра нет, добавить его, иначе - изменить значение, взяв его из ActiveNodeID
            if (u.searchParams.has('NodeID')) u.searchParams.append('NodeID',ActiveNodeID) 
            else u.searchParams.set('NodeID', ActiveNodeID)
            // Положить модифицированный url назад в элемент-ссылку
            event.target.href = u;
        }



Вопрос снят, всем спасибо за внимание :)
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Работа с параметрами ссылки <a> / 2 сообщений из 2, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]