Javascript sor törlés nem működik ( .parent().remove() )

Theo76 · 2016. Ápr. 28. (Cs), 17.13

Sziasztok!

Elkezdtem egy példa alapján csinálni saját MVC-t, és egyben tanulni az objektum orientált programozást. Az egyik javascriptnél elakadtam.

A linkje: http://jream.com/lab

Ahol elakadtam az a 4-dik résznél a javascript törlés.

$( '.del' ).on( 'click', function() {
delItem = $( this );
var id = $( this ).attr( 'rel' );
var data = {'id': id};
$.post( 'dashboard/xhrDeleteListing', data, function( o ) {
delItem.parent().remove();
}, 'json');
return false;
});
json' );


        $( '.del' ).on( 'click', function() {
            delItem = $( this );
            var id = $( this ).attr( 'rel' );
            var data = {'id': id};

            $.post( 'dashboard/xhrDeleteListing', data, function( o ) {
                delItem.parent().remove();
            }, 'json');

            return false;
        }); 
    }, 'json' );

A delItem.parent().remove(); parancs ami törölné az adott sort, nem akar működni. Nekem 2.2.3 jquery-m van.

■

HTML, CSS, JavaScript, Ajax

csirip

.fail

Pepita · 2016. Ápr. 28. (Cs), 18.24

Szia, írd meg hozzá a .fail ágat is, mert sanszos, hogy szerver oldali hiba van.
https://api.jquery.com/jquery.post/

Vagy - szerintem jobb - a "hagyományos" jQuery.ajax() kezel error eseményt. Ide akkor futsz, ha szerver oldalról nem, vagy rossz válasz jön. (Pl esetedben ha van vmi PHP error, ez "kiíródik képernyőre", akkor máris nem json a válasz.)

A 6-7. sor közé szúrj be egy ilyet:

console.log('success');

console.log('success');

, és ha megcsináltad az error ágat, akkor oda is hasonlót.

+ Ha van visszaadott adat (o), akkor azt is illik ellenőrizni.

Ezeken kívül böngészőben nézd meg a forgalmat, ez a kérés milyen státuszt, stb. kapott, mi jött vissza.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

igen... a visszaadott érték

Theo76 · 2016. Ápr. 28. (Cs), 19.44

igen... a visszaadott érték nem json... találtam egy hibakezelő scriptet, ami ezt adta vissza: "nParsing JSON Request failed".

$().ready(function(){
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internel Server Error.');
}else if(e=='parsererror'){
alert('Error.nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.n'+x.responseText);
}
}
});
});
$(function() {
$.get( 'dashboard/xhrGetListings', function( o ) {
for (var i = 0; i < o.length; i++) {
$( '#listInserts' ).append( '<div>' + o[i].text + '<a class="del" rel="' + o[i].ID + '" href="#">X</a></div>' );
}
$( '.del' ).on( 'click', function() {
delItem = $( this );
var id = $( this ).attr( 'rel' );
var data = {'id': id};
$.post( 'dashboard/xhrDeleteListing', data, function( o ) {
delItem.parent().remove();
}, 'json')
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
console.log( JSON.stringify(data) );
});
return false;
});
}, 'json' );
$( '#randomInsert' ).submit( function(){
var url = $( this ).attr( 'action' );
var data = $( this ).serialize();
$.post( url, data, function( o ) {
$( '#listInserts' ).append( '<div>' + o.text + '<a class="del" rel="' + o.id + '" href="#">X</a></div>' );
}, 'json' );
return false;
});
});


$().ready(function(){
	$.ajaxSetup({
		error:function(x,e){
			if(x.status==0){
			alert('You are offline!!n Please Check Your Network.');
			}else if(x.status==404){
			alert('Requested URL not found.');
			}else if(x.status==500){
			alert('Internel Server Error.');
			}else if(e=='parsererror'){
			alert('Error.nParsing JSON Request failed.');
			}else if(e=='timeout'){
			alert('Request Time out.');
			}else {
			alert('Unknow Error.n'+x.responseText);
			}
		}
	});
});

