Question

我有一个动态构建的表单，用于在Drupal中构建一个具有预定义输入的轮播，当单击＆＃34;添加幻灯片＆＃34;按钮。单击按钮时，表单会更新，但由于Drupal使用托管文件上载构建表单的方式，因此每个托管文件上载字段都需要更改两个元素。第一个元素会更新，但第二个元素不会更新。需要更新的原因是，当表单提交时，它会获取所有幻灯片的值。不会更新的隐藏输入的name属性是： image_file [fid] 。

页面上的Javascript：

var c = 0;
(function ($) {
  var nid;
  Drupal.carousel_npd_data_form = Drupal.carousel_npd_data_form || {};
  Drupal.behaviors.carousel_npd_data_form = {
    attach: function(context, settings) {
      var nid = Drupal.settings.carousel_npd_data_form.nid;
      var field_name = Drupal.settings.carousel_npd_data_form.field_name;
      var form_location = 'carousel/form';
      var node_carousel_form_location = 'carousel/form/' + nid + '/' + field_name;

      init();

      /**
       * Run some stuff before stuff happens.
       */
      function init() {
        var nodeResponse = retrieveNodeCarousel();
        var carousel_data = nodeResponse.response;
        if (carousel_data == '{carousel:[]}' || " " || "") {
          // carousel data for node is empty
        } else {
          // carousel data for node exists
        }
      }

      /**
       * Returns the carousel JSON data for a node.
       * @return {[JSON]} node carousel value
       */
      function retrieveNodeCarousel() {
        return $.ajax({
          async: false,
          type: "POST",
          url: Drupal.settings.basePath + node_carousel_form_location,
        });
      }

    }
  }
})(jQuery);

按钮点击的Javascript（暂时存在于表单本身而不是js文件中）：

        event.preventDefault();
        var sheep = (jQuery)(\'#carousel-editor-slide-\'+c);
        c++
        var klone = (jQuery)(sheep).clone().attr(\'id\', \'carousel-editor-slide-\'+c);
        console.log(klone);
        (jQuery)(klone).insertAfter(sheep);
        (jQuery)(\'#carousel-editor-slide-\'+c+\' :input\').each(function(i, obj){
          console.log(obj);
          var field_id = (jQuery)(obj).attr(\'id\');
          if (field_id.length > 0) {
            var new_id = field_id+\'-\'+c;
            (jQuery)(\'#carousel-editor-slide-\'+c).find(\'#\'+field_id).attr(\'id\', new_id);
          }
          var field_name = (jQuery)(obj).attr(\'name\');
          var new_name = field_name+\'_\'+c;
          console.log(new_name);
          (jQuery)(\'#carousel-editor-slide-\'+c+\' :input[name^=\'+field_name+\']\').attr(\'name\', new_name);
          console.log((jQuery)(\'#carousel-editor-slide-\'+c+\' :input[name^=\'+new_name+\']\'));
        });

呈现HTML：

<fieldset class="form-wrapper" id="carousel-editor"><legend><span class="fieldset-legend">Carousel</span></legend><div class="fieldset-wrapper"><div class="fieldset-description">Add information to the carousel here.</div><fieldset class="form-wrapper" id="carousel-editor-slide-0"><legend><span class="fieldset-legend">Slide</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-carousel-image-title">
  <label for="edit-image-title">Image Title </label>
 <input type="text" id="edit-image-title" name="carousel_image_title" value="" size="60" maxlength="128" class="form-text">
</div>
<div id="edit-image-file-ajax-wrapper"><div class="form-item form-type-managed-file form-item-carousel-image-file">
  <label for="edit-image-file">Upload an Image </label>
 <div id="edit-image-file" class="form-managed-file"><input type="file" id="edit-image-file-upload" name="files[image_file]" size="22" class="form-file"><input type="hidden" name="image_file[fid]" value="0">
</div>
</div>
</div><div class="form-item form-type-textarea form-item-carousel-video-embed">
  <label for="edit-video-embed">Video Embed </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-video-embed" name="carousel_video_embed" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
<div class="form-item form-type-textarea form-item-carousel-text">
  <label for="edit-text">Text </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-text" name="carousel_text" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
</div></fieldset>
</div></fieldset>

单击按钮后，HTML如下所示：

<fieldset class="form-wrapper" id="carousel-editor"><legend><span class="fieldset-legend">Carousel</span></legend><div class="fieldset-wrapper"><div class="fieldset-description">Add information to the carousel here.</div><fieldset class="form-wrapper" id="carousel-editor-slide-0"><legend><span class="fieldset-legend">Slide</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-carousel-image-title">
  <label for="edit-image-title">Image Title </label>
 <input type="text" id="edit-image-title" name="carousel_image_title" value="" size="60" maxlength="128" class="form-text">
</div>
<div id="edit-image-file-ajax-wrapper"><div class="form-item form-type-managed-file form-item-carousel-image-file">
  <label for="edit-image-file">Upload an Image </label>
 <div id="edit-image-file" class="form-managed-file"><input type="file" id="edit-image-file-upload" name="files[image_file]" size="22" class="form-file"><input type="hidden" name="image_file[fid]" value="0">
</div>
</div>
</div><div class="form-item form-type-textarea form-item-carousel-video-embed">
  <label for="edit-video-embed">Video Embed </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-video-embed" name="carousel_video_embed" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
<div class="form-item form-type-textarea form-item-carousel-text">
  <label for="edit-text">Text </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-text" name="carousel_text" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
</div></fieldset><fieldset class="form-wrapper" id="carousel-editor-slide-1"><legend><span class="fieldset-legend">Slide</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-carousel-image-title">
  <label for="edit-image-title">Image Title </label>
 <input type="text" id="edit-image-title-1" name="carousel_image_title_1" value="" size="60" maxlength="128" class="form-text">
</div>
<div id="edit-image-file-ajax-wrapper"><div class="form-item form-type-managed-file form-item-carousel-image-file">
  <label for="edit-image-file">Upload an Image </label>
 <div id="edit-image-file" class="form-managed-file"><input type="file" id="edit-image-file-upload-1" name="files[image_file]" size="22" class="form-file"><input type="hidden" name="image_file[fid]" value="0">
</div>
</div>
</div><div class="form-item form-type-textarea form-item-carousel-video-embed">
  <label for="edit-video-embed">Video Embed </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-video-embed-1" name="carousel_video_embed_1" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
<div class="form-item form-type-textarea form-item-carousel-text">
  <label for="edit-text">Text </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-text-1" name="carousel_text_1" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
</div></fieldset>
</div></fieldset>

所有其他输入都会更新其名称和/或ID，因此我不确定隐藏元素未更新的原因。

编辑：我刚刚意识到还有另一个带有ID的标签也被复制，但是没有告知ID要更新。虽然我不认为造成隐藏属性问题的原因不会更新，但我会解决这个问题。

Answer 1

这不起作用的原因是因为JS中的这一行：

(jQuery)(\'#carousel-editor-slide-\'+c+\' :input[name^=\'+field_name+\']\').attr(\'name\', new_name);

由于这是内联JS并嵌入PHP，因此很难解决问题。我最终在JS Fiddle完成了这一切。从那里我找到了一种方法将我的代码全部移出PHP，这本身就是a difficult problem。

代码的工作线是：

$('#carousel-editor-slide-'+c).find('input[name^=\''+field_name+'\']').attr('name', new_name);

这里的主要修复是field_name变量现在包装在它自己的转义引号中。

隐藏的<input />上的Name属性未使用jQuery更新

1 个答案: