Jump to content
Sign in to follow this  
tagin

Ajax State Selector problem

Recommended Posts

I have the same issue, wondering if it is server environment, I am using xampp

 

well, I am not an ajax expert but you should at least see something happen even if the ajax call fails, it is basically js triggered.

 

as I have it today (moved the js code to a js include):

 

in create_account.php and others:

 

<td align="left"><?php echo tep_get_country_list('country', '', 'onchange="loadXMLDoc(this.value,\'state_dropdown.php\',\''. tep_session_id().'\',\'states\',\' <img style=vertical-align:middle src=images/working.gif> Please wait...\');" class="inputBox" style="width:150px" ') .' '. tep_image_submit('ico_arrow.gif', 'Refresh States'); ?></td>

 

for the country dropdown box.

This has as parameters the country id, the php code to execute via ajax, the session id, the div id for where the states box html is located and the html to replace that during the call.

I parameterized this js so it can be used for many other ajax calls as well, I use the same function for the shipping quotes in the shopping cart for instance.

 

the only thing left is the wrapping of the states dropdown in the div like:

 

echo '<div id="states">';

echo tep_draw_pull_down_menu('state', $zones_array,'', ' class="inputBox" style="width:150px" ');

echo '</div>';

 

 

and the associated js which is now located in a js include file:

 

var req;

function loadXMLDoc(key,file,sid,loc,tmp) {

var url=file+"?osCsid="+sid+"&country="+key;

getObject(loc).innerHTML = tmp;

try { req = new ActiveXObject("Msxml2.XMLHTTP"); }

catch(e) {

try { req = new ActiveXObject("Microsoft.XMLHTTP"); }

catch(oc) { req = null; }

}

if (!req && typeof XMLHttpRequest != "undefined") { req = new XMLHttpRequest(); }

if (req != null) {

req.onreadystatechange=function(){if(req.readyState!=4)return;if(req.status==200){getObject(loc).innerHTML = req.responseText}};

req.open("GET", url, true);

req.send(null);

}

}

 

function getObject(name) {

var ns4 = (document.layers) ? true : false;

var w3c = (document.getElementById) ? true : false;

var ie4 = (document.all) ? true : false;

 

if (ns4) return eval('document.' + name);

if (w3c) return document.getElementById(name);

if (ie4) return eval('document.all.' + name);

return false;

}

 

 

give it a try.


Treasurer MFC

Share this post


Link to post
Share on other sites
well, I am not an ajax expert but you should at least see something happen even if the ajax call fails, it is basically js triggered.

 

as I have it today (moved the js code to a js include):

 

in create_account.php and others:

 

<td align="left"><?php echo tep_get_country_list('country', '', 'onchange="loadXMLDoc(this.value,\'state_dropdown.php\',\''. tep_session_id().'\',\'states\',\' <img style=vertical-align:middle src=images/working.gif> Please wait...\');" class="inputBox" style="width:150px" ') .' '. tep_image_submit('ico_arrow.gif', 'Refresh States'); ?></td>

 

for the country dropdown box.

This has as parameters the country id, the php code to execute via ajax, the session id, the div id for where the states box html is located and the html to replace that during the call.

I parameterized this js so it can be used for many other ajax calls as well, I use the same function for the shipping quotes in the shopping cart for instance.

 

the only thing left is the wrapping of the states dropdown in the div like:

 

echo '<div id="states">';

echo tep_draw_pull_down_menu('state', $zones_array,'', ' class="inputBox" style="width:150px" ');

echo '</div>';

and the associated js which is now located in a js include file:

 

var req;

function loadXMLDoc(key,file,sid,loc,tmp) {

var url=file+"?osCsid="+sid+"&country="+key;

getObject(loc).innerHTML = tmp;

try { req = new ActiveXObject("Msxml2.XMLHTTP"); }

catch(e) {

try { req = new ActiveXObject("Microsoft.XMLHTTP"); }

catch(oc) { req = null; }

}

if (!req && typeof XMLHttpRequest != "undefined") { req = new XMLHttpRequest(); }

if (req != null) {

req.onreadystatechange=function(){if(req.readyState!=4)return;if(req.status==200){getObject(loc).innerHTML = req.responseText}};

req.open("GET", url, true);

req.send(null);

}

}

 

function getObject(name) {

var ns4 = (document.layers) ? true : false;

var w3c = (document.getElementById) ? true : false;

var ie4 = (document.all) ? true : false;

 

if (ns4) return eval('document.' + name);

if (w3c) return document.getElementById(name);

if (ie4) return eval('document.all.' + name);

return false;

}

give it a try.

 

Thanks for sharing Amanda,

The above works but you either have to rename the gif to working.gif , or the code above to loading.gif.

 

Is there any way for the drop down box to display the right zones if you have preselected a default country at all?

Share this post


