I am using WordPress and I have to show the dynamic fields on my custom post type after clicking on the button. So I used the below code Now, my issue is when I click on Add more fields then I am getting an error in the console Uncaught SyntaxError: missing ) after argument list I found the issue in

Uncaught SyntaxError: missing ) after argument list generating the dynamic HTML on click event

I am using WordPress and I have to show the dynamic fields on my custom post type after clicking on the button. So I used the below code

<?php 
  echo '<a href="javascript:void(0);" id="addMore_layout">Add more fields</a>';
  echo '<script>
     jQuery(function() {
      jQuery("#addMore_layout").click(function(e) {
       e.preventDefault();
       jQuery("#create_custom_layout").append("<div class='row'><div class='col-md-6'><h4>Description</h4>';
       $description1        = get_post_meta( $post->ID, 'pDescription', true );
         //Second ID the field.
       $description_field1  = 'pDescription';
         //Provide the settings arguments for this specific editor in an array
      $description_args1   = array('media_buttons' => false,'textarea_rows' => 12,'textarea_name' =>'pDescription[]','editor_class' =>'description-editor widefat', 'wpautop' => true);
      wp_editor($description1,$description_field1,$description_args1);
       echo'</div><div class='col-md-6'><input type='button' id='meta-image-button' class='button' value='Choose or Upload an Image' style='padding: 8px 10px; height: auto; line-height: normal;'/><input type='hidden' name='pimage[]' id='meta-image' class='meta_image' /><br /><img style='width: 100px;height: 100px;object-fit: cover;' id='meta-image-preview'  /></div></div>");
       
      })
    });
    
    </script>';
    ?>

Now, my issue is when I click on Add more fields then I am getting an error in the console

Uncaught SyntaxError: missing ) after argument list

I found the issue in this code

 `wp_editor($description1,$description_field1,$description_args1);`

I think there is some issue with the quote.

I was getting the same issue in class name the I change like class='classname' and it’s solved but now I am getting the issue in dynamic HTML generate.

Would you help me out?

view source

<?php
echo '<script>
jQuery(function() {
  jQuery("#addMore_layout").click(function(e) {
   e.preventDefault();
   jQuery("#create_custom_layout").append("<div class='row'><div class='col-md-6'><h4>Description</h4><div id="wp-pDescription-wrap" class="wp-core-ui wp-editor-wrap tmce-active"><div id="wp-pDescription-editor-tools" class="wp-editor-tools hide-if-no-js"><div class="wp-editor-tabs"><button type="button" id="pDescription-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="pDescription">Visual</button>
<button type="button" id="pDescription-html" class="wp-switch-editor switch-html" data-wp-editor-id="pDescription">Text</button>
</div>
</div>
<div id="wp-pDescription-editor-container" class="wp-editor-container"><div id="qt_pDescription_toolbar" class="quicktags-toolbar"></div><textarea class="description-editor widefat wp-editor-area" rows="12" autocomplete="off" cols="40" name="pDescription[]" id="pDescription"></textarea></div>
</div>

</div><div class='col-md-6'><input type='button' id='meta-image-button' class='button' value='Choose or Upload an Image' style='padding: 8px 10px; height: auto; line-height: normal;'/><input type='hidden' name='pimage[]' id='meta-image' class='meta_image' /><br /><img style='width: 100px;height: 100px;object-fit: cover;' id='meta-image-preview'  /></div></div>");
   
  })
});


</script>';

?>

Answer

The wordpress function is returning html which uses " in its attributes, which confilcts with your qoutes in your jQuery function. It also adds new lines with is also a problem.
Use a template literal for the jQuery argument to avoid the quote and new line issue.

<?php 
  echo '<a href="javascript:void(0);" id="addMore_layout">Add more fields</a>';
  echo '<script>
    jQuery(function() {
        jQuery("#addMore_layout").click(function(e) {
            e.preventDefault();
            jQuery("#create_custom_layout").append(`<div class='row'><div class='col-md-6'><h4>Description</h4>';
  $description1        = get_post_meta( $post->ID, 'pDescription', true );
  //Second ID the field.
  $description_field1  = 'pDescription';
  //Provide the settings arguments for this specific editor in an array
  $description_args1   = array('media_buttons' => false,'textarea_rows' => 12,'textarea_name' =>'pDescription[]','editor_class' =>'description-editor widefat', 'wpautop' => true);
  wp_editor($description1,$description_field1,$description_args1);
  echo'</div><div class='col-md-6'><input type='button' id='meta-image-button' class='button' value='Choose or Upload an Image' style='padding: 8px 10px; height: auto; line-height: normal;'/><input type='hidden' name='pimage[]' id='meta-image' class='meta_image' /><br /><img style='width: 100px;height: 100px;object-fit: cover;' id='meta-image-preview'  /></div></div>`);
       
          })
      });
    
  </script>';
  ?>

Advertisement

Answer