根据快捷码进行不同的函数调用?

时间:2018-12-07 作者:Andy Smith-Dane

因此,我修改了一段代码,其中包括对Google距离矩阵API的调用。

我希望它只计算出到特定地址的距离。但我现在还想在不同的页面上使用它。

我创建了第二个短代码,它在隐藏字段中创建了第二个具有不同邮政编码的表单,但虽然第一个表单工作正常,但第二个表单没有任何作用。

有人能帮忙吗?

删除地址和API密钥的以下代码

<?php
/**
 * Plugin Name: WP Distance Calculator
 * Plugin URI: http://phpcodingschool.blogspot.com/
 * Description: This plugin claculates distance between two near by locations.
 * Version: 1.0.0
 * Author: Monika Yadav
 * Author URI: http://phpcodingschool.blogspot.com/
 * 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.com/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(文档)。就绪(函数(){

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);
    }
});
});
});

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

问题是,如果JavaScript引用的是表单和输入的ID,那么如果两者都在同一页面上,脚本将只使用第一个表单的值运行。

最简单的解决方案是为每个短代码中的元素使用不同的ID,但更好的永久解决方案是让您基于类编写脚本,并使用提交表单中的值,而不是全局ID。

所以改变你的表格,在form 要素:

<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> 
为了清楚起见,我删除了与问题无关的所有内容。我还删除了method="post" 因为POST不适合获取值。我还将result div更改为使用类。

然后将JavaScript更新为目标提交.distance-calculator 窗体,并使用fromto 值仅来自提交的表单。然后仅使用.result 在表单之后。

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);
        }
    } );
} );
我还更改了POSTGET 在这里正如我之前提到的POST 不适用于此类型的请求。POST 应仅用于创建或更新资源,而GET 应用于检索数据。这只意味着您需要更新PHP才能使用$_GET 而不是$_POST.

相关推荐

WP REST API自定义终结点在我的插件中不起作用

我真的很感激在这方面的帮助,因为我已经尝试了很多次了。我从一个名为“ydelse”的自定义帖子类型中创建了这个非常简单的som基本信息端点。下面是我创建自定义rest端点的类class jw_salonbooking_ydelseliste_REST_Controller extends WP_REST_Controller { public function register_routes() { $version = \'1\';