Kleine Vragen Topic #4

@Aarclay $array[0][mat]

Thnx!
toevoeging op vrijdag 12 mei 2017, 00:28:50:
Nog even een vraagje waar ik niet uitkom, met jQuery,

Ik heb deze code om een onderliggende tr-sibling te kunnen aan/uit togglen. In een statische tabel werkt het prima. Maar als ik een tabel via AJAX inlaadt, dan gebeurt er niks met de DOM, die hele click-functie wordt niet uitgevoerd?

$(.opmtoggle).click(function(){
        alert(klik toggle);
        $(this).parents(tr).next().toggle();
        return false;
    });

Aarclay schreef:

Thnx!
toevoeging op vrijdag 12 mei 2017, 00:28:50:
Nog even een vraagje waar ik niet uitkom, met jQuery,

Ik heb deze code om een onderliggende tr-sibling te kunnen aan/uit togglen. In een statische tabel werkt het prima. Maar als ik een tabel via AJAX inlaadt, dan gebeurt er niks met de DOM, die hele click-functie wordt niet uitgevoerd?

$(.opmtoggle).click(function(){
        alert(klik toggle);
        $(this).parents(tr).next().toggle();
        return false;
    });

Je moet na het laden die snippet opnieuw uitvoeren. Dan pas worden de eventhandlers toegewezen aan de tabel.

Om wat meer uitleg te geven op wat Milan zegt:

Op het moment dat je $(.opmtoggle).click(...) aanroept maak je een event handler aan op alle elementen met de class opmtoggle die momenteel in de DOM aanwezig zijn. Op het moment dat er eentje bij komt heeft deze dus geen event handler geregistreerd staan.

De eerste optie is dan om wat Milan zegt te doen: voor elke nieuwe toegevoegde rij een nieuwe event handler registreren, of de door jouw aangeleverde code snippet pas uit te voeren nadat de promise (de ajax call) voltooid is.

