Take data using magnific pop up

[Eko]

Hi, I have difficulties using your magnific-popup, I want to take value of data-delete-id from URL like this:

<a href="http://sekolah.ci/subjects/delete/" class="on-default remove-row" data-delete-id="8"><i class="far fa-trash-alt"></i></a>

And here is my jquery code”

 $(document).on('click', '.edit-row', function(e) {
            e.preventDefault();
            let $id = $(this).closest('tr').data('id');
            let url = $(this).attr('href');

            $.post( url, function( data ) {

                $("#id").val(data.id);
                $("#name").val(data.name);
                $("#code").val(data.code);

                $.magnificPopup.open({
                    items: {
                        src: '#modalForm'
                    },
                    type: 'inline',
                    preloader: false,
                    focus: '#name',
                    modal: true,

                    // When elemened is focused, some mobile browsers in some cases zoom in
                    // It looks not nice, so we disable it:
                    callbacks: {
                        beforeOpen: function() {
                            if($(window).width() < 700) {
                                this.st.focus = false;
                            } else {
                                this.st.focus = '#name';
                            }
                        }
                    }
                });

            });
        });

        $(document).on('click', '.remove-row', function(e) {
            
            e.preventDefault();
            $.magnificPopup.open({
                items: {
                    src: '#confirmationModal'
                },
                type: 'inline',
                preloader: false,
                focus: '#name',
                modal: true,
            });

            $(document).on('click', '.modal-confirm', function (e) {
                e.preventDefault();
                let url = $(this).attr('href');
                let id = $(this).data("delete-id")

                $.post( url, { 'id': id } ).done(function( data ) {

                    if (data.type === 'success'){
                        new PNotify({
                            title: 'Success!',
                            text: 'Data berhasil dihapus.',
                            type: 'success'
                        });

                        $.magnificPopup.close();
                    }else{

                        new PNotify({
                            title: 'Error!',
                            text: data.text,
                            type: 'error'
                        });
                    }
                });
            });
        });

it seems I can’t use “this” to take value anymore. so how can I use Manific Popup to take those data? thanks.

---

[Support]

Hi, you can set a variable with the ID, here’s the example:

$(document).on('click', '.edit-row', function(e) {
	e.preventDefault();
	let $id = $(this).closest('tr').data('id');
	let url = $(this).attr('href');

	$.post( url, function( data ) {

		$("#id").val(data.id);
		$("#name").val(data.name);
		$("#code").val(data.code);

		$.magnificPopup.open({
			items: {
				src: '#modalForm'
			},
			type: 'inline',
			preloader: false,
			focus: '#name',
			modal: true,

			// When elemened is focused, some mobile browsers in some cases zoom in
			// It looks not nice, so we disable it:
			callbacks: {
				beforeOpen: function() {
					if($(window).width() < 700) {
						this.st.focus = false;
					} else {
						this.st.focus = '#name';
					}
				}
			}
		});

	});
});

$(document).on('click', '.remove-row', function(e) {
	
	e.preventDefault();
	
	// VARIABLE WITH ID
	var deleteId = $(this).attr('data-delete-id');
	
	$.magnificPopup.open({
		items: {
			src: '#confirmationModal'
		},
		type: 'inline',
		preloader: false,
		focus: '#name',
		modal: true,
	});

	$(document).on('click', '.modal-confirm', function (e) {
		e.preventDefault();
		let url = $(this).attr('href');
		let id = $(this).data("delete-id")

		$.post( url, { 'id': id } ).done(function( data ) {

			if (data.type === 'success'){
				new PNotify({
					title: 'Success!',
					text: 'Data berhasil dihapus.',
					type: 'success'
				});

				$.magnificPopup.close();
			}else{

				new PNotify({
					title: 'Error!',
					text: data.text,
					type: 'error'
				});
			}
		});
	});
});

So you can get the variable with deleteId with the ID you need.

Best Regards.

---

[Author]

Posts