javascript - the event of onchange at select control at php, trigger issue

182

I used this select which show counteries

<section >
  <p  id="calc_shipping_country_field">
    <label >Shipping options to</label>
    <select onchange="myFunctionShipping(this)" name="calc_shipping_country" id="calc_shipping_country" rel="ss-woo-shipping-calculator">
      <option value="1"><?php _e( 'Select a country&hellip;', 'woocommerce' ); ?></option>
      <?php
        foreach ( WC()->countries->get_shipping_countries() as $key => $value )
          echo '<option value="' . esc_attr( $key ) . '"' . selected( WC()->customer->get_shipping_country(), esc_attr( $key ), false ) . '>' . esc_html( $value ) . '</option>';
      ?>
    </select>
  </p>
  <span id="ss-woo-shipping-calculator-loading" ><img src='<?php echo plugins_url( '/default.gif', __FILE__ ) ?>' /></span>
  </p>

  <?php wp_nonce_field( 'woocommerce-cart' ); ?>
      <div id="ss-woo-shipping-result">

      </div>
</section>

then by javascript code to retrieve the shipping options for it

<script type="text/javascript">
var $s = jQuery.noConflict();
function myFunctionShipping(item) {
$s(document).ready(function($) {
$("select").change(function(){
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    var country = item.value;
    $("#ss-woo-shipping-calculator-loading").show();
    var data = {'action': 'ss_woo_shipping_calculator','country': country};
    $.post("<?php echo get_home_url(); ?>", data, function(response) {
        $("#ss-woo-shipping-calculator-loading").hide();
        response = JSON.parse(response);
        if(response.result == 1){
            $("#ss-woo-shipping-result").html(response.message);


        }else{
            $("#ss-woo-shipping-result").html("");
        }

        return false;
    });
return false;});       
});
}

the problem that:- it trigger if also any other select control changed also it is only trigger after changing the selection twice (after page loading)

128

Answer

Solution:

It "says" that action apply to any select $("select").change(). You can change to limit action only to select with chosen id like

$("#calc_shipping_country").change(function()

or you can choose to use select class name.

EDIT.

My mistake, I didnt figure out that the action is called by function and not select action. Try to remove completely the $("select").change(function() wrap and make look something like this

<script type="text/javascript">
var $s = jQuery.noConflict();
function myFunctionShipping(item) {
$s(document).ready(function($) {
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    var country = item.value;
    $("#ss-woo-shipping-calculator-loading").show();
    var data = {'action': 'ss_woo_shipping_calculator','country': country};
    $.post("<?php echo get_home_url(); ?>", data, function(response) {
        $("#ss-woo-shipping-calculator-loading").hide();
        response = JSON.parse(response);
        if(response.result == 1){
            $("#ss-woo-shipping-result").html(response.message);


        }else{
            $("#ss-woo-shipping-result").html("");
        }

        return false;
    });
return false;     
});
}
</script>

People are also looking for solutions to the problem: php - Create route without path [Symfony3]

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.