[jQuery] Run jQuery code vanuit zelf aangeroepen functie

[Clock]

Good evening,

Dit moet erg straightforward zijn, maar ik zit er al 2 uur mee te puzzelen en het wordt nu frustrerend.

Onderstaande code werkt perfect: bij het openen van de pagina hoest hij de juiste waardes op

JavaScript:

$(document).ready(function(){
    $("td.ContainsRole").each(function() {
        $this = $(this)
        var value = $this.find("span.role").html();
        var columnID = $(this).parent().children().index($(this))+1;
          
        alert(value);
    });
}

Echter wil ik die waardes niet bij het openen van de pagina, ik wil ze gebruiken in een functie die wordt aangeroepen door de jQuery UI MultiSelect EventHandler. Dan ziet het er zo uit:

JavaScript:

$(document).ready(function(){
    $("#Role").multiselect({
        click: function(event, ui){
            ApplyRoleFilter(ui.value, ui.checked);
        }
    });
}

function ApplyRoleFilter(selectedRole, checkStatus) {
    alert(selectedRole);
        
    $("td.ContainsRole").each(function() {
        $this = $(this)
        var value = $this.find("span.role").html();
        var columnID = $(this).parent().children().index($(this))+1;
          
        alert(value);
    });
}

De ApplyRoleFilter functie wordt succesvol aangeroepen met de juiste waarde, echter wordt de jQuery loop niet uitgevoerd. Ik heb al 101 varianten geprobeert, maar ik kom er niet uit.

Hoe kan ik dit voor elkaar krijgen? Thanks

[TERW_DAN]

Is this in beide gevallen wel hetzelfde? Ik kan me voorstellen dat in 't tweede geval je een andere scope hebt dan in het eerste geval, waardoor $this ineens iets heel anders kan zijn.

[Tribits]

Even afgezien van het feit dat er op regel 7 van het tweede blok een ); ontbreekt werkt het hier gewoon. Ik zie dus zowel de eerste als de tweede alert. Wellicht nog zinvol te melden welke versie JQuery, JqueryUI en Multiselect je gebruikt en welke browser en versie om te testen?

[Qzar]

Moet de functie niet binnen het DOM ready event worden geplaatst omdat er wel specifiek jQuery in wordt gebruikt?

[Clock]

TERW_DAN schreef op zondag 27 juli 2014 @ 00:33:
Is this in beide gevallen wel hetzelfde? Ik kan me voorstellen dat in 't tweede geval je een andere scope hebt dan in het eerste geval, waardoor $this ineens iets heel anders kan zijn.

$this wordt in dit geval geset door de jQuery EACH callback functie, die zou dus overal hetzelfde moeten zijn lijkt me.

Qzar schreef op zondag 27 juli 2014 @ 10:08:
Moet de functie niet binnen het DOM ready event worden geplaatst omdat er wel specifiek jQuery in wordt gebruikt?

Ik heb de functie zowel binnen als buiten het DOM-ready event gezet, dit maakte geen verschil. Volgens de docs kan jQuery code ook prima buiten het DOM-ready event, zolang je dan zelf maar zorg draagt voor het voorkomen van race conditions (te vroege code exec). Doordat mijn code hier getriggered wordt door een user handling binnen de DOM zou dit goed moeten zitten.

Tribits schreef op zondag 27 juli 2014 @ 02:21:
Even afgezien van het feit dat er op regel 7 van het tweede blok een ); ontbreekt werkt het hier gewoon. Ik zie dus zowel de eerste als de tweede alert. Wellicht nog zinvol te melden welke versie JQuery, JqueryUI en Multiselect je gebruikt en welke browser en versie om te testen?

De missende sluitende ); bestond alleen op GoT door slordige copy paste. Ik heb de code laag voor laag afgepeld en opnieuw opgebouwd in combinatie met de bestaande code op de pagina. Heb het nu werkend, al moet ik eerlijk zeggen dat ik het verschil nog niet zie

Werkende code:

JavaScript:

$(document).ready(function(){
    // [...] 
    
    //Activate role selector
    $("#Role").multiselect({
       selectedText: "# of # roles selected",
       header: "Select one or more roles",
       noneSelectedText: "Select roles",
       minWidth: 180
    });
    
    //Eventhandler for role selector
    $("#Role").multiselect({
        click: function(event, ui){
            ApplyRoleFilter(ui.value, ui.checked);
        }
    });
    
    // [...] 
});

//show/hides columns based on input from the Role Selector
function ApplyRoleFilter(selectedRole, checkStatus) {
    $("td.ContainsRole").each(function() {
        $this = $(this)
        var role = $this.find("span.role").html();
        var columnID = $(this).parent().children().index($(this))+1;
        
        if(checkStatus) {
            if(role == selectedRole) {
                $('#CapMatrix').showColumns(columnID); 
            }
        } else {
            if(role == selectedRole) {
                $('#CapMatrix').hideColumns(columnID); 
            }
        }  
    });
}

Dank voor jullie hulp! Op een gegeven moment krijg je een tunnelvisie, door een post op GoT moet je (1) zelf de situatie ophelderen en (2) kijkt iemand met een outside view even kritisch mee. Helpt altijd!

[ Voor 3% gewijzigd door Clock op 27-07-2014 10:39 ]