Wat je ook kan doen is de handler registreren op de parent element(laten we even uitgaan dat dit #tabel is), en dan doorlinken naar de child element:

$(#table).on("click", ".opmtoggle", function() {
    alert(Toggle!);
}

http://api.jquery.com/on/

Bovenstaande code zal de event handler registreren op je #table element, maar enkel triggeren wanneer er geklikt is op een .opmtoggle element

Inderdaad, klopt. Ik heb hem in de success-handler van $.ajax geplaatst, en nu werkt hij wel goed.

Rik schreef:

Om wat meer uitleg te geven op wat Milan zegt:

Op het moment dat je $(.opmtoggle).click(...) aanroept maak je een event handler aan op alle elementen met de class opmtoggle die momenteel in de DOM aanwezig zijn. Op het moment dat er eentje bij komt heeft deze dus geen event handler geregistreerd staan.

De eerste optie is dan om wat Milan zegt te doen: voor elke nieuwe toegevoegde rij een nieuwe event handler registreren, of de door jouw aangeleverde code snippet pas uit te voeren nadat de promise (de ajax call) voltooid is.

Wat je ook kan doen is de handler registreren op de parent element(laten we even uitgaan dat dit #tabel is), en dan doorlinken naar de child element:

$(#table).on("click", ".opmtoggle", function() {
    alert(Toggle!);
}

http://api.jquery.com/on/

Bovenstaande code zal de event handler registreren op je #table element, maar enkel triggeren wanneer er geklikt is op een .opmtoggle element

Wat ik normaliter doe bij jquery is:

$(document).on("click", ".opmtoggle", function() {
    alert(Toggle!);
}

Dit zorgt ervoor dat ook alle elementen die er later bij komen geregistreerd worden met een click event.

Zo vang ik dat altijd op.

Dat is toch wat ik zeg?
Jij doet het echter voor de gehele DOM (vanwege de document selector). Dat is niet altijd wat je wil.

Wat is in PHP de beste manier om een methode iets te laten returnen?
Ik doe het nu zo:

return array(
                success => false,
                message => Je wachtwoord is te kort.
            );

toevoeging op dinsdag 16 mei 2017, 10:25:58:
Wat is sneller, in PHP7 de count() functie gebruiken of in MySQL de COUNT() functie gebruiken?

De beste manier om iets te returnen is afhankelijk van je applicatie. In dit geval is een object (ValidationResponse) misschien wenselijk, maar een array terug sturen kan ook prima.
Either way zou ik als laatste slag een json_encode erover heen gooien (ik neem namelijk aan dat je het resultaat ergens terug gaat sturen).

In PHP 5.6 en hoger kan je array( ... ); trouwens vervangen door [ ... ]; .

Verder altijd COUNT() in MySQL qua snelheid.

Rik schreef:

De beste manier om iets te returnen is afhankelijk van je applicatie. In dit geval is een object (ValidationResponse) misschien wenselijk, maar een array terug sturen kan ook prima.
Either way zou ik als laatste slag een json_encode erover heen gooien (ik neem namelijk aan dat je het resultaat ergens terug gaat sturen).

In PHP 5.6 en hoger kan je array( ... ); trouwens vervangen door [ ... ]; .

Verder altijd COUNT() in MySQL qua snelheid.

Allright, maar waarom zou ik dat json_encode eroverheen gooien? Ik gebruik nauwelijks AJAX in de applicatie

Stef schreef:

Eerdere citaten tonen

Rik schreef:

De beste manier om iets te returnen is afhankelijk van je applicatie. In dit geval is een object (ValidationResponse) misschien wenselijk, maar een array terug sturen kan ook prima.

Either way zou ik als laatste slag een json_encode erover heen gooien (ik neem namelijk aan dat je het resultaat ergens terug gaat sturen).

In PHP 5.6 en hoger kan je array( ... ); trouwens vervangen door [ ... ]; .

Verder altijd COUNT() in MySQL qua snelheid.

Allright, maar waarom zou ik dat json_encode eroverheen gooien? Ik gebruik nauwelijks AJAX in de applicatie

Gezien het feit dat je een array terug stuurde met een succes variabele en een message variabele dacht ik dat het ging om een ajax call.

Je kan overigens ook werken met exceptions als je wil (even in een soort pseudocode):

[COLOR= #0000BB]<?php[/COLOR]
[URL="http://www.php.net/class"]class[/URL] ValidationException extends Exception [COLOR= #007700]{[/COLOR]
    [COLOR= #FF8000]//[/COLOR]
[COLOR= #007700]}[/COLOR]

[URL="http://www.php.net/class"]class[/URL] PasswordValidator [COLOR= #007700]{
    function[/COLOR] validate[COLOR= #007700]([/COLOR][COLOR= #0000BB]$post[/COLOR][COLOR= #007700]) {[/COLOR]
        [URL="http://www.php.net/if"]if[/URL] [COLOR= #007700](![/COLOR][URL="http://www.php.net/isset"]isset[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$post[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]password[/COLOR][COLOR= #007700]]) ||[/COLOR] [URL="http://www.php.net/strlen"]strlen[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$post[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]password[/COLOR][COLOR= #007700]]) <[/COLOR] [COLOR= #0000BB]6[/COLOR][COLOR= #007700]) {[/COLOR]
            throw [COLOR= #007700]new[/COLOR] ValidationException[COLOR= #007700]([/COLOR][COLOR= #DD0000]Je wachtwoord is te kort[/COLOR][COLOR= #007700]);
        }[/COLOR]

        [URL="http://www.php.net/return"]return[/URL] true[COLOR= #007700];
    }
}[/COLOR]

[URL="http://www.php.net/class"]class[/URL] Controller [COLOR= #007700]{[/COLOR]
    [URL="http://www.php.net/public"]public[/URL] [COLOR= #007700]function[/COLOR] index[COLOR= #007700]() {[/COLOR]
        try [COLOR= #007700]{[/COLOR]
            [URL="http://www.php.net/if"]if[/URL] [COLOR= #007700]([/COLOR]PasswordValidator[COLOR= #007700]::[/COLOR]validate[COLOR= #007700]([/COLOR][COLOR= #0000BB]$_POST[/COLOR][COLOR= #007700])) {[/COLOR]
                [URL="http://www.php.net/return"]return[/URL] [COLOR= #DD0000]Registratie voltooid[/COLOR]
            [COLOR= #007700]}
        }[/COLOR] catch [COLOR= #007700]([/COLOR]ValidationException [COLOR= #0000BB]$e[/COLOR][COLOR= #007700]) {[/COLOR]
            [URL="http://www.php.net/return"]return[/URL] [COLOR= #007700][[/COLOR][COLOR= #DD0000]status[/COLOR] [COLOR= #007700]=>[/COLOR] [COLOR= #DD0000]422[/COLOR][COLOR= #007700],[/COLOR] [COLOR= #DD0000]message[/COLOR] [COLOR= #007700]=>[/COLOR] [COLOR= #0000BB]$e[/COLOR][COLOR= #007700]->[/COLOR]getMessage[COLOR= #007700]()]
        }
    }
}[/COLOR]

Is maar net hoe ver je het wil nemen in je applicatie

Op mijn site heb ik een mooie matrix voor fotos. Echter vraag ik mij af of de CSS-code niet beter zou kunnen? De code is al weer 3 jaar oud, en naar mijn mening best obsolete: Dus ik was benieuwd wat jullie ervan vinden, en of het inmiddels verbeterd kan worden?

#content .photogallery {
        margin-bottom:130px;
        width:800px;
    }
    
        #content .photogallery ul {
            list-style-type:none;
        }

        #content .photogallery ul li {
            display: block;
            float: left;
            text-align: center;
            width: 130px;
            height: 85px;
            padding-top:12px;
        }

            #content .photogallery ul li img {
                max-width:107px;
            }

            #content .photogallery img {
                border: 1px solid #000;
            }

Elk verbeterpunt is welkom .

Ik weet niet welke browsers je wil ondersteunen? Anders is flexbox misschien wel tof:
https://www.taniarascia.com/how-to-build-a-responsive-image-gallery-with-flexbox/

http://caniuse.com/#feat=flexbox

Ik vind de flexbox wel handig maar nog net iets te nieuw om te ondersteunen. Maar verder nog opties?

Ik zat zelf te denken om een clear toe te voegen aan .photogallery:

.photogallery:after {
    content:  ;
    display: block;
    clear: both;
}

Nu gebeurt dat met clear:both op een onderliggend heading-element .

Weet iemand hoe je de polygon rechts onder krijgt?
https://codepen.io/anon/pen/JJbJKr

Dus zo: