Verkorte code

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Web Ontwikkelaar PHP, Nijmegen

Contactpersoon Roel Kavelaar rkavelaarATsearch-consult.nl 0243528815 0644949337 Organisatie Jong, gezond en sterk groeiende bedrijf dat webbased multimedia oplossingen bouwt in de omgeving Nijmegen. Het bedrijf bouwt voor klanten o.a. geavanceerde websites, webwinkels, webapplicaties en specifieke webbased software. Het bedrijf ontwikkelt en onderhoudt ook verschillende bekende Nederlandse websites. Op dit moment hebben zij een groeiende en brede klantenkring opgebouwd. Met betrekking tot programmeer-, onderhoud-, ontwerp-werkzaamheden wordt een PHP ontwikkelaar gezocht met kennis van contentmanagementsysteemen en frameworks. Locatie Nijmegen Verantwoordelijkheden (Her)Ontwerpen en (her)ontwikkelen in PHP ten behoeve van websites voor klanten, project klussen, onderhoud en specifieke klantwensen (Her)Ontwerpen en (her)ontwikkelen in PHP, PHP

Bekijk vacature »

Medior PHP Developer Energy Services Symfony

Medior PHP Developer Energy Services Symfony Wat ga je doen als Medior PHP Developer? Als Medior PHP Developer uit de omgeving Rotterdam, ga jij werken aan een real-time energievoorziening webportal voor in de agrarische sector. De webportal ontzorgt klanten 24/7 volautomatische aansturing van warmtekrachtkoppeling, warmtepompen en netinkoop. Dit op basis van actuele APX in-en verkoopverplichtingen en onbalansmarktprijzen. Deze webportal levert 5 minuten near-time (bron) meetdata, automatisch ingelezen marktprijzen gas en elektriciteit en doorlopend near-time (op kwartierbasis) geactualiseerde financiële en technische performance rapportages (waaronder rookgasreiniging raakgascondensor monitoring). Hiermee bied jij een "energiedashboard" met alle relevante parameters om optimale economische en technische

Bekijk vacature »

Yoeri Achterbergen

Yoeri Achterbergen

21/10/2015 20:35:46
Quote Anchor link
Beste Leden,

Ben zojuist bezig geweest om jquery beter onder de knie te krijgen.
Nu heb ik een error functie gemaakt maar vroeg me af of ik dit misschien in een korte code kon maken

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function error(){
$("#send").click(function(e){
if(!$("#dataeen").val()){
     $("#dataeen").css("border-bottom-color", "#FF0000");  
    }else{
     $("#dataeen").css("border-bottom-color", "#CCCCCC");  
    }

if(!$("#datatwee").val()){
     $("#datatwee").css("border-bottom-color", "#FF0000");  
    }else{
     $("#datatwee").css("border-bottom-color", "#CCCCCC");  
    }

e.preventDefault();
});
}


als ik nu 10 input velden heb word het een behoorlijk lange code.
Zou ik hier met een each functie kunnen werken zodat jquery het rijtje afgaat?

Gr. Yoeri
 
PHP hulp

PHP hulp

22/02/2019 14:40:23
 
Peter K

Peter K

21/10/2015 21:09:10
Quote Anchor link
Je zou een functie kunnen maken die je de veldnaam en de gewenste kleur meegeeft?

b.v.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function vak_inkleuren(veldnaam, kleurcode)
{
if(!$(veldnaam).val()){
     $(veldnaam).css("border-bottom-color", kleurcode);  
    }else{
     $(veldnaam).css("border-bottom-color", kleurcode);  
    }
}


Deze functie roep je dan x keer aan bijvoorbeeld.
 
Wouter J

Wouter J

21/10/2015 22:04:10
Quote Anchor link
Laat ik eerst beginnen met 2 algemene JavaScript best-practices:
  • Probeer zo min mogelijk styling te doen, laat dat over aan CSS. Gebruik bijv. classes
  • Probeer zo min mogelijk de hele DOM tree door te zoeken


