Skip to content

Instantly share code, notes, and snippets.

@rilwis
Created May 11, 2016 02:47
Show Gist options
  • Save rilwis/5c32156d8296efc2a0af4cf27af533bc to your computer and use it in GitHub Desktop.
Save rilwis/5c32156d8296efc2a0af4cf27af533bc to your computer and use it in GitHub Desktop.
Live update custom_html field
<?php
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes )
{
$meta_boxes[] = array(
'title' => 'Update custom html field demo',
'fields' => [
[
'name' => 'Group',
'type' => 'group',
'id' => 'group',
'clone' => true,
'fields' => [
[
'name' => 'Site title',
'id' => 'title',
'type' => 'text',
'class' => 'live-update',
],
[
'name' => 'URL',
'id' => 'url',
'type' => 'url',
'class' => 'live-update',
],
[
'name' => 'Preview',
'type' => 'custom_html',
],
],
],
],
);
return $meta_boxes;
} );
add_action( 'rwmb_enqueue_scripts', function ()
{
wp_enqueue_script( 'live-update', plugins_url( 'script.js', __FILE__ ), [ 'jquery' ] );
} );
jQuery( function ( $ )
{
$( '#wpbody' ).on( 'change', '.live-update input', function ()
{
var $group = $( this ).closest( '.rwmb-group-clone' ),
title = $group.find( '.rwmb-text-wrapper input' ).val(),
url = $group.find( '.rwmb-url-wrapper input' ).val(),
$preview = $group.find( '.rwmb-custom_html-wrapper .rwmb-input' );
$preview.html( '<a href="' + url + '">' + title + '</a>' );
} );
$( '.live-update input' ).trigger( 'change' );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment