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

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?

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');
});
0

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

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

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".

0

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 :)

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)?

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