CODEWITHSUNDEEP
javascriptphpjqueryhtml
GrumpyCrouton
GrumpyCrouton

Reputation: 8621

Unexpected results form jquery

I have an ajax call under a function called refreshClick that is meant to fill a div with a select box that is generated by php.

Javascript:

           function refreshClick() {
                $.ajax({
                    url: "modules/elements/customersList.php",
                    success: function(data){
                        $('#refreshdiv').html(data);
                    }
                });
            }

HTML:

<div id="refreshdiv">test</div>

PHP:

while($row = $result->fetch_assoc()){
    $returnString .= '<option value="'.$row['customerid'].'" data-tokens="'.$row['Phone'].$row['customerid'].$row['Email'].$row['ID'].$row['alt1Name'].$row['alt1Info'].$row['alt2Name'].$row['alt2Info'].'">'.$row['Name'].'</option>';
}
echo '<select data-live-search="true" class="selectpicker form-control" data-selected-text-format="count > 1" style="width:100%" name="customer">';
echo $returnString;
echo '</select>';

So as you can see this code is pretty simple. I cannot for the life of my figure out whats going wrong. I have a button just above the refreshdiv div that calls the refreshClick() function, but when I click it the word test disappears. It LOOKS like it just clears out the div, but if I Inspect Element, I can see that the div was filled the way it was suppose to be, with the correct data aswell, but nothing is visable. Could someone help me figure out where I am going wrong?

Side note: The reason I want to use it this way is so I can call this function any time to refresh the contents of the select box, so that way if whoever is using the software updates the customer list they can refresh the select box without refreshing the page. If there is an easier way to do this, please enlighten me.

--Test data screenshot This is console.log(typeof data) and console.log(data) enter image description here

--Inspect element screenshot (Ignore the hideous refresh button, it's temporary.) I would also like to include, in the page before I click the refresh button the word "Test" shows in the refreshdiv div. It DOES show. enter image description here

Upvotes: 2

Views: 56

Answers (1)

Luan Nico
Luan Nico

Reputation: 5917

Oh, you are using bootstrap. That's the problem. Bootstrap needs to init every select. It does on startup, but every time it changes you need to run:

$(select).selectpicker('refresh');

To re-init the new ones.

Upvotes: 5

Related Questions