Rhyzz Repeatable-fields javascript in php and wordpress

Question

Yes this is doable. Here’s a tested solution to help you get up and running.

Enqueuing the scripts

WordPress already includes jQuery and jQuery UI so it’s not necessary (or suggested, usually) to include them from an external source. Sometimes, JavaScript libraries will work using a declarative syntax, which means that they can be initialized by using certain ids, classes, or data attributes in the HTML. Other times (and this is most often the case), you will need to include some additional JavaScript to initialize the JavaScript library that you’re trying to use. That seems to be the case with this repeatable fields script.

Here is the code that will enqueue the repeatable fields library and our initialization script. Make sure the paths are correct for your particular setup.

add_action( 'wp_enqueue_scripts', 'wpse_repeatable_scripts' );
function wpse_repeatable_scripts() {
    wp_enqueue_script(
        'jquery-repeatable',
        get_template_directory_uri() . '/js/repeatable-fields/repeatable-fields.js',
        array( 'jquery', 'jquery-ui-core' ),
        '20120206',
        true
    );

    wp_enqueue_script(
        'jquery-repeatable-init',
        get_template_directory_uri() . '/js/repeatable-init.js',
        array( 'jquery-repeatable' ),
        '20120206',
        true
    );  
}

repeatable-init.js

Here is the contents of repeatable-init.js, which initializes the repeatable fields library so that it attaches to markup using the .repeat class.

jQuery( document ).ready( function( $ ) {
    $( ".repeat" ).each( function() {
        $( this ).repeatable_fields();
    });
});

Finally, here is the HTML (via the developer’s docs):

<div class="repeat">
    <table class="wrapper" width="100%">
        <thead>
            <tr>
                <td width="10%" colspan="4"><span class="add">Add</span></td>
            </tr>
        </thead>
        <tbody class="container">
        <tr class="template row">
            <td width="10%"><span class="move">Move</span></td>

            <td width="10%">An Input Field</td>

            <td width="70%">
                <input type="text" name="an-input-field[{{row-count-placeholder}}]" />
            </td>

            <td width="10%"><span class="remove">Remove</span></td>
        </tr>
        </tbody>
    </table>
</div>

Related Posts: