CODEWITHSUNDEEP
phpjavascriptajax
user1509201
user1509201

Reputation: 99

Using Jquery Ajax with PHP

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.

Upvotes: 1

Views: 288

Answers (1)

MaVRoSCy
MaVRoSCy

Reputation: 17839

yes, only the states get cleared because you tell it to do so in the following line:

$("#countrystates").html(html);

Upvotes: 1

Related Questions