CODEWITHSUNDEEP
jqueryajaxplugins
Rolo Tomassi
Rolo Tomassi

Reputation: 61

Re-apply javascript plugin after jquery ajax success

I keep trying different suggestions from similar posts. Unable to re-apply a Javascript function on recipient select after selecting company from company select. HTML:

<div id="recipient-container" class="formRightMM noSearch">
    <select id ="outgoingRecipient" class="chzn-select">
        //options loaded depending on company chosen
    </select>
</div>

On document load, select styling applied by .uniform() from custom.js

$(function() {
    $("select, input:checkbox, input:radio, input:file").uniform();
}

Recipient HTML stylized

<div id="recipient-container" class="formRightMM noSearch">
    <div id="uniform-outgoingRecipient" class="selector">
        <span style="-moz-user-select: none;">Choose a Recipient</span>
    <select id="outgoingRecipient" class="chzn-select required chzn-done" style="display: none; opacity: 0;">
        //after company selected, ajax updates options
        <option value="827">Big Dog</option>
        <option value="828">Bob</option>
    </select>
</div>
<div id="outgoingRecipient_chzn" class="chzn-container chzn-container-single chzn-container-active" style="width: 139px;">
    <a class="chzn-single" href="javascript:void(0)" tabindex="-1">
        <span>Choose a Recipient</span>
    </a>
    <div class="chzn-drop" style="left: -9000px; width: 137px; top: 27px;">
        //but options should be stylized here by .uniform();
        <ul class="chzn-results"></ul>
    </div>

AJAX plus.js file

$(document).ready(function() {
    function get_recipient(){
        return $.ajax({
            type: "POST",
            url: "get_recipient.php",
            data: companyIDDataString,
            dataType: 'html',
            success: function(result){
                $('#outgoingRecipient').html(result);
            }
        //etc...

The <options> get updated when a company is selected, but the style applied by .uniform() doesn't update the <ul> elements. Tried different ways to apply the .uniform() call in the success. Plugin adds new HTML, but I'm not sure what I'm targeting with .uniform(). Tried (#outgoingRecipient).uniform() and some other element ID's, no results. Do I need to apply the plugin to the document as a whole? Anyone give me a hint?

Upvotes: 0

Views: 782

Answers (1)

George
George

Reputation: 6084

Please try to re-run your js script after building the select. Assuming you placed your uniform plugin script in uniform.js:

$(document).ready(function(){
    //your ajax call
    $.getScript("uniform.js");
});

Upvotes: 1

Related Questions