Jak obsłużyć poprawnie linki za pomocą jQuery/JS

Odpowiedz Nowy wątek
2019-04-12 13:12
0

Hej,

Sytuacja jest następująca:

  • mam na stronie kilka linków, które są dynamicznie generowane za pomocą PHP. Linki są objęte jedną klasą:

    <a href="http://ip/Registration/Delete_user/14" class="delete_user"><button type="button">Usuń</button></a>
    <a href="http://ip/Registration/Delete_user/15" class="delete_user"><button type="button">Usuń</button></a>
    <a href="http://ip/Registration/Delete_user/16" class="delete_user"><button type="button">Usuń</button></a>
  • w skrypcie, za pomocą jednej funkcji, chciałbym wywołać dany link, czyli np. klikam na pierwszy guzik "Usuń", wywołuje się link z URLem o końcówce 14, klikam na środkowy, wywołuję URL z końcówką 15, itd.

  • próbowałem użyć do tego $('a').attr('href'), ale zwraca tylko pierwszy link.

  • $(this).attr('href') zwraca parametr undefined.

Jak poprawnie to ogarnąć? Zamienić class na id o różnych wartościach?

edytowany 3x, ostatnio: Lucas83, 2019-04-12 13:58
Coś słabe te linki w przykładzie - nie domykasz a - axelbest 2019-04-12 13:57
Ale to chcesz mieć button czy link? Bo trochę bez sensu mieć button opakowany w link, albo jedno, albo drugie. W zależności od tego co ten button/link ma robić. Jeśli ma cię przenieść do jakiegoś miejsca to powinien to być link, a jeśli tylko jakieś działanie z pozostaniem na aktualnej stronie to button. - m31 2019-04-12 13:58
Poprawiłem :) Niemniej, w kodzie mam prawidłowo :) - Lucas83 2019-04-12 13:58
Potrzebuję wywołać ten link, który jest zamieszczony w a href, button docelowo będzie wywalony. Rzeczywiście, można to zrobić inaczej. - Lucas83 2019-04-12 14:04

Pozostało 580 znaków

2019-04-12 13:59
1

Piszę z głowy, więc może być petarda :P

$('.delete_user button').on('click', function (){
      window.location.href = $(this).parent().attr('href');
});
edytowany 4x, ostatnio: axelbest, 2019-04-12 14:02

Pozostało 580 znaków

2019-04-12 14:05
0

Rzuć okiem na https://4programmers.net/Forum/1581473 - problem dość podobny, może jakoś Cię ten link naprowadzi.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say

Pozostało 580 znaków

2019-04-12 14:14
m31
1

Ja bym te linki wywalił i zostawił same buttony. Chociaż nie wiem dokładnie co ma to robić. Coś w tym stylu:
HTML

<button data-target="14" class="button" type="button">Usuń 14</button>
<button data-target="15" class="button" type="button">Usuń 15</button>
<button data-target="16" class="button" type="button">Usuń 16</button>

JS

const buttons = Array.from(document.getElementsByClassName('button'));

function handleButton() {
    const number = this.dataset.target;
    const link = `/ip/Registration/Delete_user/${number}`;
    window.location.href = link;
}

buttons.forEach((button) => {
    button.addEventListener('click', handleButton);
})

fiddle demo

edytowany 3x, ostatnio: m31, 2019-04-12 14:17

Pozostało 580 znaków

2019-04-12 14:23
0
m31 napisał(a):

Ja bym te linki wywalił i zostawił same buttony. Chociaż nie wiem dokładnie co ma to robić.

Już mówię: po kliknięciu jednego z linków (np. z końcówką 15), wywoływane jest okno z potwierdzeniem wyboru:

$(document).on('click', '.delete_user', function(e) {
    e.preventDefault();
    bootbox.confirm({
        message: 'Czy na pewno chcesz usunąć wpis?',
        buttons: {
            confirm: {
                label: 'Tak, usuń',
                className: 'btn-success',
                callback: function(result){
                    return true;
                }
            },
            cancel: {
                label: 'Nie',
                className: 'btn-danger',
                callback: function(result){
                    return false;
                }
            }
        },
        callback: function(result){
            if(result == true) {
                window.location.href = $(this).attr('href');
            } else {
                console.log("Reject action");
            }
        },
        swapButtonOrder: true
    });
});

I teraz po kliknięciu "Tak, usuń", powinien być otwarty link, który wywołał okno z potwierdzeniem wyboru (czyli np. 15 w tym przypadku). Parametr 15 zostaje przekazany do kontrolera, który dalej robi swoje. Jak kliknę na link z końcówką 16, to po zatwierdzeniu wyboru przez klawisz "Tak, usuń", powinien zostać uruchomiony kliknięty link. Okno z potwierdzeniem działa jako "przerywnik akcji".

Pozostało 580 znaków

2019-04-12 14:37
m31

No to coś takiego:

$(document).on('click', '.delete_user', function(e) {
    e.preventDefault();
    const link = this.href;
    bootbox.confirm({
        message: 'Czy na pewno chcesz usunąć wpis?',
        buttons: {
            confirm: {
                label: 'Tak, usuń',
                className: 'btn-success',
                callback: function(result){
                    return true;
                }
            },
            cancel: {
                label: 'Nie',
                className: 'btn-danger',
                callback: function(result){
                    return false;
                }
            }
        },
        callback: function(result){
            if(result == true) {
                window.location.href = link;
            } else {
                console.log("Reject action");
            }
        },
        swapButtonOrder: true
    });
});

Tylko zdajesz sobie sprawę, że to http://ip/Registration/Delete_user/16 , to nie jest ważny link. Zgaduję że chciałeś czegoś takiego /Registration/Delete_user/16 . No chyba że zamiast tego 'ip' u siebie wpiszesz adres ip :)

edytowany 2x, ostatnio: m31, 2019-04-12 14:39

Pozostało 580 znaków

2019-04-12 14:40
0
m31 napisał(a):

Tylko zdajesz sobie sprawę, że to http://ip/Registration/Delete_user/16 , to nie jest ważny link. Zgaduję że chciałeś czegoś takiego /Registration/Delete_user/16 . No chyba że zamiast tego 'ip' u siebie wpiszesz adres ip :)

No oczywiście, że IP :D Zaraz przetestuję.

EDIT: Działa cudownie! Tylko czemu window.location.href = $(this).attr('href'); to nie zadziałało? Nie wiedział, czym jest ($this)?

edytowany 2x, ostatnio: Lucas83, 2019-04-12 15:00
Funkcje callback mają swoje własne this prawdopodobnie związane z tym dodatkiem bootbox, czy cokolwiek to jest. Dlatego lepiej pierwotne this zapisać od razu do jakiejś zmiennej. Mógłbyś kombinować z funkcjami typu arrow, czyli callback: (result) => { ... } bo one biorą this z "góry". Ale chyba najprościej tak jak zrobiłem, bo nie trzeba walczyć z twórcami tego bootboxa. - m31 2019-04-12 14:56
O widzisz, to może być właśnie to. Myślę, że zostanę przy Twojej propozycji, jest bardzo czytelna i, co najważniejsze, działa zgodnie z moim założeniem. - Lucas83 2019-04-12 15:01

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0