jQuery VS html
Ik heb eindelijk jQuery geleerd... Wil nu net een scriptje schrijven maar kom ergens niet uit. Het werkt prima maar, 1 klein probleempje: ik heb een loader image gedownload en als er op een bepaalde knop geklikt word, word de image in de HTML gegooid... Alleen word de image niet getoond terwijl de url 100% goed is...
Iemand een idee hoe dit kan? Groeten donny
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script>
$(document).ready(function(){
$('#add_event').click(function(){
$('<img src="images/icons/loader.gif">').html(function(){
$(this).appendTo('#loader');
});
});
});
</script>
$(document).ready(function(){
$('#add_event').click(function(){
$('<img src="images/icons/loader.gif">').html(function(){
$(this).appendTo('#loader');
});
});
});
</script>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
$(document).ready(function(){
$('#add_event').click(function(){
$('#loader').show();
});
});
</script>
$(document).ready(function(){
$('#add_event').click(function(){
$('#loader').show();
});
});
</script>
Donny, kun je me uitleggen wat die html functie doet? Waarom roep je niet direct de appendTo method aan?
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$('#add_event').click(function(){
$('#loader').append('<img src="images/icons/loader.gif">');
});
});
$('#add_event').click(function(){
$('#loader').append('<img src="images/icons/loader.gif">');
});
});
Gewijzigd op 24/09/2013 09:27:29 door Robert Wazzaa
bv.
Code (php)
1
2
2
var mijn_content = '<span>Hello World!</span>';
$('#data').html(mijn_content); // dit steekt <span>Hello World!</span> binnen een element zoals bv. <div id="data"></div>
$('#data').html(mijn_content); // dit steekt <span>Hello World!</span> binnen een element zoals bv. <div id="data"></div>
of dus
Code (php)
1
var mijn_content = $('#data').html(); // dit haalt de innerHTML van een element zoals bv. <div id="data"></div>
Dat is wat .html() doet.
Uiteraard heeft een image geen innerHTML.
--------------
Dus, wanneer de gebruiker op een knop drukt, wil je dat er in <div id="loader"></div> een image komt die aanduidt dat iets aan het laden is.
Ja?
Dat van Robert zou dan moeten werken.
Code (php)
1
2
3
2
3
$('#loader').append('<img ...>');
// of
$('<img ...>').appendTo('#loader');
// of
$('<img ...>').appendTo('#loader');
Geen idee waarom jQuery 2 versies van deze method heeft...
Echter werkt het van Robert niet. Denk dat ik dan maar opzoek moet naar een andere oplossing?
Toevoeging op 24/09/2013 16:17:10:
Code (php)
1
2
3
4
5
2
3
4
5
<h3 class="accordion-title">Stap 7: Event opslaan</h3>
<div style="max-height:75px;">
<p><input type="submit" name="add_event" value="Plaats nieuw evenement" id="add_event"></form></p>
<p id="loader"></p>
</div>
<div style="max-height:75px;">
<p><input type="submit" name="add_event" value="Plaats nieuw evenement" id="add_event"></form></p>
<p id="loader"></p>
</div>
Ik wil zien wat #add_event en #loader zijn.
------
Edit: Ah, je hebt er een submit button van gemaakt.
Verander dat eens naar
<input type="button" id="add_event" ...>
Want submit buttons hebben de eigenschap om te submitten; dus wordt de pagina verlaten.
Gewijzigd op 24/09/2013 16:20:29 door Kris Peeters
Toevoeging op 24/09/2013 16:25:03:
Kris, wat ik vergeet: Als er submit geklikt word, duurt het even voro de afbeelding ingeladen is en komt er een draai schijfje te staan dat de gegevens verwerkt worden
Als het niet uniek kan zijn, moet je met class werken.
Dan gaat het zo:
bv.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<input type="button" class="add_event" value="GO">
...
$(document).ready(function(){
$('.add_event').click(function(){
var button = $(this); // dit geeft je de specifieke button waar de gebruiker op geklikt heeft
}
}
...
$(document).ready(function(){
$('.add_event').click(function(){
var button = $(this); // dit geeft je de specifieke button waar de gebruiker op geklikt heeft
}
}
Nog een piste:
Zet daar eens de volledige url van de afbeelding (met http:// ). Controleer goed of die klopt.
Misschien een probleem van relatieve paden
Gewijzigd op 24/09/2013 16:38:46 door Kris Peeters
Wouter J op 24/09/2013 07:57:18:
Nl, dat heeft hier niks mee te maken...
Donny, kun je me uitleggen wat die html functie doet? Waarom roep je niet direct de appendTo method aan?
Donny, kun je me uitleggen wat die html functie doet? Waarom roep je niet direct de appendTo method aan?
Dat is nogal kort door de bocht.
Wat doet dit niet wat de TS wil?
http://jsfiddle.net/VqSRW/1/
2) Heb je een javascript error?
3) Hoe weet je zeker dat de URL 100% goed is? Zie je dat de IMG wel aan #loader toegevoegd word (in de broncode), zo ja dan is de URL fout, zo nee dan gaat er iets verkeerd in je code.
4) Denk om je HTML
- Je sluit een form af? Waarom word die aangemaakt?
- Geen inline CSS
- p = paragraaf != form. Dus geen form in een p tag.
- p = paragraaf != loader. Loader is geen paragraaf maar een afbeelding/block element. Maar hier dus een div van.
Toevoeging op 24/09/2013 16:56:32:
Donny Wie weet op 24/09/2013 16:21:44:
Er staat al een id met add_event, afbeelding komt er ook wel te staan, maar dan staat er dat image niet gevonden kan worden. Als je de link url kopie paste, dan kom je gewoon bij de image terrecht
Dan bestaat de afbeelding gewoon niet (wss is het pad verkeerd door SEO url's).
Toevoeging op 24/09/2013 16:57:08:
Donny Wie weet op 24/09/2013 16:45:13:
Het rare is, een PNG bestand pakt ie wel, maar een GIF bestand pakt ie niet :S
Gif toevallig niet op geslagen als CMYK dat kan in sommige browsers ook voor problemen zorgen.
1,2,3) Ik heb geen live voorbeeld. Ik krijg ook geen errors. URL is 100% goed omdat ik de URL knip van het werkende voorbeeld bestand dus http://www.voorbeeld.nl/images/loader.gif
4) HTML heb ik aangepast naar DIV.
Donny Wie weet op 24/09/2013 16:57:28:
1,2,3) Ik heb geen live voorbeeld. Ik krijg ook geen errors. URL is 100% goed omdat ik de URL knip van het werkende voorbeeld bestand dus http://www.voorbeeld.nl/images/loader.gif
En wie zegt dan dat de URL goed is?
Als jou url http://www.voorbeeld.nl/home/lorem/ipsum is en je afbeelding is images/loader.gif dan word de url http://www.voorbeeld.nl/home/lorem/ipsum/images/loader.gif. Werk met absolute paden dus bijvoorbeeld /images/loader.gif (wel html meta base instellen dan). Ik neem aan dat jij die link gewoon achter het domein plakt, dat doet de browser dus niet, die plakt het achter de volledige url.
En wil je sneller hulp? Knal dan gewoon een voorbeeld online, dan kunnen we veel makkelijker helpen omdat we meer code tot onze beschikking hebben..
Gewijzigd op 24/09/2013 17:04:29 door Joakim Broden