Style missing for Jquery Chosen Plugin Post AJAX Request

Check out the Jquery Chosen Plugin page and demos. It's a really useful tool.

I'm currently facing an issue with a 2 stage input form for collecting location information. The first select menu is for countries. When a country is selected, the 2nd input field should only display options related to that country. Pretty neat!

You can see a live demo of my issue here:

Although the ajax call is working fine, the styling gets lost once the 2nd field data is returned. =(

As per the plugin guidelines,

The select menu must be placed within a specific HTML structure

    <select data-placeholder="Select City" class="chzn-select" style="width:350px;" tabindex="2" name="city">
<? while($row=mysql_fetch_array($result)) { ?>
<option class="active-result option"
style="padding: 5px 0px 5px 0px; font-family:arial; font-size:12px;"

><?=$row['city']?></option>
<? } ?>
</select>

This code technically should work but it's not. Any suggestions on how to maintain the styling after the ajax call?

Here is the PHP page that is being returned

<!--//---------------------------------+
//  Developed by Roshan Bhattarai    |
//  http://roshanbh.com.np           |
//  Contact for custom scripts       |
//  or implementation help.          |
//  <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8e868a8287c6858e9b8a8782898492dbdbdcab928a838484c5888486">[email protected]</a>     |
//---------------------------------+-->
<?
#### Roshan's Ajax dropdown code with php
#### Copyright reserved to Roshan Bhattarai - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcd2d9ccddd0d5ded3c58c8c8bfcc5ddd4d3d392dfd3d1">[email protected]</a>
#### if you have any problem contact me at http://roshanbh.com.np
#### fell free to visit my blog http://php-ajax-guru.blogspot.com
?>

<? $country = $_GET['country'];
$link  = mysql_connect("SNIP");
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('SNIP');
$query="SELECT city FROM location WHERE country='$country' ORDER BY `city` ASC";
$result=mysql_query($query);

?>
<div class="x">
<br>
<select data-placeholder="Select City" class="chzn-select" style="width:350px;" tabindex="2" name="city">
<? while($row=mysql_fetch_array($result)) { ?>
<option class="active-result option"><?=$row['city']?></option>
<? } ?>
</select>
</div>
javascriptjquerycssajax

Answer №1

Have you attempted to invoke the liszt:updated event when reloading the second list? According to the documentation

Updating Chosen Dynamically If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.

Edit: in response to the comment about where to put it, I think you'll need to adjust the getCity function in the head of the document to be something like:

function getCity(country) {
    var strURL="findCity.php?country="+ country;
    var req = getXMLHTTP();
    if (req) {
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('citydiv').innerHTML=req.responseText;                      
                    $("#citydiv select").trigger("liszt:updated");
                    ///rest of function

This should theoretically trigger the event in the correct position after replacing the contents of the city div

Answer №2

I found success by adjusting the style of the chosen-container

.chosen-container input {
width: 100% !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Traversing an array of objects using D3.js

I'm attempting to create a row of bars that are all the same height and width based on their titles. I have an array of 100 objects, each with a key called results containing another array of 20 objects. This means I should end up with a row of 2000 b ...

javascriptarraysjsonobjectd3.js

Is your JavaScript Array failing to index correctly?

var graphdata = [["A", "B", "C", "D"], [0.5, 0.25, 0.5, 0.25]]; function randomData (){ var labels = graphdata[0] var labels2 = graphdata[1]; console.log(); return labels.map(function(labels, labels2){ console.log(labels2); ...

javascriptarraysdictionary

Reloading the page with Angular material's mat-menu feature

Recently, I incorporated a basic mat-menu example into my project. Strangely, whenever I click on the Menu button, it triggers a page reload. Below is the code snippet for reference. <button mat-button [matMenuTriggerFor]="menu">Menu</button> ...

javascripthtmlangularangular-material

Transform the email into an encrypted format, as the attached email is not functioning properly

I am currently attempting to dynamically change an email's href attribute to a crypted email using jQuery. However, upon utilizing the prop function in jQuery for this purpose, I have encountered an issue where the link becomes unclickable. The final ...

javascriptjqueryhtml

The Vue v-for directive encountered an unrecognized property during rendering

Trying to grasp the concept of v-for in Vue JS, especially since I am a newcomer to this framework. Since I am utilizing Django, custom delimiters are necessary. I have a script example that appends a list of objects to a data property: var app = new Vue( ...

javascriptvue.jsvuejs2

In an HTML setup, would you consider using a two-column layout with the #navigation located on the right side, but

On my website, I have a 2 column layout and I want the navigation section to appear below the main content for SEO purposes in HTML. However, I encountered an issue - on certain pages, I need to hide the navigation section which results in the content not ...

htmlcss

What steps can be taken to address the error message "unable to execute 'down' method on undefined"?

My goal is to create a pop-up option box for the user when they click "Buy Now" for an optional product (e.g. choosing a color). However, upon loading this JavaScript code, I encountered the following error: Uncaught TypeError: Cannot call method 'do ...

javascriptjqueryajaxmagento

Position a div at the current mouse coordinates using Jquery

I am looking to constantly have a div follow my mouse cursor in order to display tool-tips. Below is the code snippet I'm using, but it's throwing an error: "Cannot read property 'pageX' of undefined" My question is why is pageX comin ...

javascriptjquerypositiontooltipmouse

Displaying MySQL Data from a Database Based on Date Selection in PHP Utilizing Ajax

Do you need help developing an application with three tabs built using JavaScript? These tabs are named "Mapview," "ListView," and "Post Events." The ListView tab requires retrieving data from a MySQL table. The functionality involves allowing users to se ...

phpmysqlajax

Is there a way to use HTML, JavaScript, and CSS to manipulate an object's opacity when a button is clicked?

I am looking to add a button on my website landing page that can hide the weather section, but I am unsure how to go about it! https://i.sstatic.net/COA82.jpg Currently, I am using a "selector" where I can choose either 0 or 1 from the bottom right corner ...

javascripthtmlcssbuttonopacity

Adjust Font Size to Fit Window

Trying to figure out the perfect font size for my webpage. Currently, I've set it at -webkit-xxx-large because it looks great in my window. What I really want is for the text to always fit within the width of the window, regardless of how big or smal ...

javascriptjqueryhtmlcss

The art of spacing words in a div using spans

Having difficulty with word spacing within a div using spans. Take a look at the following HTML code: <div class="footer-links"> <span><a href="#">Suggestions</a></span> <span>&l ...

javascripthtmlcss

Guide to continuously polling a GET request in JavaScript until the response status is successful

In my JavaScript code, I have a function that utilizes AJAX to send a GET request. The response from the request can be either success, fail, or in process if the job is still running. I want this function to continuously send the GET request every few s ...

javascriptjqueryajax

Ensure that you provide two arguments when calling the $.ajax success function

I'm facing a little issue. I'm trying to send two variables from PHP to the $.ajax success function Here's my JS code: $.ajax({ type:"POST", url:path, data: "value="+info, success:function(data, data1) { if(dat ...

phpjqueryajax

What steps do I need to take to develop a feature similar to Tabzilla?

Exploring the innovative navigation bar on Mozilla.org seems intriguing; commonly referred to as tabzilla, it smoothly moves down to reveal the menu at the top of the page. I wonder if there are any existing libraries or ready-made jQuery code snippets tha ...

jquerycssmozilla

Navigating Through Radio Questions with a Back Button Using Javascript

Having trouble looping through an array of objects with 'back' and 'next' buttons? It seems that the loop is not functioning correctly. The aim is for the 'back' button to decrement based on the number of times the 'next& ...

javascriptarraysloops

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably d ...

htmlcssresponsive-designmedia-queries

Showing data from a MySql database using an HTML table

I am currently working on a pop-up form that captures user data and stores it in a MySQL phpmyadmin table. My goal is to have this data displayed in an HTML table once the popup form is closed. After submitting the form, I am redirected back to the homepag ...

javascriptphpjqueryhtmlmysql

Setting autoComplete=true does not impact the Autocomplete feature of MUI

<Autocomplete disablePortal autoComplete={true} // set to true id="combo-box-demo" options={top100Films} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Movie" /> ...

javascriptreactjsautocompletematerial-ui