insertAfter object elelment
Code (php)
1
2
3
4
5
6
2
3
4
5
6
var upvoteEl = $('<button/>', {
'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
}).append(upvoteIcon);
$( "<p>Test</p>" ).insertAfter( upvoteEl );
'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)
1
2
3
4
5
6
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'
}));
'class': 'action downvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
}).append(downvoteIcon).append($('<span/>', {
text: commentModel.downvoteCount,
'class': 'downvote-count'
}));
dit genereerd:
Code (php)
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)
1
2
3
2
3
<button class="action downvote highlight-font"><i class="fa fa-thumbs-down"></i></button>
<span class="downvote-count">0</span>
<span class="downvote-count">0</span>
maar krijg ik niet voor elkaar, weet iemand wat ik verkeerd doe?
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)
1
2
3
2
3
var upvoteEl = $('<button/>', {
'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
}).append(upvoteIcon);
'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)
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)
1
2
3
2
3
setTimeout(function() {
$( "<span>Test</span>" ).insertAfter( upvoteEl );
}, 1250);
$( "<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)
1
2
3
4
5
6
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'
}));
'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)
1
2
3
4
5
6
7
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
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
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
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?
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
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)
1
2
3
4
5
6
7
8
9
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);
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.
maar goed het werkt allemaal wel goed met een interval lijkt het. Is dit wel betrouwbaar?
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.