$(function() {
    $.get( 'dashboard/xhrGetListings', function( o ) {
        for (var i = 0; i < o.length; i++) {
            $( '#listInserts' ).append( '<div>' + o[i].text + '<a class="del" rel="' + o[i].ID + '" href="#">X</a></div>' );
        }

            $( '.del' ).on( 'click', function() {
                delItem = $( this );
                var id = $( this ).attr( 'rel' );
                var data = {'id': id};

                $.post( 'dashboard/xhrDeleteListing', data, function( o ) {
                    delItem.parent().remove();
                }, 'json')

                .done(function() {
                    alert( "second success" );
                })
                .fail(function() {
                    alert( "error" );
                    console.log( JSON.stringify(data) );
                });
                return false;
            }); 
        }, 'json' );

    $( '#randomInsert' ).submit( function(){
        var url = $( this ).attr( 'action' );
        var data = $( this ).serialize();

        $.post( url, data, function( o ) {
            $( '#listInserts' ).append( '<div>' + o.text + '<a class="del" rel="' + o.id + '" href="#">X</a></div>' );
        }, 'json' );

        return false; 
   });
});

a JSON.stringify(data) {"id": "2"}-t ad vissza.

A chromeban megnéztem a visszakapott php kérést, az xhrDeleteListing 200-as státusszal tért vissza, vagyis ott nincs gond...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Megnéztem az .fail()-nál a

Theo76 · 2016. Ápr. 28. (Cs), 20.29

Megnéztem az .fail()-nál a console.log() kiírásokat:

JSON.stringify( data ): {"ID":"1"}

JSON.stringify( delItem ): {"0":{"jQuery223066169610433678681":{"events":{"click":[{"type":"click","origType":"click","guid":2,"namespace":""}]}}},"context":{"jQuery223066169610433678681":{"events":{"click":[{"type":"click","origType":"click","guid":2,"namespace":""}]}}},"length":1}

JSON.stringify( delItem ): [{"0":"1","1":"vv","ID":"1","text":"vv"},{"0":"2","1":"dsadasd","ID":"2","text":"dsadasd"},{"0":"3","1":"dsadasd","ID":"3","text":"dsadasd"},{"0":"4","1":"fsdfsdf","ID":"4","text":"fsdfsdf"},{"0":"5","1":"proba","ID":"5","text":"proba"},{"0":"6","1":"pr","ID":"6","text":"pr"}]

A hozzászóláshoz regisztráció és belépés szükséges
új téma

hiba kezelés

Pepita · 2016. Ápr. 29. (P), 07.28

Írd meg te a kezelés, .ajax, error ág, success ben adat kiírás a. Az a biztos.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Sikerült megoldani... Átírtam

Theo76 · 2016. Ápr. 29. (P), 07.34

Sikerült megoldani...
Átírtam erre a kódot:

$.ajax({
type: 'POST',
url: 'dashboard/xhrDeleteListing',
data: {'ID': id},
// dataType: 'json',
success: function( data ) {
delItem.parent().remove();
},
error: function( jqXHR, textStatus, errorThrown ) {
console.log(jqXHR);
alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
}
});


            $.ajax({
                type: 'POST',
                url: 'dashboard/xhrDeleteListing',
                data: {'ID': id},
//                dataType: 'json',

                success: function( data ) {
                   delItem.parent().remove();
                },

                error: function( jqXHR, textStatus, errorThrown ) {
                    console.log(jqXHR);
                    alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
                }
            });

Valamiért a data-ra json hibát dobott ki (unexpected end of json input). Átírtam a kódot ajaxra, majd kivettem a dataType: 'json' sort, és egyből működött. Bár az eredeti problémát nem tudom igazából mi okozta...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

dataType

Pepita · 2016. Ápr. 29. (P), 07.53

Ez a vissza kapott adatra vonatkozik. Tehát mégis csak az a baj, hogy a szerver nem ad vissza json-t. :)
PHP oldalról ilyesmit kell:

$data=array ();
echo (json_encode ($data));
exit;

$data=array ();
echo (json_encode ($data));
exit;

Persze a data tömbbe azt raksz, amit gondolsz.
A lényeg a json_encode.
Ha vmi hiba van PHP oldalon, és be van kapcsolva display errors, akkor megint nem json lesz, mert ki megy egy html. Ez gyakori hiba.
Küldj ki vmi adatot, pl $data['status'] = 1, ezt külön tudod ellenőrizni JS success ágon: data.status == 1.
Ekkor azt is tudod, hogy json jött, és ok minden. Ha pl status == 0, ezzel a szerverről tudsz üzenni, hogy program hiba nincs, de vmi miatt sikertelen a feldolgozás. + lehet mellé hiba üzenet, stb, amit csak fantáziád alkot.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

igen a php-re én is

Theo76 · 2016. Ápr. 29. (P), 09.09

igen a php-re én is gyanakodtam... de az első betöltéskor megvan a json_encode:

function xhrGetListings() {
$sth = $this->db->prepare( "SELECT * FROM data" );
$sth->execute();
$data = $sth->fetchAll();
echo json_encode( $data );
}


function xhrGetListings() {
    $sth = $this->db->prepare( "SELECT * FROM data" );
    $sth->execute();
    $data =  $sth->fetchAll();
    echo json_encode( $data );
}

ezután a listázást javascript végzi:

$(function() {
$.get( 'dashboard/xhrGetListings', function( o ) {
for (var i = 0; i < o.length; i++) {
$( '#listInserts' ).append( '<div>' + o[i].text + '<a class="del" rel="' + o[i].ID + '" href="#">X</a></div>' );
}
$( '.del' ).on( 'click', function() {
delItem = $( this );
var id = $( this ).attr( 'rel' );
$.ajax({
type: 'POST',
url: 'dashboard/xhrDeleteListing',
data: {'ID': id},
success: function( data ) {
delItem.parent().remove();
},
error: function( jqXHR, textStatus, errorThrown ) {
console.log(jqXHR);
alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
}
});
return false;
});
}, 'json' );


$(function() {
    $.get( 'dashboard/xhrGetListings', function( o ) {
        for (var i = 0; i < o.length; i++) {
            $( '#listInserts' ).append( '<div>' + o[i].text + '<a class="del" rel="' + o[i].ID + '" href="#">X</a></div>' );
        }

        $( '.del' ).on( 'click', function() {
            delItem = $( this );
            var id = $( this ).attr( 'rel' );

            $.ajax({
                type: 'POST',
                url: 'dashboard/xhrDeleteListing',
                data: {'ID': id},

                success: function( data ) {
                   delItem.parent().remove();
                },

                error: function( jqXHR, textStatus, errorThrown ) {
                    console.log(jqXHR);
                    alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
                }
            });
            
            return false;
        }); 
    }, 'json' );

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ha JSON-t írsz ki, ne

bamegakapa · 2016. Ápr. 29. (P), 10.01

Ha JSON-t írsz ki, ne felejtsd el elküldeni a megfelelő headert. Ha jól emlékszem, valamelyik verzió óta a jQuery már igényli, ha a datatype json-ra van állítva.

header("Content-Type: application/json", true);

header("Content-Type: application/json", true);

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Biztos?

Pepita · 2016. Ápr. 29. (P), 19.44

Nem túl rég simán küldtem enélkül, de én sem emlékszem arra a jquery verzióra.
Ha esetleg lenne erről egy linked, olvasnám. (Azzal együtt, hogy hála Istennek nincs frontend feladatom mostanában.)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Lehet rosszul emlékszem,

bamegakapa · 2016. Ápr. 30. (Szo), 09.31

Lehet rosszul emlékszem, utána fogok nézni. Keveset jqueryzek mostanság.

A megfelelő header ártani tuti nem árt mondjuk :).

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Nem érted

Pepita · 2016. Ápr. 29. (P), 19.40

Eddig is az xhrDeleteListing -el volt gond, nem? Az még mindig nem látható, hogy küld-e json adatot, mert a listával foglalkozol, ami úgy tűnik műxik.
Nem tetted be a success ágba az adat kiírását sem.
Így nehéz lesz biztosan a végére járni. Legalább is én mindig tudni akarom, hogy pontosan mi volt rossz.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés