jQuery VS html

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Donny Wie weet

Donny Wie weet

23/09/2013 23:33:45
Quote Anchor link
Hoi allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
PHP hulp

PHP hulp

19/06/2024 00:12:19
 
N K

N K

24/09/2013 00:13:23
Quote Anchor link
Ben zelf beginner in jquery maar ik los dit op door het plaatje een display:none mee te geven in je css en dan met show deze tonen.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script>
        $(document).ready(function(){
            $('#add_event').click(function(){
                $('#loader').show();
            });
        });
    </script>
 
Wouter J

Wouter J

24/09/2013 07:57:18
Quote Anchor link
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?
 
Robert Wazzaa

Robert Wazzaa

24/09/2013 09:25:46
Quote Anchor link
Dit zal beter werken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
        $(document).ready(function(){
            $('#add_event').click(function(){
                $('#loader').append('<img src="images/icons/loader.gif">');
            });
        });
Gewijzigd op 24/09/2013 09:27:29 door Robert Wazzaa
 
Donny Wie weet

Donny Wie weet

24/09/2013 13:45:18
Quote Anchor link
@Wouter: Ik heb .HTML gebruikt omdat de functie van Robert niet werkt. Dat was de eerste code die ik gebruikte. Ik ging nadenken wat het probleem kon zijn en kwam met het volgende: als je appendTo gebruikt, word het dan wel als HTML attribuut gezet? Dus stapte over naar .html. Echter werkte het toen nog niet.
 
Kris Peeters

Kris Peeters

24/09/2013 14:17:12
Quote Anchor link
.html() doet het volgende: de innerHTML geven of zetten. Afhankelijk of je een parameter zet (dan is het zetten) of niet (dan is het lezen)

bv.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

of dus

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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.
 
Wouter J

Wouter J

24/09/2013 14:20:23
Quote Anchor link
Of je draait het om en gebruikt appendTo:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$('#loader').append('<img ...>');
// of
$('<img ...>').appendTo('#loader');

Geen idee waarom jQuery 2 versies van deze method heeft...
 
Donny Wie weet

Donny Wie weet

24/09/2013 15:59:42
Quote Anchor link
@Kris: bedankt voor de uitleg, het is zeer helder voor me.

Echter werkt het van Robert niet. Denk dat ik dan maar opzoek moet naar een andere oplossing?
 
Kris Peeters

Kris Peeters

24/09/2013 16:08:22
Quote Anchor link
Toon eens de HTML die daarbij hoort
 
Donny Wie weet

Donny Wie weet

24/09/2013 16:16:23
Quote Anchor link
Het is trouwens wel een .gif afbeelding, heeft dat er iets mee te maken?

Toevoeging op 24/09/2013 16:17:10:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Kris Peeters

Kris Peeters

24/09/2013 16:17:57
Quote Anchor link
Nee.

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
 
Donny Wie weet

Donny Wie weet

24/09/2013 16:21:44
Quote Anchor link
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


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
 
Kris Peeters

Kris Peeters

24/09/2013 16:26:18
Quote Anchor link
id moet uniek zijn. Geen uitzondering!


Als het niet uniek kan zijn, moet je met class werken.
Dan gaat het zo:
bv.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
  }
}
 
Donny Wie weet

Donny Wie weet

24/09/2013 16:33:44
Quote Anchor link
Maar het ID is 100% uniek van de button, komt nergens terug...
 
Kris Peeters

Kris Peeters

24/09/2013 16:36:39
Quote Anchor link
Die submit al veranderd naar een button?

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
 
N K

N K

24/09/2013 16:45:11
Quote Anchor link
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?


Dat is nogal kort door de bocht.
Wat doet dit niet wat de TS wil?
http://jsfiddle.net/VqSRW/1/
 
Donny Wie weet

Donny Wie weet

24/09/2013 16:45:13
Quote Anchor link
Het rare is, een PNG bestand pakt ie wel, maar een GIF bestand pakt ie niet :S
 
Joakim Broden

Joakim Broden

24/09/2013 16:53:14
Quote Anchor link
1) Heb je een live demo waar we mee kunnen testen, hebben we (ik) veel meer aan.
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.
 
Donny Wie weet

Donny Wie weet

24/09/2013 16:57:28
Quote Anchor link
@Hertog:

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.
 
Joakim Broden

Joakim Broden

24/09/2013 17:02:46
Quote Anchor link
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
 
Donny Wie weet

Donny Wie weet

24/09/2013 17:04:02
Quote Anchor link
Oke, maar hoe verklaar je dan dat note.png, die overigens in dezelfde map WEL geladen word, en de loader.gif niet?
 

Pagina: 1 2 volgende »



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.