Prop not working correctly on change event

Question

I have some code that when a user selects an item from the dropdown, this triggers a change event which then calls a php page for processing. When the page first loads, I select an item and when the change event is triggered, this should change the placeholder of a chosen select input and disable the same input: '#box_ffrtv'.

However, what is happening is that the changes only take place after I make a second selection the in the dropdown, this then changes the placeholder and disables the input. I am still quite new to jquery and would appreciate some help as to where I am going wrong. Many thanks.

jQuery 1.7.2:

jQuery chosen: http://harvesthq.github.io/chosen/

jquery code

$(function() {
        $("#frtv_dept").change(function() {
            $(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>');
            $.get('loadFrtvsubcat.php?frtv_dept=' + $(this).val(), function(data) {
                $("#box_frtv").html(data);
                $('#loader').slideUp(200, function() {
                $(this).remove();
                $("#box_frtv").trigger("chosen:updated");
            });

        });
    });
});

php code

if (mysql_num_rows($result) > 0) {

    echo "<script type=text/javascript>\n";
    echo "$(function() {\n";
    echo "$(\".noRtvBoxes\").html('')\n";
    echo "$('#box_frtv').attr('data-placeholder', \"Choose your boxes...\")\n";
    echo "$(\"#box_frtv\").prop('disabled', false)\n";
    echo "});\n";
    echo "</script>\n";

    while($row = mysql_fetch_array($result)) {
    echo "<option value='$row[boxref]'>$row[boxref]</option>";
    }    

    } else {


    echo "<script type=text/javascript>\n";
    echo "$(function() {\n";
    echo "$('.noRtvBoxes').html('ERROR: There are no boxes in that dept. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n";
    echo "$('#box_frtv').attr('data-placeholder', \"No boxes to display...\").prop('disabled', true)\n";
    echo "$('#box_ffrtv_chosen').find('option:selected').remove()\n";
    echo "$('#box_ffrtv').html('')\n";
    echo "$('#box_ffrtv').trigger(\"chosen:updated\")\n";
    echo "$('#box_ffrtv').attr('data-placeholder', \"No files to display...\")\n";
    echo "$('#box_ffrtv').prop('disabled',true)\n";
    echo "$('.noRtvFiles').html('ERROR: There are no files in that box. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n";
    echo "</script>\n";

    }

html code

<select data-placeholder="Choose your file(s)..." class="chosen-select" name="box_ffrtv[]" id="box_ffrtv" multiple required="required">
   <option value=""></option>
 </select>

Please comment on what you have tried to fix this problem. Do you get any console errors? Why is your JS being echoed? — DevlshOne, Sep 29 '14 at 11:53
I have tried various combinations to correct this and this is the latest attempt. No errors. firebug showing correct data. — user1532468, Sep 29 '14 at 14:00

score 1 · Accepted Answer · edited May 23 '17 at 12:27

If you want to update the dropdown field, you should use the code:

$('#box_ffrtv').on('chosen:ready', function(evt, params){
    // If the Chosen dropdown is loaded properly
    // Do whatever you want

    // Refresh the state of the Chosen dropdown
    $('#box_ffrtv').trigger("chosen:updated");
});

Maybe the problem occurs because the Chosen dropdown field isn't loaded yet. The code above solves this issue.

Also check your jQuery version: if you're using a jQuery version lower than 1.6, you can't use prop. Check this: Disable/enable an input with jQuery?

Also you have an error in your JS code: $(function(){ should be closed properly using });.

I have no idea how you're not having any errors in your console. In my opinion, you should stop using echo to write your JS code. You can use ?> ... write your HTML code <?php. Your code will be cleaner and you'll get rid of all the escaping characters you added.

EDIT:

I fixed your code. You had an issue with <script type="text/javascript">. You should write the type's value between quotes.

<?php if(mysql_num_rows($result) > 0){ ?>
    <script type="text/javascript">
        $(function(){
            $('#box_ffrtv').on('chosen:ready', function(evt, params){
                $(".noRtvBoxes").html("");
                $("#box_frtv").attr("data-placeholder", "Choose your boxes...");
                $("#box_frtv").prop("disabled", false);
            });
        });
    </script>
<?php
    while($row = mysql_fetch_array($result)){
        echo '<option value="' . $row[boxref] . '">' . $row[boxref] . '</option>';
    }  
} else {
?>
    <script type="text/javascript">
        $(function(){
            $('#box_ffrtv').on('chosen:ready', function(evt, params){
                $(".noRtvBoxes").html("ERROR: There are no boxes in that dept. Please select another.").css({"color":"red", "margin": "-6px 0 10px 22px", "font-size": "12px", "font-family": "Verdana, Geneva, sans-serif"});
                $("#box_frtv").attr("data-placeholder", "No boxes to display...").prop('disabled', true);
                $("#box_ffrtv_chosen").find("option:selected").remove();
                $("#box_ffrtv").html("");
                $("#box_ffrtv").trigger("chosen:updated");
                $("#box_ffrtv").attr("data-placeholder", "No files to display...");
                $("#box_ffrtv").prop("disabled",true);
                $(".noRtvFiles").html("ERROR: There are no files in that box. Please select another.").css({"color":"red", "margin": "-6px 0 10px 22px", "font-size": "12px", "font-family": "Verdana, Geneva, sans-serif"});
            });
        });
    </script>
<?php } ?>

Thanks Wissam. Where exactly do I place your code suggestion? — user1532468, Sep 29 '14 at 17:12
Also, I wasn't clear about what you mean with this comment: ?> ... write your HTML code — user1532468, Sep 29 '14 at 17:13
I edited the code more than once because I integrated the code I gave you. I don't have your HTML code to understand exactly what this code should do, but anything related to the dropdown should be wrapped inside the following code: `$('#box_ffrtv').on('chosen:ready', function(evt, params){ ...... });` — Wissam El-Kik, Sep 29 '14 at 21:36

Prop not working correctly on change event

1 Answers1