plugins - Different function call depending on shortcode?

admin管理员组

文章数量:1130349

So I've modified a piece of code that includes a call to the Google Distance Matrix API.

I wanted it to only work out the distance to a specific address. But I now also want to use it on a different page than originally intended.

I've created a second shortcode, which creates a second form with a different postcode in the hidden field, but while the first form works fine, the second one doesn't do anything.

Can anyone help?

Code below with addresses and API keys removed

<?php
/**
 * Plugin Name: WP Distance Calculator
 * Plugin URI: /
 * Description: This plugin claculates distance between two near by locations.
 * Version: 1.0.0
 * Author: Monika Yadav
 * Author URI: /
 * License: GPL2
 */

class DistanceWPCalculator
{
    public function __construct()
    {       //action definations
            add_shortcode( 'distance_calculator',  array( &$this, 'distanceWPfrontend' ) ); 
            add_shortcode( 'distance_calculator_LC',  array( &$this, 'distanceWPfrontendLC' ) ); 
            add_action( 'wp_ajax_nopriv_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );
            add_action( 'wp_ajax_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );


            add_action( 'init', array( &$this, 'init' ) );

    }

    public function init()
    {
        wp_enqueue_script( 'distancewpcalculator', plugin_dir_url( __FILE__ ) . 'js/calculatedistance.js', array( 'jquery' ) );
        wp_localize_script( 'distancewpcalculator', 'DistanceCalculator', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        ) );
        ?>
        <script>
        var ajaxurl =  "<?php echo admin_url('admin-ajax.php'); ?>";
        </script>
        <?php
        wp_enqueue_style( 'DistanceWPCalculator-Style', plugin_dir_url( __FILE__ ) . 'css/style.css', array(), '0.1', 'screen' );
    }



    public function distancewpcalculator_calculate()
    {   
        // The $_POST contains all the data sent via ajax
        if ( isset($_POST) ) {

        $from = urlencode($_POST['from']);
        $to = urlencode($_POST['to']);
        $data = file_get_contents(";origins=$from&destinations=$to&key=");
        $data = json_decode($data);
        $time = 0;
        $distance = 0;
            foreach($data->rows[0]->elements as $road) {
                $time += $road->duration->value;
                $distance += $road->distance->value;
            }
            $time =$time/60;
            $distance =round($distance/1000);
            //Output
            if($distance!=0){

            echo "<div id='result_generated'>";
            echo "From: ".$data->origin_addresses[0];
            echo "<br/>";
            echo "To:".$data->destination_addresses[0];
            echo "<br/>";
            echo "Time: ".gmdate("H:i", ($time * 60))." hour(s)";
            echo "<br/>";
            echo "Distance: ".$distance." miles";
            echo "</div>";         
            }else{
            echo "Sorry only nearby distance can be calculated."; 
            }                
           }

    die();

    }


    //Function to display form on front-end
    public function distanceWPfrontend( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode 1">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="Calculate" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }

    public function distanceWPfrontendLC( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode2">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="CalculateLC" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }


    }

    $distancewpcalculator = new DistanceWPCalculator();

?>

JS

jQuery( document ).ready(function() {

jQuery("#calculate").click( function(){ 
    // This does the ajax request
     var from = jQuery('#from').val();
     var to = jQuery('#to').val();

jQuery.ajax({

    url : ajaxurl,
    type : 'POST',
    data: {
        'action':'distancewpcalculator',
        'from' : from,
        'to' : to            
    },
    success:function(data) {
        // This outputs the result of the ajax request
        jQuery('#result').html(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});
});

});

So I've modified a piece of code that includes a call to the Google Distance Matrix API.

I wanted it to only work out the distance to a specific address. But I now also want to use it on a different page than originally intended.

I've created a second shortcode, which creates a second form with a different postcode in the hidden field, but while the first form works fine, the second one doesn't do anything.

Can anyone help?

Code below with addresses and API keys removed

<?php
/**
 * Plugin Name: WP Distance Calculator
 * Plugin URI: http://phpcodingschool.blogspot/
 * Description: This plugin claculates distance between two near by locations.
 * Version: 1.0.0
 * Author: Monika Yadav
 * Author URI: http://phpcodingschool.blogspot/
 * License: GPL2
 */

class DistanceWPCalculator
{
    public function __construct()
    {       //action definations
            add_shortcode( 'distance_calculator',  array( &$this, 'distanceWPfrontend' ) ); 
            add_shortcode( 'distance_calculator_LC',  array( &$this, 'distanceWPfrontendLC' ) ); 
            add_action( 'wp_ajax_nopriv_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );
            add_action( 'wp_ajax_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );


            add_action( 'init', array( &$this, 'init' ) );

    }

    public function init()
    {
        wp_enqueue_script( 'distancewpcalculator', plugin_dir_url( __FILE__ ) . 'js/calculatedistance.js', array( 'jquery' ) );
        wp_localize_script( 'distancewpcalculator', 'DistanceCalculator', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        ) );
        ?>
        <script>
        var ajaxurl =  "<?php echo admin_url('admin-ajax.php'); ?>";
        </script>
        <?php
        wp_enqueue_style( 'DistanceWPCalculator-Style', plugin_dir_url( __FILE__ ) . 'css/style.css', array(), '0.1', 'screen' );
    }



    public function distancewpcalculator_calculate()
    {   
        // The $_POST contains all the data sent via ajax
        if ( isset($_POST) ) {

        $from = urlencode($_POST['from']);
        $to = urlencode($_POST['to']);
        $data = file_get_contents("https://maps.googleapis/maps/api/distancematrix/json?units=imperial&origins=$from&destinations=$to&key=");
        $data = json_decode($data);
        $time = 0;
        $distance = 0;
            foreach($data->rows[0]->elements as $road) {
                $time += $road->duration->value;
                $distance += $road->distance->value;
            }
            $time =$time/60;
            $distance =round($distance/1000);
            //Output
            if($distance!=0){

            echo "<div id='result_generated'>";
            echo "From: ".$data->origin_addresses[0];
            echo "<br/>";
            echo "To:".$data->destination_addresses[0];
            echo "<br/>";
            echo "Time: ".gmdate("H:i", ($time * 60))." hour(s)";
            echo "<br/>";
            echo "Distance: ".$distance." miles";
            echo "</div>";         
            }else{
            echo "Sorry only nearby distance can be calculated."; 
            }                
           }

    die();

    }


    //Function to display form on front-end
    public function distanceWPfrontend( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode 1">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="Calculate" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }

    public function distanceWPfrontendLC( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode2">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="CalculateLC" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }


    }

    $distancewpcalculator = new DistanceWPCalculator();

?>

JS

jQuery( document ).ready(function() {

jQuery("#calculate").click( function(){ 
    // This does the ajax request
     var from = jQuery('#from').val();
     var to = jQuery('#to').val();

jQuery.ajax({

    url : ajaxurl,
    type : 'POST',
    data: {
        'action':'distancewpcalculator',
        'from' : from,
        'to' : to            
    },
    success:function(data) {
        // This outputs the result of the ajax request
        jQuery('#result').html(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});
});

});

• plugins
• api
• google

Share Improve this question edited Dec 7, 2018 at 11:11 Andy Smith-Dane asked Dec 7, 2018 at 10:53 Andy Smith-DaneAndy Smith-Dane 322 bronze badges 6

• Your results are returned based on an AJAX request by your JavaScript, so you'd need to check your JavaScript for issues. – Jacob Peattie Commented Dec 7, 2018 at 10:57
• @JacobPeattie it works fine in the short code Distance_Calculator though, but the Distance_calculator_LC short code doesn't do anything, the only difference being the hardcoded "to" Even if I leave it the same, the second one doesn't work. So I must have done something wrong in my declartion of the second shortcode or the form? – Andy Smith-Dane Commented Dec 7, 2018 at 11:02
• The behaviour of submitting the form in the shortcode is entirely handled by your JavaScript. So no, it is not the shortcode that has to be the problem. Please at least include it in the question. – Jacob Peattie Commented Dec 7, 2018 at 11:06
• @JacobPeattie got you, added the JS in the original Question, thanks. – Andy Smith-Dane Commented Dec 7, 2018 at 11:11
• Are both these shortcodes being used on the same page? – Jacob Peattie Commented Dec 7, 2018 at 11:13

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

The problem is that if your JavaScript is referring to the IDs of the forms and inputs, so if you have both on the same page the script will only run with the values of the first form.

The simplest solution would be to use different IDs for the elements in each shortcode, but a better permanent solution would be to make you script work based on a class, and use the values from the submitted form, rather than global IDs.

So change your form to just have a class on the form element:

<form class="distance-calculator">
    <input type="hidden" name="to" value="Postcode2">
    <input type="text" name="from">
    <input type="submit" value="Calculate">
</form>
<div class="result"></div> 

I've removed everything not relevant to the question for clarity. I also removed method="post" since POST is not appropriate for getting a value. I also changed the result div to use a class.

Then update your JavaScript to target submission of the .distance-calculator form, and use the from and to value only from the submitted form. Then use only the .result after the form.

jQuery( '.distance-calculator' ).on( 'submit', function( event ) {
    event.preventDefault();

    var form = this;

    var from = form.from.value;
    var to   = form.to.value;

    jQuery.ajax( {
        url : ajaxurl,
        type : 'GET',
        data: {
            'action' : 'distancewpcalculator',
            'from' : from,
            'to' : to
        },
        success: function( data ) {
            jQuery.next( '.result' ).html( data );
        },
        error: function( errorThrown ) {
            console.log(errorThrown);
        }
    } );
} );

I also changed the POST to GET here. As I mentioned before POST is not appropriate for this type of request. POST should only be used for creating or updating a resource, while GET should be used for retrieving data. It just means you'll need to update your PHP to use $_GET instead of $_POST.

So I've modified a piece of code that includes a call to the Google Distance Matrix API.

I wanted it to only work out the distance to a specific address. But I now also want to use it on a different page than originally intended.

I've created a second shortcode, which creates a second form with a different postcode in the hidden field, but while the first form works fine, the second one doesn't do anything.

Can anyone help?

Code below with addresses and API keys removed

<?php
/**
 * Plugin Name: WP Distance Calculator
 * Plugin URI: /
 * Description: This plugin claculates distance between two near by locations.
 * Version: 1.0.0
 * Author: Monika Yadav
 * Author URI: /
 * License: GPL2
 */

class DistanceWPCalculator
{
    public function __construct()
    {       //action definations
            add_shortcode( 'distance_calculator',  array( &$this, 'distanceWPfrontend' ) ); 
            add_shortcode( 'distance_calculator_LC',  array( &$this, 'distanceWPfrontendLC' ) ); 
            add_action( 'wp_ajax_nopriv_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );
            add_action( 'wp_ajax_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );


            add_action( 'init', array( &$this, 'init' ) );

    }

    public function init()
    {
        wp_enqueue_script( 'distancewpcalculator', plugin_dir_url( __FILE__ ) . 'js/calculatedistance.js', array( 'jquery' ) );
        wp_localize_script( 'distancewpcalculator', 'DistanceCalculator', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        ) );
        ?>
        <script>
        var ajaxurl =  "<?php echo admin_url('admin-ajax.php'); ?>";
        </script>
        <?php
        wp_enqueue_style( 'DistanceWPCalculator-Style', plugin_dir_url( __FILE__ ) . 'css/style.css', array(), '0.1', 'screen' );
    }



    public function distancewpcalculator_calculate()
    {   
        // The $_POST contains all the data sent via ajax
        if ( isset($_POST) ) {

        $from = urlencode($_POST['from']);
        $to = urlencode($_POST['to']);
        $data = file_get_contents(";origins=$from&destinations=$to&key=");
        $data = json_decode($data);
        $time = 0;
        $distance = 0;
            foreach($data->rows[0]->elements as $road) {
                $time += $road->duration->value;
                $distance += $road->distance->value;
            }
            $time =$time/60;
            $distance =round($distance/1000);
            //Output
            if($distance!=0){

            echo "<div id='result_generated'>";
            echo "From: ".$data->origin_addresses[0];
            echo "<br/>";
            echo "To:".$data->destination_addresses[0];
            echo "<br/>";
            echo "Time: ".gmdate("H:i", ($time * 60))." hour(s)";
            echo "<br/>";
            echo "Distance: ".$distance." miles";
            echo "</div>";         
            }else{
            echo "Sorry only nearby distance can be calculated."; 
            }                
           }

    die();

    }


    //Function to display form on front-end
    public function distanceWPfrontend( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode 1">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="Calculate" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }

    public function distanceWPfrontendLC( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode2">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="CalculateLC" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }


    }

    $distancewpcalculator = new DistanceWPCalculator();

?>

JS

jQuery( document ).ready(function() {

jQuery("#calculate").click( function(){ 
    // This does the ajax request
     var from = jQuery('#from').val();
     var to = jQuery('#to').val();

jQuery.ajax({

    url : ajaxurl,
    type : 'POST',
    data: {
        'action':'distancewpcalculator',
        'from' : from,
        'to' : to            
    },
    success:function(data) {
        // This outputs the result of the ajax request
        jQuery('#result').html(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});
});

});

So I've modified a piece of code that includes a call to the Google Distance Matrix API.

I wanted it to only work out the distance to a specific address. But I now also want to use it on a different page than originally intended.

I've created a second shortcode, which creates a second form with a different postcode in the hidden field, but while the first form works fine, the second one doesn't do anything.

Can anyone help?

Code below with addresses and API keys removed

<?php
/**
 * Plugin Name: WP Distance Calculator
 * Plugin URI: http://phpcodingschool.blogspot/
 * Description: This plugin claculates distance between two near by locations.
 * Version: 1.0.0
 * Author: Monika Yadav
 * Author URI: http://phpcodingschool.blogspot/
 * License: GPL2
 */

class DistanceWPCalculator
{
    public function __construct()
    {       //action definations
            add_shortcode( 'distance_calculator',  array( &$this, 'distanceWPfrontend' ) ); 
            add_shortcode( 'distance_calculator_LC',  array( &$this, 'distanceWPfrontendLC' ) ); 
            add_action( 'wp_ajax_nopriv_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );
            add_action( 'wp_ajax_distancewpcalculator', array( &$this, 'distancewpcalculator_calculate' ) );


            add_action( 'init', array( &$this, 'init' ) );

    }

    public function init()
    {
        wp_enqueue_script( 'distancewpcalculator', plugin_dir_url( __FILE__ ) . 'js/calculatedistance.js', array( 'jquery' ) );
        wp_localize_script( 'distancewpcalculator', 'DistanceCalculator', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        ) );
        ?>
        <script>
        var ajaxurl =  "<?php echo admin_url('admin-ajax.php'); ?>";
        </script>
        <?php
        wp_enqueue_style( 'DistanceWPCalculator-Style', plugin_dir_url( __FILE__ ) . 'css/style.css', array(), '0.1', 'screen' );
    }



    public function distancewpcalculator_calculate()
    {   
        // The $_POST contains all the data sent via ajax
        if ( isset($_POST) ) {

        $from = urlencode($_POST['from']);
        $to = urlencode($_POST['to']);
        $data = file_get_contents("https://maps.googleapis/maps/api/distancematrix/json?units=imperial&origins=$from&destinations=$to&key=");
        $data = json_decode($data);
        $time = 0;
        $distance = 0;
            foreach($data->rows[0]->elements as $road) {
                $time += $road->duration->value;
                $distance += $road->distance->value;
            }
            $time =$time/60;
            $distance =round($distance/1000);
            //Output
            if($distance!=0){

            echo "<div id='result_generated'>";
            echo "From: ".$data->origin_addresses[0];
            echo "<br/>";
            echo "To:".$data->destination_addresses[0];
            echo "<br/>";
            echo "Time: ".gmdate("H:i", ($time * 60))." hour(s)";
            echo "<br/>";
            echo "Distance: ".$distance." miles";
            echo "</div>";         
            }else{
            echo "Sorry only nearby distance can be calculated."; 
            }                
           }

    die();

    }


    //Function to display form on front-end
    public function distanceWPfrontend( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode 1">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="Calculate" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }

    public function distanceWPfrontendLC( $atts ) {

    ?>  
        <form method = "post" id="calculator" >
            <div class="DC_title">Distance Calculator</div>
            <input type="hidden" id="to" name="to" value="Postcode2">
            <input type="text" id="from" name="from" placeholder="From.."></br>
            <input type="button" id="calculate" name="calculate" value="CalculateLC" class="wpcf7-form-control wpcf7-submit btn btn-accent btn-lg">
        </form></br>
        <div id="result"></div> 
        <?php
    }


    }

    $distancewpcalculator = new DistanceWPCalculator();

?>

JS

jQuery( document ).ready(function() {

jQuery("#calculate").click( function(){ 
    // This does the ajax request
     var from = jQuery('#from').val();
     var to = jQuery('#to').val();

jQuery.ajax({

    url : ajaxurl,
    type : 'POST',
    data: {
        'action':'distancewpcalculator',
        'from' : from,
        'to' : to            
    },
    success:function(data) {
        // This outputs the result of the ajax request
        jQuery('#result').html(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});
});

});

• plugins
• api
• google

Share Improve this question edited Dec 7, 2018 at 11:11 Andy Smith-Dane asked Dec 7, 2018 at 10:53 Andy Smith-DaneAndy Smith-Dane 322 bronze badges 6

• Your results are returned based on an AJAX request by your JavaScript, so you'd need to check your JavaScript for issues. – Jacob Peattie Commented Dec 7, 2018 at 10:57
• @JacobPeattie it works fine in the short code Distance_Calculator though, but the Distance_calculator_LC short code doesn't do anything, the only difference being the hardcoded "to" Even if I leave it the same, the second one doesn't work. So I must have done something wrong in my declartion of the second shortcode or the form? – Andy Smith-Dane Commented Dec 7, 2018 at 11:02
• The behaviour of submitting the form in the shortcode is entirely handled by your JavaScript. So no, it is not the shortcode that has to be the problem. Please at least include it in the question. – Jacob Peattie Commented Dec 7, 2018 at 11:06
• @JacobPeattie got you, added the JS in the original Question, thanks. – Andy Smith-Dane Commented Dec 7, 2018 at 11:11
• Are both these shortcodes being used on the same page? – Jacob Peattie Commented Dec 7, 2018 at 11:13

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

The problem is that if your JavaScript is referring to the IDs of the forms and inputs, so if you have both on the same page the script will only run with the values of the first form.

The simplest solution would be to use different IDs for the elements in each shortcode, but a better permanent solution would be to make you script work based on a class, and use the values from the submitted form, rather than global IDs.

So change your form to just have a class on the form element:

<form class="distance-calculator">
    <input type="hidden" name="to" value="Postcode2">
    <input type="text" name="from">
    <input type="submit" value="Calculate">
</form>
<div class="result"></div> 

I've removed everything not relevant to the question for clarity. I also removed method="post" since POST is not appropriate for getting a value. I also changed the result div to use a class.

Then update your JavaScript to target submission of the .distance-calculator form, and use the from and to value only from the submitted form. Then use only the .result after the form.

jQuery( '.distance-calculator' ).on( 'submit', function( event ) {
    event.preventDefault();

    var form = this;

    var from = form.from.value;
    var to   = form.to.value;

    jQuery.ajax( {
        url : ajaxurl,
        type : 'GET',
        data: {
            'action' : 'distancewpcalculator',
            'from' : from,
            'to' : to
        },
        success: function( data ) {
            jQuery.next( '.result' ).html( data );
        },
        error: function( errorThrown ) {
            console.log(errorThrown);
        }
    } );
} );

I also changed the POST to GET here. As I mentioned before POST is not appropriate for this type of request. POST should only be used for creating or updating a resource, while GET should be used for retrieving data. It just means you'll need to update your PHP to use $_GET instead of $_POST.

本文标签： pluginsDifferent function call depending on shortcode