WordPress 小部件 : Passing $this->get_field_name() to javascript

Question

我尝试过以下两种方法之一:

1. 在我的 Widget 类(扩展了 WP_Widget)的 form 方法中，我有以下代码片段，它设置了全局 JavaScript 变量:

   if( $instance ) :
   ?>
       <script type="text/javascript">
           window.widget_order_name = "<?php echo $this->get_field_name( 'order' ) ?>";
       </script>
   <?php
   endif;
   

2. 在小部件管理标记中，我还尝试创建以下 html 结构:

   <div
     field_name='<?php echo $this->get_field_name( 'order' ) ?>'
     id='order_field_name'
     class='hidden'>
   </div>
   

在我的小部件管理 javascript 文件中，我以两种方式之一获取此 field_name 的值(如下所示)，然后将该小部件名称附加到隐藏输入字段的名称(其中包含我要存储的值) .

1. 第一种方式，使用window.widget_order_name:

   var widget_field_name = window.widget_order_name;
   

2. 第二种方式，使用jQuery获取field_name:

   var widget_field_name = $( '#order_field_name' ).attr( 'field_name' );
   

我的问题:

每当我第一次将小部件从“可用小部件”容器移动到侧边栏时，我都不会获得实际的字段名称，而是得到一种字段名称的占位符。

所以，不要得到这样的东西:

<input 
  type="hidden" 
  name="widget-hours-widget[2][order][]"
  value="L48">

我明白了:

<input 
  type="hidden" 
  name="widget-hours-widget[__i__][order][]" 
  value="L26">

单击保存按钮后，field_name 为我提供了小部件的正确名称 widget-hours-widget[2] 而不是占位符 小部件小时小部件[__i__]。

有人遇到过类似的问题或知道如何解决它吗？

谢谢。

Answer 1

问题

所以我弄清楚了问题所在。在下面的语句中，jQuery 正在获取 id 为 #order_field_name 的第一个元素。

var widget_field_name = $( '#order_field_name' ).attr( 'field_name' );

事实证明，实际上有两个元素具有该id。具有此 id 的第一个元素是“可用小部件”部分中的小部件。这是您单击小部件并将其拖动到侧边栏的部分。这是 jQuery 选择器返回给我的元素。

和标记:

解决方案

我有一个点击监听器，它动态添加带有字段名称的隐藏输入框。因此，我使用 jQuery 的树遍历方法返回到小部件的 form 元素，并向下遍历到具有 #order_field_name id 的元素。从那里，我获取了 field_name 属性，它具有正确的 field_name。

$( 'a.add-schedulable' ).click( function( evt ) {

  // ... code omitted ...

  var widget_field_name = $( this ).parents( 'form' ).find( '#order_field_name' ).attr( 'field_name' );

   // ... code omitted ...
}); 

从那里，我使用了一些 javascript 和 jQuery 创建一个具有所需属性的隐藏输入元素，它看起来与此类似:

<input 
  type="hidden" 
  name="widget-hours-widget[3][order][]" 
  value="L13">