[HTML, CSS, JS] Frontend #37: $(".knowledge").extend();

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  zaterdag 30 november 2013 @ 10:29:48 #151
230788 n8n
Pragmatisch
pi_133769265
quote:
0s.gif Op vrijdag 29 november 2013 22:24 schreef Neraice het volgende:

[..]

Netjes gedaan.

Ik zou overigens .content veranderen naar .remo-content om eventuele conflicten te vermijden.
goeie ja
“Specialization is for insects”.—Robert Heinlein
  zaterdag 30 november 2013 @ 14:16:48 #152
137776 boem-dikkie
Jedi Mind Baby!
pi_133773694
quote:
0s.gif Op vrijdag 29 november 2013 22:12 schreef xaban06 het volgende:
Ik wil het volgende bereiken.
2x HTML dropdown naast elkaar. De tweede dropdown moet leeg zijn, deze moet pas gevuld worden bij het selecteren van een item in de eerste dropdown.

Dropdown 1:
BMW
Volkswagen
Mercedes

Afhankelijk van de gekozen optie moet dropdown 2 gevuld worden met:
Passat
Jetta
Golf

Bij het kiezen van Volkswagen.

Ik hoop dat het een beetje duidelijk is. In welke richting moet ik zoeken/Googlen?
Kun je vrij makkelijk oplossen met jQuery, maar een lege dropdown is lelijk dus daar zou ik wat anders voor kiezen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_133774596
Ik zou daar inderdaad ook een hele library voor gaan inladen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<label for="merk">Merk</label>
<select id="merk">
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="Merceded">Mercedes</option>
</select>
<label for="type">Type</label>
<select id="type">
<optgroup label="BMW">
<option value="BMW Type 1">BMW Type 1</option>
<option value="BMW Type 2">BMW Type 2</option>
<option value="BMW Type 3">BMW Type 3</option>
</optgroup>
<optgroup label="Mercedes">
<option value="Mercedes Type 1">Mercedes Type 1</option>
<option value="Mercedes Type 2">Mercedes Type 2</option>
<option value="Mercedes Type 3">Mercedes Type 3</option>
</optgroup>
<optgroup label="Ford">
<option value="Ford Type 1">Ford Type 1</option>
<option value="Ford Type 2">Ford Type 2</option>
<option value="Ford Type 3">Ford Type 3</option>
</optgroup>
</select>

In je HTML. En dan in je JS:

1
2
3
4
5
6
7
8
9
10
11
12		var types = document.getElementById('type'),
merk = document.getElementById('merk'),
groups = types.children, i = 0;

merk.addEventListener('change',function(){
  
for(; i < groups.length; i++){
var current = groups[i];
  console.log(current.getAttribute('label') === merk.value);
current.disabled = (current.getAttribute('label') === merk.value);
}
});

Zoiets. Uiteraard zou ik het normaal gesproken mooier opzetten dan dit ;)

[ Bericht 49% gewijzigd door PimD op 30-11-2013 15:16:16 ]
Nee.
  zaterdag 30 november 2013 @ 15:11:18 #154
137776 boem-dikkie
Jedi Mind Baby!
pi_133774758
quote:
0s.gif Op zaterdag 30 november 2013 15:00 schreef PimD het volgende:
Ik zou daar inderdaad ook een hele library voor gaan inladen.
Gewoon JS kan ook wel maar aangezien xaban niet eens weet in welke richting hij moet Googlen denk ik dat hij makkelijker een jQuery oplossing kan zoeken. :')
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_133791002
Mijn dank is groot aan iedereen _O_

Ik ben een totaal leek op gebied van JS/jQuery, dus heb ik iemand betaald om wat te maken voor mij.

Namelijk wanneer je op een submit button klikt, dat je opdezelfde pagina blijft, de knop veranderd in de output van je post script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<script type="text/javascript" data-src="http://code.jquery.com/jquery-1.10.2.min.js" style="visibility:hidden;"></script>
        <script type="text/javascript">
            $(document).on('click', '#submitButton input[type=button]', function(){
                var name = $("#name").val();
                var category = $("#category").val();
                var brand = $("#brand").val();

                $.ajax({
                    type: "POST",
                    url: "add_data.php",
                    data: { name: name, category: category, brand: brand }
                })
                .done(function(msg) {
                    $("#submitButton").html(msg);
                });
            });
        </script>

