[jquery] html() geeft niet het verwachte resultaat

dinsdag 5 juli 2016 12:05

Acties:

0 Henk 'm!

Topicstarter

Beste tweakers,

Ik heb een vreemd probleem met de html() functie in jQuery. In onderstaande afbeelding staat (een deel van) de inhoud van een jquery object.

Afbeeldingslocatie: https://s31.postimg.org/c64mzoj3f/Naamloos.png

Afbeeldingslocatie: https://s31.postimg.org/c64mzoj3f/Naamloos.png

Uit dit object wil ik de innerhtml waarde hebben, dus ik gebruik hiervoor de html() functie ( $(object).html(); ).

Dit resulteert in de volgende string: <a href="javascript:void(0)" data-name="aandachtspunt_status_id" data-pk="1" data-value="5" class="editable editable-click" style="color: green;"></a>

Om één of andere reden wordt de tekst ('afgerond') verwijderd uit het resultaat. Heeft iemand enig idee wat hiervan de oorzaak kan zijn? Ook met de functie .text() krijg ik geen waarde.

dinsdag 5 juli 2016 12:19

Acties:

0 Henk 'm!

wjvds

Kun je met een minimaal voorbeeld komen waarbij het niet goed werkt? Als ik het volgende snippet run krijg ik wel gewoon de tekst "Afgerond" mee in het resultaat.

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
function bodyloaded() {
    alert($("#elem").html());
}
</script>
</head>
<body onload="bodyloaded()">
<table><tr><td id="elem">
<a href="javascript:void(0)" data-name="aandachtspunt_status_id" data-pk="1" data-value="5" class="editable editable-click" style="color: green;">Afgerond</a>
</td></tr></table>
</body>
</html>

dinsdag 5 juli 2016 12:21

Acties:

0 Henk 'm!

simon

Je kan in je console ook gebruik maken van jQuery en zo via je console debuggen en de resultaten inspecteren. Stuk makkelijker, helemaal als je DOM manipulaties doet.

|>

dinsdag 5 juli 2016 12:56

Acties:

0 Henk 'm!

radem205

Topicstarter

Bedankt voor jullie reacties. Ik zal de stappen die uitgevoerd worden vóór het opvragen van de html content even beschrijven;

