WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Displaying list of cities according to the selected state. Using the WordPress h (5 posts)

  1. Joseneas
    Member
    Posted 1 year ago #

    Hello,

    I come to ask the community a help of a simple hook on WordPress. I'm trying to display a list of states and cities in two dropdows to select a single option in the a form. The list of cities will be displayed according to the selected state.

    But the dropdown of list city is returning the source code of site. I do not know why this is happening, so I ask the help.

    Here the code added in the Functions of theme:

    <script type="text/javascript" src="http://prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
    
            <select name="state" id="state" onchange="loadCity(this)">
    
            <option>-- Select the State --</option>
    
                    <?php
    
    global $wpdb;
    
    //get the list of states
    $list_of_state = ("SELECT DISTINCT meta_value FROM $wpdb->usermeta WHERE meta_key = 'state_acf_subscriber' ORDER BY meta_value ASC");
    
    $option_of_state = mysql_query($list_of_state);
    
    $total_of_state = mysql_num_rows($option_of_state);
    
                    for($i = 0; $i < $total_of_state; $i++){
    
                            $state = mysql_fetch_array($option_of_state);
    
                                if($city[meta_value] != ''){
    
                                         echo "<option value=\"". $state['meta_value']."\">".$state['meta_value']."</option>";
                                 }
                    }?>
    
            </select>
    
    <script type="text/javascript">
    function loadCity(meta_value){
    
    	if(meta_value){
    		var myAjax = new Ajax.Updater('listCity','listcity.ajax.php',
    		{
    			method : 'get',
    		});
    	}
    }
    </script>
    
    <div id="listCity"><label for="City">City: </label>
    
          	<select name="city" id="listOfCity">
          		<option value="">Select the City</option>
        	</select>
    </div>

    Here the another file:

    <?php
    
    global $wpdb;
    
    $state_selected = $_GET['meta_value']; //get the state selected on the dropdown of states 
    
    //below, get the list of city according the user's id what's are associated with state selected
    $list_of_city = "SELECT meta_value FROM $wpdb->usermeta WHERE meta_key = 'bairro_acf_aluno'
                     AND user_id IN (SELECT DISTINCT user_id FROM $wpdb->usermeta WHERE meta_key = 'city_acf_subscriber' AND meta_value = '".$state_selected."') ORDER BY meta_value";
    
    $option_of_city = mysql_query($list_of_city);
    
    $total_of_city = mysql_num_rows($option_of_city);
    
    for($j = 0; $j < $total_of_city; $j++){
    
    	$city = mysql_fetch_array($option_of_city);
    
    	echo "<option value=\"". $city['meta_value']."\">" . $city['meta_value'] ."</option>";
    
    }

    The list of states is correct, the dropdown appears showing all states added by subscribers. I just can not view the list of cities

    Each user (subscriber) will select your state and city on your profile, and what I need is to be able to select the state and city to filter a list of users on the frontend.

    I appreciate any help.

  2. bcworkz
    Member
    Posted 1 year ago #

    I'm not familiar with your framework, but it appears you are just passing the wrong element ID.

    var myAjax = new Ajax.Updater('listOfCity','listcity.ajax.php',

    You are passing the div ID listCity, so the select and label tags are replaced with an orphaned option list. You should pass the select ID listOfCity so only the option list itself is replaced.

  3. Joseneas
    Member
    Posted 1 year ago #

    Hi bcworkz,

    Thanks for the tip. A simple detail. Thank you!

    There was another error, the return of the option selected was not being done. Where is: <select name="state" id="state" onchange="loadCity(this)">

    It's: <select name="state" id="state" onchange="loadCity(this.value)">

    Now the list is being populated, but still a big problem. On a the options select, is being returned the site source code.

    <select name="city" id="listOfCity">
    <option value="">Select the City</option>
    <option value="City 1">City 1</option>
    <option value="City 2">City 2</option>
    <option value="City 3">City 3</option>
    <html>
    <head>
    <meta>
    ....
    </ select>

    Something very strange.

    I'm having a compatibility problem between prototype.js and jquery. For example: the menus that use jquery do not work.

    Have you any idea what it is?

    Thanks for the tip.

  4. bcworkz
    Member
    Posted 1 year ago #

    Nothing like another set of eyes to see silly errors :)
    Good catch on the value parameter, I'm sure I'd have never seen that one.

    As for prototype/jquery conflicts, I wouldn't even know where to begin sorting that out, sorry :( I hope finding the solution will not be too painful, good luck.

  5. Joseneas
    Member
    Posted 1 year ago #

    OK.

    Thank you bcworkz! :)

Topic Closed

This topic has been closed to new replies.

About this Topic