Wanneer we de eerste best-practice toepassen maken we bijvoorbeeld 2 CSS classes aan:
Code (css)
PHP script in nieuw venster Selecteer het PHP script
1
2
.field--error   { border-bottom-color:#ff0000; }
.field--default { border-bottom-color:#cccccc; }


Nu kunnen we deze toevoegen met jQuery:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
if (!$('#dataeen').val()) {
    $('#dataeen').removeClass('field-default').addClass('field-error');
}
else {
    $('#dataeen').removeClass('field-error').addClass('field-default');
}

Dit kunnen we versimpelen door jQuery's toggleClass() functie te gebruiken:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
// class wordt toegevoegd wanneer het 2e argument true is en wordt verwijderd wanneer dit false is
// dit betekend dat border-bottom-color:#cccccc; de default border-bottom kleur van de veldjes moet worden

$('#dataeen').toggleClass('field-error', !$('#dataeen').val());


Nu zie je dat we 2 keer $('#dataeen') hebben. Dit betekend dat JavaScript 2 maal alle elementen van de pagina (DOM tree) moet doorzoeken om een element te vinden. Je kan begrijpen dat dit met een grote pagina best wat tijd kan kosten. Het is dus beter om dit element op te slaan in een variabele en deze dan te gebruiken:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
var dataeenElem = $('#dataeen');

dataeenElem.toggleClass('field-error', !dataeenElem.val());


Nu kunnen we dit nog beter maken, omdat de functie nu alsnog elke keer dat het wordt aangeroepen opzoek moet gaan naar de elementen. Dus kun je beter deze variabele globaal opslaan: (globaal is eigenlijk niet goed, maar dit lokaal maken gaat nu nog een beetje te ver)
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
var dataeenElem = $('#dataeen');
var datatweeElem = $('#datatwee');

$('#send').click(function (e) {
    e.preventDefault();

    dataeenElem.toggleClass('field--error', !dataeenElem.val());
    datatweeElem.toggleClass('field--error', !datatweeElem.val());
});


Nu zie je dat je alsnog 2 regels hebt die nagenoeg hetzelfde zijn. Dit zou je ook weer kunnen abstraheren in een nieuwe functie, maar dat lijkt me een tikkeltje overkill.

Kijk trouwens eens naar het onsubmit event (.submit()). Dat is iets beter dan het click event op een submit button.
Gewijzigd op 21/10/2015 22:04:38 door Wouter J
 
Ivo P

Ivo P

22/10/2015 09:24:44
Quote Anchor link
Het lijkt me gemakkelijker om alle elementen die je wilt controleren dezelfde class te geven.
Daarmee bereik je dat je niet elke id apart hoeft te vermelden:

je maakt een lus die door alle elementen met class="nietleeg" loopt en als zo'n element dan leeg is, geef je daar de opmaak class field-error aan. (oj juist niet aks gevuld)
 
Yoeri Achterbergen

Yoeri Achterbergen

22/10/2015 16:32:40
Quote Anchor link
Dank voor de reactie's.

Dit is wat ik nu heb jsfiddle
Is deze codering beter?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

22/10/2015 16:44:15
Quote Anchor link
Ziet er zeker al gezond uit. Vraag me enkel af waarom je de class Default weghaalt? de class Error toevoegen of weghalen is al voldoende:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
!$(this).val() ? $(this).addClass("error") : $(this).removeClass("error");
Gewijzigd op 22/10/2015 16:44:28 door Frank Nietbelangrijk
 
Ivo P

Ivo P

22/10/2015 16:46:20
Quote Anchor link
ik zou regel 10 zonder ! doen, en dan de 2 gevolgen omdraaien.

Scheelt je een (kleine) handeling voor javascript.

Je script stopt nu sowieso, ook als er wel alle velden ingevuld zijn. Is dat de bedoeling?

ik zou het schrijven als:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
$("#data").on('submit',function() {
  $('.field').each(function(){
    $(this).val() ?  $(this).addClass("default").removeClass("error") : $(this).addClass("error").removeClass("default");
  });
  if($('.error').length > 0) {
     return false;
   }
});  
  
 
Yoeri Achterbergen

Yoeri Achterbergen

22/10/2015 19:43:04
Quote Anchor link
Bedankt voor de reacties!

@ivo

Wat bedoel je precies met:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
if($('.error').length > 0) {
     return false;
   }


Betekend dat als de waarde meer dan 0 is dat hij de code niet weer opnieuw hoeft uit te voeren?
Of betekend "return false iets anders?
 
Ivo P

Ivo P

23/10/2015 09:13:39
Quote Anchor link
Aan het einde van de functie kijk ik of er uiteindelijk elementen aanwezig zijn met de class "error".
Als dat het geval is, zijn er dus elementen die leeg zijn en dus mogen we niet door met het submitten.

vergelijkbaar met preventDefault(). Maar jouw preventDefault gaat volgens mij altijd af.
 



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.