在PHP中使用Jquery Ajax

I have code which is writen in javascript ajax and I like to transfer same code into jquery.

This is my javascript Ajax code.

function cascadeCountry(value) {
   if (document.getElementById("stateprovince_auto") != null) {
    if (value != '') {
        http.open('get', url+'cascade/cascade_sign.php?a=country&v=' + value );
        document.getElementById('stateprovince_auto').innerHTML = "  " + loadingTag;
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
    //alert( value );
   }
}

My php code.

case 'country':
        echo '|||stateprovince_auto|:|' . stateOptions()
            . '|||county_auto|:|' . '<input name="txtcounty" type="text" size="30" maxlength="100" />'
            . '|||city_auto|:|' . '<input name="txtcity" type="text" size="30" maxlength="100" />';
            //. '|||txtzip|:|' . '<input name="txtzip" type="text" size="30" maxlength="100" />';
        break;

function stateOptions() {
    $state = new StateProvince();
    $data = $state->get_stateOptions( trim($_GET['v']), 'Y' );

    if (count($data) < 1) 
        return '<input name="txtstateprovince" type="text" size="30" maxlength="100" />';

      $ret .= ' <select class="select" name="txtstateprovince" onchange="javascript: cascadeState(this.value, this.form.txt_country.value,\'txtcounty\');" >';

    $ret .= '<option value="">'.format_lang('select_text').'</option>';

    foreach ($data as $k => $y) {
        if ($k!='AA') {
            $ret .= "<option value='$k'>$y</option>";
        }
    }
    unset ($data);

    return $ret .= '</select>';
}

My old HTML code.

<tr>
    <td><img src="{$skin_images_path}required.gif" alt="" /></td>
    <td><span class="label">{lang mkey='label' skey='country' }</span></td>
    <td>

    <select name="txt_country" id="txt_country" onchange="javascript: cascadeCountry(this.value,'txtstateprovince');" >
        {html_options options=$country selected=$smarty.session.loc.country}
    </select>
     </td>
</tr>

<tr>
    <td>&nbsp;</td>
    <td><span class="label">{lang mkey='label' skey='state'  }</span></td>
    <td>
        <div id="stateprovince_auto">

        {if $lang.states|@count > 0}
            <select class="select" name="txtstateprovince" onchange="javascript: cascadeState(this.value, this.form.txt_country.value,'txtcounty');" >
            {html_options options=$lang.states selected=$smarty.session.loc.stateprovince}
            </select>
        { else }
            <input class="text_field required" name="txtstateprovince" type="text" size="30" maxlength="100" value="{$smarty.session.loc.stateprovince}" />
       { /if}                
        </div>
      </td>
</tr>

<tr>
    <td>&nbsp;</td>
    <td><span class="label">{lang mkey='label' skey='county'  }</span></td>
    <td>
        <div id="county_auto">

          { if $lang.counties|@count > 0}
            <select class="select" name="txtcounty" onchange="javascript: cascadeCounty(this.value,this.form.txt_country.value, this.form.txtstateprovince.value,'txtcity');" >
            {html_options options=$lang.counties selected=$smarty.session.loc.countycode}
            </select>
          { else }
            <input name="txtcounty" type="text" size="30" maxlength="100" value="{$smarty.session.loc.countycode}" />
          { /if}

        </div>
    </td>
</tr>

<tr>
    <td>&nbsp;</td>
    <td><span class="label">{lang mkey='label' skey='city' }</span></td>
    <td>
        <div id="city_auto">
          { if $lang.cities|@count > 0}
            <select class="select" name="txtcity" >
              {html_options options=$lang.cities selected=$smarty.session.loc.citycode}
            </select>
          { else }
            <input name="txtcity" type="text" size="30" maxlength="100" value="{$smarty.session.loc.citycode}" />
          { /if}

        </div>
    </td>
</tr>

This is my new Jquery Ajax code.

$(document).ready(function()
    {   
          /**country **/
          $("#txt_country").change(function(){
            var country=$(this).val();
            var dataString = 'country='+ country+"&a=s";
            $("#countrystates").html( retrieving );
            $.ajax({
              type: "POST",
              url: url+"/OPJB_cascade/location.php",
              data: dataString,
              cache: false,
              success: function(html){$("#countrystates").html(html);}
            });
          });
 });

My new PHP code.

    if( allow_country_state == 1)
    {
        $countryStates = CountryStates::getStates($country);
        if( $countryStates )
        {
            echo '<select class="selectField" name="txt_states" id="txt_states" style="width:200px;">';
            echo '<option></option>';
            foreach ($countryStates as $r )
            {
                echo '<option value="'.$r->code.'">'.$r->name.'</option>';  
            }
            echo '</select>';
        }
        else
        {
            echo '<input type="text" id="txt_states" name="txt_states" style="width:200px;" class="textField" maxlength="100" />';
        }

        echo '|||county_auto|:|' . '<input name="txt_region" id="txt_region" type="text" size="30" maxlength="100" />&nbsp;&nbsp;';
    }

My new HTML code.

<tr>
      <td> <label class="required_star">*</label> </td>
      <td> <label>{lang mkey='label' skey='country'}</label> </td>
      <td>
        <select name="txt_country" id="txt_country" class="selectField">
          {html_options options=$country selected=$smarty.session.loc.country}
        </select>
      </td>
      <td>&nbsp;</td>
    </tr>

    {if $allow_country_state == 1 }
        <tr>
          <td>&nbsp;</td>
          <td> <label>{lang mkey='label' skey='countryStates'}</label> </td>
          <td>
            <div id="countrystates">
             {if $countryStates|@count > 0}
                <select class="selectField" name="txt_states" id="txt_states">
                  {html_options options=$countryStates selected=$smarty.session.loc.countrystates}
                </select>
             {else}
                <input type="text" id="txt_states" name="txt_states" size="30" class="textField" value="{$smarty.session.loc.countrystates}" maxlength="100" />
             {/if}
            </div>
            </td>
          <td>&nbsp;</td>
        </tr>
    {/if}
    <tr>
      <td>&nbsp;</td>
      <td> <label>{lang mkey='label' skey='region'}</label> </td>
      <td>
        <div id="countryregion">
         {if $CountryCounty|@count > 0}
            <select class="selectField" name="txt_region" id="txt_region">
              {html_options options=$CountryCounty selected=$smarty.session.loc.countryregion}
            </select>
         {else}
            <input type="text" id="txt_region" name="txt_region" size="30" class="textField" value="{$smarty.session.loc.countryregion}" maxlength="100" />
         {/if}
        </div>
        </td>
      <td>&nbsp;</td>
    </tr>

My question is that with old code when i select different country it clears states and county data but with my new code the states gets cleared but not the county.

Can someone please let me know what i'm doing wrong here.

查看全部
weixin_33739523
weixin_33739523
2013/06/01 19:40
  • php
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信

1个回复