Link to post
Share on other sites
Thanks for sharing Amanda,

The above works but you either have to rename the gif to working.gif , or the code above to loading.gif.

 

Is there any way for the drop down box to display the right zones if you have preselected a default country at all?

 

yes, you would use your own images I guess.

 

yes, if you have preselected the country id then the states box should display the states from that country.

 

yours is not?


Treasurer MFC

Share this post


Link to post
Share on other sites
yes, you would use your own images I guess.

 

yes, if you have preselected the country id then the states box should display the states from that country.

 

yours is not?

 

Unfortunaltey no, my states box isnt displaying the states from that country, only if it is changed.

It currently displays all of the states from all countries... which is a few.

Its not a major problem I guess, its just bugging me.

Share this post


Link to post
Share on other sites
yes, you would use your own images I guess.

 

yes, if you have preselected the country id then the states box should display the states from that country.

 

yours is not?

 

Unfortunaltey no, my states box isnt displaying the states from that country, only if it is changed.

It currently displays all of the states from all countries... which is a few.

Its not a major problem I guess, its just bugging me.

Share this post


Link to post
Share on other sites
Unfortunaltey no, my states box isnt displaying the states from that country, only if it is changed.

It currently displays all of the states from all countries... which is a few.

Its not a major problem I guess, its just bugging me.

 

 

well, this is what I have in create account for country and states:

 

note: the tep_get_country_by_language(getenv('HTTP_ACCEPT_LANGUAGE'), true); is to determine the and preselect the country based on the browser language, only if the country is not set yet. I never use a state input box but always show a dropdown.

 

<tr height="30px">

<?php

if ($country == ''){

$country = tep_get_country_by_language(getenv('HTTP_ACCEPT_LANGUAGE'), true);

if ($country == ''){

$country = DEFAULT_COUNTRY;

}

}

?>

<td align="right"><?php echo ENTRY_COUNTRY; ?></td>

<td align="left"><?php echo tep_get_country_list('country', '', 'onchange="loadXMLDoc(this.value,\'state_dropdown.php\',\''. tep_session_id().'\',\'states\',\' <img style=vertical-align:middle src=images/working.gif> Please wait...\');" class="inputBox" style="width:150px" ') .' '. tep_image_submit('ico_arrow.gif', 'Refresh States'); ?></td>

<td align="right"> <?php echo ENTRY_STATE; ?></td>

<td align="left">

<?php

$zones_array = array();

$zones_query = tep_db_query("select zone_name from " . TABLE_ZONES . " where zone_country_id = '" . (int)$country . "' order by zone_name");

while ($zones_values = tep_db_fetch_array($zones_query)) {

$zones_array[] = array('id' => $zones_values['zone_name'], 'text' => $zones_values['zone_name']);

}

 

echo '<div id="states">';

echo tep_draw_pull_down_menu('state', $zones_array,'', ' class="inputBox" style="width:150px" ');

echo '</div>';

?>

</td>

</tr>


Treasurer MFC

Share this post


Link to post
Share on other sites
well, this is what I have in create account for country and states:

 

note: the tep_get_country_by_language(getenv('HTTP_ACCEPT_LANGUAGE'), true); is to determine the and preselect the country based on the browser language, only if the country is not set yet. I never use a state input box but always show a dropdown.

 

<tr height="30px">

<?php

if ($country == ''){

$country = tep_get_country_by_language(getenv('HTTP_ACCEPT_LANGUAGE'), true);

if ($country == ''){

$country = DEFAULT_COUNTRY;

}

}

?>

<td align="right"><?php echo ENTRY_COUNTRY; ?></td>

<td align="left"><?php echo tep_get_country_list('country', '', 'onchange="loadXMLDoc(this.value,\'state_dropdown.php\',\''. tep_session_id().'\',\'states\',\' <img style=vertical-align:middle src=images/working.gif> Please wait...\');" class="inputBox" style="width:150px" ') .' '. tep_image_submit('ico_arrow.gif', 'Refresh States'); ?></td>

<td align="right"> <?php echo ENTRY_STATE; ?></td>

<td align="left">

<?php

$zones_array = array();

$zones_query = tep_db_query("select zone_name from " . TABLE_ZONES . " where zone_country_id = '" . (int)$country . "' order by zone_name");

while ($zones_values = tep_db_fetch_array($zones_query)) {

$zones_array[] = array('id' => $zones_values['zone_name'], 'text' => $zones_values['zone_name']);

}

 

echo '<div id="states">';

echo tep_draw_pull_down_menu('state', $zones_array,'', ' class="inputBox" style="width:150px" ');

echo '</div>';

?>

</td>

</tr>

 

Thanks for trying to help, other than your custom code for the country preselection my code is the same.

Not to worry, I have another service that auctomatically fills in the address based on a postcode search and sanitizes the data nicely so I can live with this.

:)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×