Wordpress小部件:将$ this-> get_field_name()传递给javascript

Question

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

1. 在form我的Widget类(扩展WP_Widget)的方法中,我有以下片段,它设置一个全局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>
   

在我的widget admin 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' );
   

我的问题:

每当我第一次将小部件从Available Widgets容器移动到我的侧边栏时,我都没有获得实际的字段名称,而是获得了字段名称的一种占位符.

所以,而不是得到这样的东西:

<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]而不是占位符widget-hours-widget[__i__].

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

谢谢.

Answer 1

问题

所以我明白了问题所在。在下面的语句中，jQuery 正在抓取 id 为 的第一个元素#order_field_name。

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

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

和标记：

解决方案

我有一个点击侦听器，它动态添加带有字段名称的隐藏输入框。因此，我使用 jQuery 的树遍历方法向上返回到 widget 的form元素，并向下遍历到具有 id 的元素#order_field_name。从那里，我抓住了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">