Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Selectbox with onchange via ajax #1077

Closed
bernte opened this Issue Mar 11, 2013 · 4 comments

Comments

Projects
None yet
3 participants

bernte commented Mar 11, 2013

I have two selectfields: CATEGORY and SUBCATEGORY -> which will loaded by AJAX

this are my 2 selectfields without jquery chosen:

For example.. I choose category 51 and ajax is loading the subcats (works perfect)

<div class="form-row">
    <label class="form-label">Category</label>
    <div class="form-item">
        <select class="chzn-select" onchange="getSubList(this)" name="category" id="category">
            <option value="49">49</option>
            <option value="50">50</option>
            <option selected="" value="51">51</option>
            <option value="52">52</option>
            <option value="53">53</option>
            <option value="54">54</option>
            <option value="55">55</option>
            <option value="56">56</option>
        </select>
    </div>
</div>
<div class="form-row">
    <label class="form-label">Subcategory</label>
    <div class="form-item">
        <select class="chzn-select" name="subcategory" id="subcategory">
            <option value="1">51 - 1</option>
            <option value="2">51 - 2</option>
            <option value="3">51 - 3</option>
        </select>
    </div>
</div>

when i activate chosen and select a category, the id="subcategory_chzn" won't change (only the "original hidden" is changing)

here is a copy from firebug:

<div class="form-row">
    <label class="form-label">Subcategory</label>
    <div class="form-item">
        <select class="chzn-select large chzn-done" name="subcategory" id="subcategory" style="display: none;">
            <option value=""></option>
            <option value="1">51 - 1</option>
            <option value="2">51 - 2</option>
            <option value="3">51 - 3</option>
        </select>
        <div id="subcategory_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 300px;" title="">
            <a tabindex="-1" class="chzn-single chzn-default" href="javascript:void(0)">
                <span>Select an Option</span>
                <div><b></b></div>
            </a>
            <div style="left: -9000px; width: 298px; top: 24px;" class="chzn-drop">
                <div class="chzn-search">
                    <input type="text" autocomplete="off" style="width: 263px;">
                </div>
                <ul class="chzn-results"></ul>
            </div>
        </div>
    </div>
</div>

my script looks like this

<script type="text/javascript">
    $(".chzn-select").chosen();
    $("#category").trigger("liszt:updated");
    $("#subcategory").trigger("liszt:updated");
</script>

don't know if its important.. here is my ajax code

function getSubList(sel)
{
    var spannungencode = sel.options[sel.selectedIndex].value;
    document.getElementById('subcategory').options.length = 0;  // Empty city select box
    if(spannungencode.length>0){
        var index = ajax.length;
        ajax[index] = new sack();

        ajax[index].requestFile = '_ajax_get_sub.php?spannungencode='+spannungencode;   // Specifying which file to get
        ajax[index].onCompletion = function(){ createSub(index) };  // Specify function that will be executed after file has been found
        ajax[index].runAJAX();      // Execute AJAX function
    }
}

function createSub(index)
{
    var obj = document.getElementById('subcategory');
    eval(ajax[index].response); // Executing the response from Ajax as Javascript code  
}

i'm don't understand jquery this good and wan't to ask if some could give me a hint?

Collaborator

stof commented Mar 11, 2013

.trigger("liszt:updated") should be done where you are updating the the selectbox. It is useless to do it right after initializing chosen. It should be done in your ajax callback.

bernte commented Mar 11, 2013

hi stof..

thanks for your response! do i have to add .trigger("liszt:updated") into the function getSubList(sel) ??
or what do you mean with ajax callback?

Collaborator

stof commented Mar 11, 2013

No, your callback is not getSubList but ajax[index].onCompletion. getSubList is the code triggering the ajax call, not the callback when it is done.

bernte commented Mar 11, 2013

how can i add the .trigger("liszt:updated") to ajax[index].onCompletion ? sorry i don't get this :(
would be happy if you can help

@pfiller pfiller closed this Apr 16, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment