Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Ajax State Selector problem


tagin

Recommended Posts

  • 3 months later...
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

Link to comment
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?

Link to comment
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

Link to comment
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.

Link to comment
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.

Link to comment
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

Link to comment
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.

:)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...