1
2
3
4
5
6
7
8		<form method="POST">
<input type="text" name="name" id="name" value="foo" size=35>
<input type="text" name="category" id="category" value="bar" size=20>
<input type="text" name="brand" id="brand" value="foobar" size=10>
<div id="submitButton">
<input type="button" name="submitButton" value="Add">
</div>
</form>

Dit werkt, echter werkt het niet wanneer ik van dezelfde formulier er meerdere op de pagina heb, maar dat is wat ik juist wilde bereiken.

Dat ik dus 100 producten onder elkaar zie, de inhoud controleer en snel op de submit button kan klikken.

Diegene wilt dat ik ;m extra betaal om het op te lossen :(

Ik denk zelf dat het door de duplicate div komt. Als dat zo is, hoe los ik dat op?
  zondag 1 december 2013 @ 00:32:34 #156
166255 Maringo
Bèhèhèhèh
pi_133791071
quote:
0s.gif Op zondag 1 december 2013 00:30 schreef xaban06 het volgende:
Diegene wilt dat ik ;m extra betaal om het op te lossen :(
En terecht. :Y

quote:
0s.gif Op zondag 1 december 2013 00:30 schreef xaban06 het volgende:
Mijn dank is groot aan iedereen _O_

Ik ben een totaal leek op gebied van JS/jQuery, dus heb ik iemand betaald om wat te maken voor mij.

Namelijk wanneer je op een submit button klikt, dat je opdezelfde pagina blijft, de knop veranderd in de output van je post script.
[ code verwijderd ]

[ code verwijderd ]

Dit werkt, echter werkt het niet wanneer ik van dezelfde formulier er meerdere op de pagina heb, maar dat is wat ik juist wilde bereiken.

Dat ik dus 100 producten onder elkaar zie, de inhoud controleer en snel op de submit button kan klikken.
Je moet de name van de button uniek maken. Nee laat maar. :|W
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_133791107
quote:
2s.gif Op zondag 1 december 2013 00:32 schreef Maringo het volgende:

[..]

En terecht. :Y

[..]

Je moet de name van de button uniek maken. diezelfde naam komt op regel 3 weer terug van je script.
Hoezo terecht? Hij had het gewoon in 1 keer goed moeten maken :(
  zondag 1 december 2013 @ 00:34:35 #158
166255 Maringo
Bèhèhèhèh
pi_133791125
quote:
0s.gif Op zondag 1 december 2013 00:33 schreef xaban06 het volgende:

[..]

Hoezo terecht? Hij had het gewoon in 1 keer goed moeten maken :(
Heb je gemeld dat het er meerdere op een pagina moeten zijn?
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_133791173
quote:
2s.gif Op zondag 1 december 2013 00:34 schreef Maringo het volgende:

[..]

Heb je gemeld dat het er meerdere op een pagina moeten zijn?
SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
  zondag 1 december 2013 @ 00:37:35 #160
166255 Maringo
Bèhèhèhèh
pi_133791201
quote:
0s.gif Op zondag 1 december 2013 00:36 schreef xaban06 het volgende:

[..]

SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Ok. Dan niet inderdaad.
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
  zondag 1 december 2013 @ 01:24:16 #161
166255 Maringo
Bèhèhèhèh
pi_133792435
quote:
0s.gif Op zondag 1 december 2013 00:30 schreef xaban06 het volgende:
Mijn dank is groot aan iedereen _O_

Ik ben een totaal leek op gebied van JS/jQuery, dus heb ik iemand betaald om wat te maken voor mij.

Namelijk wanneer je op een submit button klikt, dat je opdezelfde pagina blijft, de knop veranderd in de output van je post script.
[ code verwijderd ]

[ code verwijderd ]

Dit werkt, echter werkt het niet wanneer ik van dezelfde formulier er meerdere op de pagina heb, maar dat is wat ik juist wilde bereiken.

Dat ik dus 100 producten onder elkaar zie, de inhoud controleer en snel op de submit button kan klikken.

Diegene wilt dat ik ;m extra betaal om het op te lossen :(

Ik denk zelf dat het door de duplicate div komt. Als dat zo is, hoe los ik dat op?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		             $('form').click(function(e){
               
                if($(e.target).is('input[type=button]', this)){
                    var name = $('#name', this).val();
                    var category = $("#category", this).val();
                    var brand = $("#brand", this).val();

                $.ajax({
                    type: "POST",
                    url: "add_data.php",
                    data: { name: name, category: category, brand: brand }
                })
                .done(function(msg) {
                    $('input[type=button]', this).html(msg);
                }
                
            });
Geen idee wat je terug krijgt van de Ajax call, maar het kan zijn dat je die regel moet vervangen voor wat er in de versie hieronder zit.

Een downgraded versie vind je hier: http://jsfiddle.net/HMt8d/1/ Dit is zonder de Ajax call
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_133802070
quote:
2s.gif Op zondag 1 december 2013 01:24 schreef Maringo het volgende:

[..]
[ code verwijderd ]

Geen idee wat je terug krijgt van de Ajax call, maar het kan zijn dat je die regel moet vervangen voor wat er in de versie hieronder zit.

Een downgraded versie vind je hier: http://jsfiddle.net/HMt8d/1/ Dit is zonder de Ajax call
Je code doet helemaal niks :(
pi_133804010
quote:
0s.gif Op zondag 1 december 2013 13:50 schreef xaban06 het volgende:

[..]

Je code doet helemaal niks :(
Lekker dankbaar.
pi_133805914
quote:
19s.gif Op zondag 1 december 2013 14:42 schreef TwenteFC het volgende:

[..]

Lekker dankbaar.
Wat dan? Ik geef aan dat het niet werkt?
  zondag 1 december 2013 @ 15:31:30 #165
56176 Catch22-
Ben je Blind?!
pi_133806161
quote:
0s.gif Op zondag 1 december 2013 15:25 schreef xaban06 het volgende:

[..]

Wat dan? Ik geef aan dat het niet werkt?
hij geeft je meer dan genoeg richting om t op te lossen. Een beetje eigen inzicht en moeite mag wel, we gaan hier niet alles voor je uitdenken.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_133806455
quote:
1s.gif Op zondag 1 december 2013 15:31 schreef Catch22- het volgende:

[..]

hij geeft je meer dan genoeg richting om t op te lossen. Een beetje eigen inzicht en moeite mag wel, we gaan hier niet alles voor je uitdenken.
Dat hoeft ook niet :) Als jullie dat niet willen/kunnen/whatever, begrijp ik dat :) Snap de felle reacties niet echt. Ik gaf alleen dat het niet werkte, meer niet.
  zondag 1 december 2013 @ 15:43:43 #167
166255 Maringo
Bèhèhèhèh
pi_133806633
quote:
0s.gif Op zondag 1 december 2013 15:39 schreef xaban06 het volgende:

[..]

Dat hoeft ook niet :) Als jullie dat niet willen/kunnen/whatever, begrijp ik dat :) Snap de felle reacties niet echt. Ik gaf alleen dat het niet werkte, meer niet.
Woord- en smileykeuze is een belangrijke factor voor de felle reacties.

En lees ook es wat ik bij de code gezet heb. Als je dat niet begrijpt, geef dat dan aan. Maar zo'n reactie is alleen maar ten nadele van jezelf voor toekomstige hulpvragen.
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_133806850
quote:
2s.gif Op zondag 1 december 2013 15:43 schreef Maringo het volgende:

[..]

Woord- en smileykeuze is een belangrijke factor voor de felle reacties.

En lees ook es wat ik bij de code gezet heb. Als je dat niet begrijpt, geef dat dan aan. Maar zo'n reactie is alleen maar ten nadele van jezelf voor toekomstige hulpvragen.
Ik was niet boos ofzo :D dan had ik wel gekozen voor }:| / :r / :N / -O-

Ik vond het gewoon jammer, vandaar die smiley.

Anyways, thanks voor je moeite ^O^
  zondag 1 december 2013 @ 15:49:55 #169
166255 Maringo
Bèhèhèhèh
pi_133806996
quote:
0s.gif Op zondag 1 december 2013 15:46 schreef xaban06 het volgende:

[..]

Ik was niet boos ofzo :D dan had ik wel gekozen voor }:| / :r / :N / -O-

Ik vond het gewoon jammer, vandaar die smiley.

Anyways, thanks voor je moeite ^O^
no problem. Maar wat doet er niet? Krijg je wel een alert als je die ergens tussen doet? En wat krijg je uit je Ajax call terug?
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_133807336
quote:
2s.gif Op zondag 1 december 2013 15:49 schreef Maringo het volgende:

[..]

no problem. Maar wat doet er niet? Krijg je wel een alert als je die ergens tussen doet? En wat krijg je uit je Ajax call terug?
Er gebeurde gewoon helemaal niks na het klikken op de submit button.

Diegene die ik had betaald heeft het toch nog kosteloos voor me gescript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		        <script type="text/javascript">
            $(document).on('click', '#submitButton input[type=button]', function(){
                var field1 = $(this).parent().parent().find(".field1").val();
                var field2 = $(this).parent().parent().find(".field2").val();
                var field3 = $(this).parent().parent().find(".field3").val();
                var field4 = $(this).parent().parent().find(".field4").val();

                var submitButton = $(this);

                $.ajax({
                    type: "POST",
                    url: "add_data.php",
                    data: { field1: field1, field2: field2, field3: field3, field4: field4 }
                })
                .done(function(msg) {
                    submitButton.parent().html(msg);
                });
            });
        </script>
  zondag 1 december 2013 @ 15:57:45 #171
166255 Maringo
Bèhèhèhèh
pi_133807407
quote:
0s.gif Op zondag 1 december 2013 15:56 schreef xaban06 het volgende:

[..]

Er gebeurde gewoon helemaal niks na het klikken op de submit button.

Diegene die ik had betaald heeft het toch nog kosteloos voor me gescript:
[ code verwijderd ]

Die dubbele .parent() :|W

Volgens mij deed ie het niet omdat ik dacht dat je wat anders uit je Ajax call terug krijgt.
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_133816300
quote:
0s.gif Op zondag 1 december 2013 15:46 schreef xaban06 het volgende:

[..]

Ik was niet boos ofzo :D dan had ik wel gekozen voor }:| / :r / :N / -O-

Ik vond het gewoon jammer, vandaar die smiley.

Anyways, thanks voor je moeite ^O^
die :( emoticon/smiley is verrot voor ex-MSN gebruikers :P je zou verwachten dat :( een ;( zou opleveren, en dat :( onder
1:@
zou zitten.

Was voor mij ook even wennen ooit, toen ik voor het eerst op Fok kwam....
  maandag 2 december 2013 @ 09:19:36 #173
166255 Maringo
Bèhèhèhèh
pi_133834116
Ik ben op zoek naar een JS library waarmee je met behulp van een (timeline) slider langs verschillende plaatjes slide. De plaatjes staan op dezelfde plek en faden in elkaar over, waardoor je dus heen en weer kan faden tussen de verschillende plaatjes..

Google levert niet de resultaten op die ik wil.. Hebben jullie een idee?
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
  maandag 2 december 2013 @ 09:33:19 #174
137776 boem-dikkie
Jedi Mind Baby!
pi_133834373
Probeer te zoeken op een 'slider' waarmee je navigeert doormiddel van een slider. Hoe je dat vormgeeft kun je zelf wel aanpassen en dat je een fade effect wil in het afbeeldingen verwisselen zit vaak ook wel in dat soort toepassingen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_133836053
quote:
2s.gif Op maandag 2 december 2013 09:19 schreef Maringo het volgende:
Ik ben op zoek naar een JS library waarmee je met behulp van een (timeline) slider langs verschillende plaatjes slide. De plaatjes staan op dezelfde plek en faden in elkaar over, waardoor je dus heen en weer kan faden tussen de verschillende plaatjes..

Google levert niet de resultaten op die ik wil.. Hebben jullie een idee?
Ik weet niet hoe goed je JS skills zijn maar dit soort zaken zijn met D3JS erg goed te doen.
🕰️₿🕰️₿🕰️₿🕰️₿🕰️₿🕰️ TikTok next Block
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[HTML, CSS, JS] Frontend #37: $(".knowledge").extend();
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')