insertAfter object elelment

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Daniel van Seggelen

Daniel van Seggelen

09/05/2017 10:33:58
Quote Anchor link
Ik heb code waarbij object elementen worden gemaakt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
            var upvoteEl = $('<button/>', {
                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(upvoteIcon);
            
            
            $( "<p>Test</p>" ).insertAfter( upvoteEl );


Als het geen objecten zijn, en ik refereer direct naar een class of id o.i.d , dan werkt alles prima, maar op deze wijze lukt het niet.

ik wil in dit geval bijv test na de button tag, maar er komt niks. Ook geen foutmelding.

nog iets

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
            var downvoteEl = $('<button/>', {
                'class': 'action downvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(downvoteIcon).append($('<span/>', {
                text: commentModel.downvoteCount,
                'class': 'downvote-count'
            }));


dit genereerd:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<button class="action downvote highlight-font"><i class="fa fa-thumbs-down"></i><span class="downvote-count">0</span></button>


maar ik wil juist

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<button class="action downvote highlight-font"><i class="fa fa-thumbs-down"></i></button>

<span class="downvote-count">0</span>


maar krijg ik niet voor elkaar, weet iemand wat ik verkeerd doe?
 
PHP hulp

PHP hulp

22/07/2019 12:45:05
 
Ben van Velzen

Ben van Velzen

09/05/2017 10:48:07
Quote Anchor link
Hint: Wanneer je een stuk HTML *na* een button wilt hebben moet je het aan het bovenliggende element appenden en niet aan de button.
 
Daniel van Seggelen

Daniel van Seggelen

09/05/2017 13:55:39
Quote Anchor link
Quote:
Hint: Wanneer je een stuk HTML *na* een button wilt hebben moet je het aan het bovenliggende element appenden en niet aan de button.


Maar daar is de insertAfter toch voor. het moet als siblings ongevoerd worden.
bovenliggend kan een parent zijn of een bovenliggende sibling. Zonder details is het nogal onduidelijk hoe je dit beschrijft.
Als je even goed leest, dan lees je dat het gewoon werkt als ik het zonder objecten doe, maar op deze wijze lukt het niet.

Nog een herhaling:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
            var upvoteEl = $('<button/>', {
                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(upvoteIcon);


deze bovenstaande code maakt de button aan.

NAAST deze button (sibling) wil ik bijv: <p>Test</p> plaatsen

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$( "<p>Test</p>" ).insertAfter( upvoteEl );


dit is wat niet werkt.

UPDATE

Mijn code was gewoon goed, maar het werkt alleen als ik een timeout erin plaats.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
setTimeout(function() {
   $( "<span>Test</span>" ).insertAfter( upvoteEl );
}, 1250);


maar als ik hem nested als child in button wil hebben, doet hij het wel zonder timeout:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
            var upvoteEl = $('<button/>', {
                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(upvoteIcon).append($('<span/>', {
                text: commentModel.upvoteCount,
                'class': 'upvote-count'
            }));

Hoe zorg ik ervoor dat ik code kan invoeren zonder timeout en niet als child van de button?

UPDATE

ik heb een hacky oplossing,

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
var checkExist = setInterval(function() {
   if (upvoteEl.length) {
      console.log("Exists!");
       $(upcount).insertAfter( upvoteEl );
      clearInterval(checkExist);
   }
}, 100); // check every 100ms


is er een betere manier?
Gewijzigd op 09/05/2017 14:52:15 door Daniel van Seggelen
 
Thomas van den Heuvel

Thomas van den Heuvel

09/05/2017 15:16:46
Quote Anchor link
Je append de icon aan de button en de span aan de icon beide aan de button.

Waarom niet gewoon een simpele HTML snippet in JS in plaats van proberen HTML te bouwen met JS?

Wat je wss wilt:
var button = ...
button.append(jeIconHiero)
button.insertAfter(jeSpanHiero)

Maar een simpele HTML snippet is wellicht beter leesbaar?
Gewijzigd op 09/05/2017 15:17:51 door Thomas van den Heuvel
 
Daniel van Seggelen

Daniel van Seggelen

09/05/2017 15:29:55
Quote Anchor link
omdat ik ik een script http://viima.github.io/jquery-comments/ aanpas en die is zo geschreven,
vele dependancies, dus grote kans is als ik dit hier aanpas, vele andere dingen niet werken, dus ik probeer hun stijl aan te houden.

Of wellicht mis ik iets? hoe bedoel je precies met alleen JS?
 
Thomas van den Heuvel

Thomas van den Heuvel

09/05/2017 15:50:18
Quote Anchor link
x.append = voeg achteraan toe IN element x
x.insertAfter = voeg toe NA element x

Mogelijk ben je er al door de tweede append te veranderen in insertAfter?

EDIT Maar dan wel met chaining. Wat jij doet in je initiële codefragment is:

var bla = button.append(...)
bla.append(...)

Maar die eerste append(...) is een callback-functie, dus bla.append(...) wordt al uitgevoerd terwijl bla nog gecreëerd wordt.

Doe dus alles na elkaar:
var bla = button
bla.append(...)
bla.insertAfter(...)

Of alles tegelijkertijd:
var bla = button.append(...).insertAfter(...)

Maar geen mengvorm want dat gaat geheid mis. Bij de aanroep van een callback-functie gaat alle code NA deze callback-functie DIRECT door, je hebt dan dus als het ware twee "code-threads" die tegelijkertijd worden uitgevoerd. Je kunt dan niet voortbouwen op iets wat mogelijk nog niet klaar (in uitvoering) is.
Gewijzigd op 09/05/2017 15:56:55 door Thomas van den Heuvel
 
Daniel van Seggelen

Daniel van Seggelen

09/05/2017 16:45:30
Quote Anchor link
Of alles tegelijkertijd:
var bla = button.append(...).insertAfter(...)


Dit heb ik al geprobeerd in een eerder stadium en werkt niet, dat was ook de reden waarom ik hem hier post:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
    var upcount = $('<span/>', {
                text: commentModel.upvoteCount,
                'class': 'upvote-count'
    });


            var upvoteEl = $('<button/>', {
                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
            }).append(upvoteIcon).insertAfter(upcount);


werkt dus niet, hij word niet aangemaakt.
. Geen foutmeldingen ook. Maar denk dat het element daarvoor bij append nog niet gemaakt is, want met een interval werkt het alleen.
 
Thomas van den Heuvel

Thomas van den Heuvel

09/05/2017 18:08:03
Quote Anchor link
Uhm, heb je dit hele gedoe wel in een $().ready(function() { ... }) blok staan?
 
Daniel van Seggelen

Daniel van Seggelen

09/05/2017 18:19:49
Quote Anchor link
jazeker wel.
maar goed het werkt allemaal wel goed met een interval lijkt het. Is dit wel betrouwbaar?
 
Thomas van den Heuvel

Thomas van den Heuvel

09/05/2017 19:40:10
Quote Anchor link
Als dit een standaard brok functionaliteit is, heeft dat ding dan geen hooks/callbacks of wat dan ook waar je op in kan haken, oftewel, doe je je aanpassingen wel op de Goede Manier?

Zo'n timeout lijkt mij een kunstgreep, en gaat mogelijk ook niet altijd werken als er een hickup in het netwerk zit waardoor dingen langer duren.

En als je hier geen custom code op kunt schrijven is dat ding een baksteen, of was het nooit de bedoeling dat dit uberhaupt kon.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.