1. Met behulp van een table export plugin (https://github.com/kayalshri/tableExport.jquery.plugin) exporteer ik een tabel naar Excel.
2. De onderstaande parser zorgt voor de uiteindelijke celwaarden in het Excel-bestand.

JavaScript:

function parseString(cell, rowIndex, colIndex) {
        var result = '';

        if (cell != null) {
          var $cell = $(cell);
          var htmlData;

          if ($cell[0].hasAttribute("data-tableexport-value"))
            htmlData = $cell.data("tableexport-value");
          else {
            htmlData = $cell.html();
          }
console.log( $cell.html() ); 


.....


}

3. De variabele 'cell' omvat het volgende (voorbeeld):

code:

1	<td style="text-align: center; "><a href="javascript:void(0)" data-name="aandachtspunt_status_id" data-pk="1" data-value="5" class="editable editable-click" style="color: green;">Afgerond</a></td>

4. Deze variabele wordt omgezet naar een jQuery object met als naam $cell. De inhoud van deze variabele is in de startpost te vinden.

Op het oog lijkt alles goed te gaan, maar ik heb echt geen idee waarom hij niet het verwachte resultaat toont. De console brengt weinig soelaas, daar ik niet exact weet hoe ik deze moet gebruiken i.c.m. een plugin.

[ Voor 47% gewijzigd door radem205 op 05-07-2016 13:00 ]

dinsdag 5 juli 2016 13:21

Acties:

0 Henk 'm!

Verwijderd

Blijkbaar staat in de variabele 'cell' wat anders dan je verwacht. Probeer eens te kijken waar die mee aangeleverd wordt, en waar dat allemaal vandaan komt.

dinsdag 5 juli 2016 13:22

Acties:

0 Henk 'm!

radem205

Topicstarter

Verwijderd schreef op dinsdag 05 juli 2016 @ 13:21:
Blijkbaar staat in de variabele 'cell' wat anders dan je verwacht. Probeer eens te kijken waar die mee aangeleverd wordt, en waar dat allemaal vandaan komt.

Zoals aangegeven heeft de variabele cell de volgende waarde:

<td style="text-align: center; "><a href="javascript:void(0)" data-name="aandachtspunt_status_id" data-pk="1" data-value="5" class="editable editable-click" style="color: green;">Afgerond</a></td>

Dus inclusief de waarde 'Afgerond'. Bij de omzetting naar een object of bij het uitvoeren van de functie html() gaat het blijkbaar mis.

dinsdag 5 juli 2016 13:24

Acties:

0 Henk 'm!

Tsjilp

RS[I]ds

Wat krijg je als je

code:

1	$(object)[0].innerHtml

opvraagt?

Raar... Is zo gek nog niet

dinsdag 5 juli 2016 13:29

Acties:

0 Henk 'm!

radem205

Topicstarter

Tsjilp schreef op dinsdag 05 juli 2016 @ 13:24:
Wat krijg je als je
code:
1
$(object)[0].innerHtml
opvraagt?

Dan krijg ik exact dezelfde output als met html(), terwijl innerHTML in de log de juiste waarde bevat.

[ Voor 17% gewijzigd door radem205 op 05-07-2016 13:30 ]

dinsdag 5 juli 2016 13:30

Acties:

0 Henk 'm!

Tsjilp

RS[I]ds

herstel, moet innerHTML zijn, hoofdlettergevoelig.

Raar... Is zo gek nog niet

dinsdag 5 juli 2016 13:36

Acties:

0 Henk 'm!

radem205

Topicstarter

Tsjilp schreef op dinsdag 05 juli 2016 @ 13:30:
herstel, moet innerHTML zijn, hoofdlettergevoelig.

Had ik al aangepast

. Maar nog steeds niet het gewenste resultaat. Ik krijg nog steeds alleen de html tags terug, en niet de waarde 'afgerond'. Ik snap er geen zak van.

Kanttekening; de celwaarden worden dynamisch ingeladen. Maar aangezien de variabele 'cell' wel de juiste waarde bevat, zal je zeggen dat dit geen fluit uitmaakt.

Als ik onderstaande code uitvoer in de console log:

$('#table_aandachtspunt tbody tr:first td:eq(1)').html();

Dit is dezelfde cel als die wordt omgezet naar de variabele $cell. Hiermee krijg ik wel het gewenste resultaat.

Edit: hmm, nu wordt het vreemd. Als ik $('#table_aandachtspunt tbody tr:first td:eq(1)').html(); uitvoer binnen de parser function dan krijg ik weer het foutieve resultaat.

[ Voor 47% gewijzigd door radem205 op 05-07-2016 13:41 ]

dinsdag 5 juli 2016 13:44

Acties:

0 Henk 'm!

Verwijderd

En als je "cell.innerHTML" gebruikt - dus de versie zonder de $?

dinsdag 5 juli 2016 13:48

Acties:

0 Henk 'm!

radem205

Topicstarter

Verwijderd schreef op dinsdag 05 juli 2016 @ 13:44:
En als je "cell.innerHTML" gebruikt - dus de versie zonder de $?

Hetzelfde probleem

dinsdag 5 juli 2016 13:49

Acties:

0 Henk 'm!

Tsjilp

RS[I]ds

is `td:eq(1)` een valid css queryselector??

Raar... Is zo gek nog niet

dinsdag 5 juli 2016 13:51

Acties:

0 Henk 'm!

radem205

Topicstarter

Tsjilp schreef op dinsdag 05 juli 2016 @ 13:49:
is `td:eq(1)` een valid css queryselector??

Ja, selecteert de td met als index 1.

Als ik onderstaande code uitvoer dan krijg ik bij de settimeout functie de juiste waarde terug, maar binnen de tableexport functie niet.

JavaScript:

setTimeout(function(){ 
console.log($('#table_aandachtspunt tbody tr:first td:eq(1)').html());
 }, 3000);

(function ($) {
    
  $.fn.extend({
    tableExport: function (options) {
        console.log($('#table_aandachtspunt tbody tr:first td:eq(1)').html());

........

Output settimeout:
<a href="javascript:void(0)" data-name="aandachtspunt_status_id" data-pk="1" data-value="5" class="editable editable-click" style="color: green;">Afgerond</a>

Output tableExport:
<a href="javascript:void(0)" data-name="aandachtspunt_status_id" data-pk="1" data-value="5"></a>

Het vreemde is ook dat class="editable editable-click" style="color: green;" weggelaten wordt bij de output onder tableExport.

[ Voor 69% gewijzigd door radem205 op 05-07-2016 14:09 ]

dinsdag 5 juli 2016 14:01

Acties:

0 Henk 'm!

DJMaze

En wat geeft:

JavaScript:

function parseString(cell, rowIndex, colIndex) {
    var result = '';

    if (cell) {
        var htmlData = cell.hasAttribute("data-tableexport-value") ? cell.getAttribute("data-tableexport-value") : cell.innerHTML;
console.log(htmlData);
console.dir(cell); 


.....


}

Ja, dit is geen jQuery. Heb je ook helemaal niet nodig.

Edit: zo kan ook:

JavaScript:

function parseString(cell, rowIndex, colIndex) {
    var result = '';

    if (cell) {
        var htmlData = cell.getAttribute("data-tableexport-value") || cell.innerHTML;
console.log(htmlData);
console.dir(cell); 


.....


}

Beide niet ideaal ivm <td data-tableexport-value="0"> of <td data-tableexport-value="">

[ Voor 56% gewijzigd door DJMaze op 05-07-2016 14:10 . Reden: Alternatieve methode toegevoegd ]

Maak je niet druk, dat doet de compressor maar

dinsdag 5 juli 2016 14:14

Acties:

0 Henk 'm!

radem205

Topicstarter

DJMaze schreef op dinsdag 05 juli 2016 @ 14:01:
En wat geeft:

JavaScript:

function parseString(cell, rowIndex, colIndex) {
    var result = '';

    if (cell) {
        var htmlData = cell.hasAttribute("data-tableexport-value") ? cell.getAttribute("data-tableexport-value") : cell.innerHTML;
console.log(htmlData);
console.dir(cell); 


.....


}

Ja, dit is geen jQuery. Heb je ook helemaal niet nodig.

Deze geeft hetzelfde onjuiste resultaat. Het vreemde vind ik hetgeen ik in mijn vorige post beschrijf. Dat de output buiten en binnen de tableExport plugin verschillend zijn.

dinsdag 5 juli 2016 14:18

Acties:

0 Henk 'm!

DJMaze

Oh zooooo.
De "tableExport" functie wordt aangeroepen voordat de data is ingevuld.
setTimeout verraad het probleem.

Maak je niet druk, dat doet de compressor maar

dinsdag 5 juli 2016 19:27

Acties:

0 Henk 'm!

radem205

Topicstarter

Nee dat is het niet. De tableexport functie wordt pas aangeroepen wanneer alle data is ingeladen. Immers, anders zal er helemaal geen data gevonden worden. Bij de export naar Excel krijg ik ook alle data in Excel te zien, behalve de waarden waar html code in verwerkt is. Echt heel raar.

dinsdag 5 juli 2016 20:29

Acties:

0 Henk 'm!

André

Analytics dude

Toch is het een timing ding, want de DOM is blijkbaar nog niet helemaal bijgewerkt, en met de settimeout is hij dat wel.

dinsdag 5 juli 2016 21:16

Acties:

0 Henk 'm!

radem205

Topicstarter

Hoe kan het dan dat ie binnen de tableexport al wel in de variabele 'cell' de juiste waarde toont?
Ik weet zeker dat het geen timing issue is. Het zit m in iets anders.

woensdag 6 juli 2016 02:39

Acties:

+1 Henk 'm!

Verwijderd

console.log linkt naar een object, niet naar de specifieke staat van dat object op het moment dat je console.log aanroept - misschien is dat het?

woensdag 6 juli 2016 09:49

Acties:

0 Henk 'm!

DanielG

i = 0x5f3759df - (i>>1); ☠₧ℳ🀪❣

Een ietswat 'ranzige' oplossing zou kunnen zijn dat je een kleine timeout in je tableExport doet om te wachten op je DOM updates.

JavaScript:

(function ($) {
    
  $.fn.extend({
    tableExport: function (options) {
        setTimeout(function(){ 
             console.log($('#table_aandachtspunt tbody tr:first td:eq(1)').html());
         }, 500);

http://xyproblem.info/

woensdag 6 juli 2016 18:18

Acties:

0 Henk 'm!

DJMaze

radem205 schreef op dinsdag 05 juli 2016 @ 21:16:
Ik weet zeker dat het geen timing issue is. Het zit m in iets anders.

Dan gebruik je dus geen AJAX/setInterval/setTimeout om die tabel te vullen/manipuleren.
En er is ook totaal geen ander script die asynchroon de DOM manipuleert.
Omdat jij dat in de Chrome Developer Tools Timeline hebt geconstateerd.

Maar hoe vul je die tabel dan wel?

[ Voor 11% gewijzigd door DJMaze op 06-07-2016 18:24 ]

Maak je niet druk, dat doet de compressor maar

Vraag

Alle reacties