jQueryUI slider variablelen

[BP_LOZ]

Ik heb een probleempje met de waarden uitlezen van een slider, gegenereerd met jQuery.
Binnen de pagina heb ik o.a. checkboxes, selects en deze slider om de zoekresultaten op de pagina aan te passen / verfijnen. Deze waarden worden middels jQuery doorgegeven aan een php pagina waarop vervolgens de querys worden gedraaid.

De waarden van de slider stop ik in de variabele price_slider. De slider zelf werkt, maar zodra ik de checkboxes of select ga gebruiken is de waarde van price_slider leeg?

Ik wil graag dat bij het inladen van de pagina deze variabele gezet word met de waarden van de slider en dat ik deze variabele ook mee kan geven bij het wijzigen van de checkboxes en selects.

Graag jullie meningen / advies. Bij voorbaat dank!

code:

// Priceslider
function initSlider(){
    $("#Filter_Min").val("\u20ac" + $("#slider_range").slider("values", 0));
    $("#Filter_Max").val("\u20ac" + $("#slider_range").slider("values", 1));
}

$("#slider_range").slider({
    orientation: "horizontal",
    range: true,
    step: 10, 
    min: 0,
    max: 1000,
    values: [0, 1000],
    change: function(event, ui) { 
        initSlider();
        //var price_slider             = ui.values[0] + "-" +ui.values[1];
        var price_slider               = $("#slider_range").slider("values", 0) + "-" + $("#slider_range").slider("values", 1);
        var product_categories_q       = $('#product_categories_q').val();
        var product_categories_filter  = $("select option:selected").val();
        $('.loading').show();
        $.ajax({
            type:"POST",
            url: "product_categories_results.php",
            cache:false,
            data: "product_categories_q=" + product_categories_q + "&product_categories_filter=" + product_categories_filter + "&product_brand_filter=" + brands + "&product_description_filter=" + descriptions + "&product_price_filter=" + price_slider,
            success: function(data){
                $('#subcategoriesRightWrapperContent').html(data);
                $('.loading').hide();
            }
        });    
        alert(price_slider);
    },
    slide: function(event, ui) {
        initSlider();
    }
});

initSlider();

[PdeBie]

price_slider lijkt me een lokale variabele die alleen bestaat in het change event van je slider control.
op het moment dat je op de checkbox klikt bestaat die variabele niet.

Waar sla je de waarde van price_slider in op? hiddenfield of iets dergelijks?

[BP_LOZ]

In de HTML staan de de waarden 0 en 1000 vast. Deze heb ik nodig om alle relevante resultaten op te halen.
html

code:

<div id="slider_range"></div>
<input class="left" type="text" id="Filter_Min" value="0" />
<input class="right righttext" type="text" id="Filter_Max" value="1000" />

Vervolgens wil ik middels javascript/jQuery de waarden van Filter_Min en Filter_Max aanpassen op het moment dat de slider gebruikt wordt.

Zodra het sliden voltooid is, worden de waarden van Filter_Min en Filter_Max in de variabele price_slider gestopt welke meegegeven wordt naar de php pagina.

Bij dit laatste gaat het fout. Deze blijft 0-1000 om een of andere reden.

js

code:

function initSlider(){
        $("#Filter_Min").val($("#slider_range").slider("values", 0));
        $("#Filter_Max").val($("#slider_range").slider("values", 1));
        
        var price_slider = ($("#Filter_Min").val() + "-" + $("#Filter_Max").val());
        //$("#subcategoriesRightWrapperContent").html(price_slider);
    }
    

    function sendData(){
        $('.loading').show();
        $.ajax({
            type:"POST",
            url: "php/product_categories_results.php",
            cache:false,
            data: 
                "product_categories_main_q="     + product_categories_main_q + 
                "&product_categories_q="        + product_categories_q + 
                "&product_categories_filter="    + product_categories_filter + 
                "&product_brand_filter="         + brands + 
                "&product_description_filter="   + descriptions +
                "&product_price_filter="         + price_slider,
            success: function(data){
                $('#subcategoriesRightWrapperContent').html(data);
                $('.loading').hide();
            }
        });
        return(false);
    }
    
    // Priceslider
    $("#slider_range").slider({
        orientation: "horizontal",
        range: true,
        step: 10, 
        min: 0,
        max: 1000,
        values: [0, 1000],
        change: function(event, ui) { 
            initSlider();
            sendData();
        },
        slide: function(event, ui) {
            initSlider();
        }
    });
    var price_slider = ($("#Filter_Min").val() + "-" + $("#Filter_Max").val());
    initSlider();
    
    var product_categories_main_q    = "<?php echo $_GET['product_categories_main'];?>";
    var product_categories_q           = $('#product_categories_q').val();
    var product_categories_filter     = $("select option:selected").val();
    var brands                      = [];
    var descriptions                  = [];
    
    // Default results
    $(document).ready(function(){sendData();});
                            
    // Order by results
    $("select").change(function(){sendData();});
    
    
    // Brand filter checkboxes
    $('.filterbrand input[type="checkbox"]').change(function() {
        if($(this).is(':checked')) {if(this.checked){brands.push($(this).attr("value"));}}
        else{brands.splice(brands.indexOf($(this).attr("value")), 1);}
        sendData();
    });
    
    
    // Description filter checkboxes
    $('.filterdescriptions input[type="checkbox"]').change(function() {
        if($(this).is(':checked')) {if(this.checked){descriptions.push($(this).attr("value"));}}
        else{descriptions.splice(descriptions.indexOf($(this).attr("value")), 1);}
        sendData();
    });

[PdeBie]

BP_LOZ schreef op woensdag 15 augustus 2012 @ 20:44:

JavaScript:

function initSlider(){
        $("#Filter_Min").val($("#slider_range").slider("values", 0));
        $("#Filter_Max").val($("#slider_range").slider("values", 1));
        
        var price_slider = ($("#Filter_Min").val() + "-" + $("#Filter_Max").val());
        //$("#subcategoriesRightWrapperContent").html(price_slider);
    }
    
    var price_slider = ($("#Filter_Min").val() + "-" + $("#Filter_Max").val());
    

je declareert halverwege (regel 47 van jouw code) een variabele price_slider.
In de functie initSlider() declareer je een nieuwe variabele price_slider. Hier doe je vervolgens niets mee. De waarde van de 'regel 47' price_slider blijft dus hetzelfde als voor de initSlider() aanroep.

Volgens mij zou het moeten werken als je de tekst 'var' voor price_slider in de functie 'initSlider()' weghaalt (zie onderstaand).
Maar controleer het even uiteraard.

JavaScript:

function initSlider(){
        $("#Filter_Min").val($("#slider_range").slider("values", 0));
        $("#Filter_Max").val($("#slider_range").slider("values", 1));
        
        price_slider = ($("#Filter_Min").val() + "-" + $("#Filter_Max").val());
        //$("#subcategoriesRightWrapperContent").html(price_slider);
    }   

[BP_LOZ]

Het hoeft niet moeilijk te zijn
Dat was 'm inderdaad! Bedankt!

[alex3305]

Niet om lullig te doen, maar vooral als tip(s). Probeer ook je code wat georganiseerder en netter te houden. Zet bijvoorbeeld alle var's bovenaan de pagina. Waaronder je alle anonieme functies (jQuery) zet en daaronder je gewone functies. Zo kun je gemakkelijker browsen door je code en zul je zelf ook prettiger werken.

Ook is return in Javascript (en in veel programmeertalen) geen functie en is het dus gewoon:

JavaScript:

function foo() {
    return false;
}

Als laatste zou ik nog kunnen opmerken dat je gewoonweg de defaults al laad in PHP (dus zonder tussenkomst van JS) en dan heb je de $(document).ready(); voor zover ik kan zien niet meer nodig . Scheelt weer één aanroep .

[PdeBie]

alex3305 schreef op donderdag 16 augustus 2012 @ 14:07:
Niet om lullig te doen, maar vooral als tip(s). Probeer ook je code wat georganiseerder en netter te houden.

Agree. Ik vond het ook vrij lastig lezen je code.