Support

Account

Register Login

Forum Replies Created

  • Hmm, the wysiwyg editor is really hard to grab. To your code I’ve added the following, as the above method of getting the ID of the wysiwyg did not work, and apparently, when the wysiwyg is there, the textarea is not (and vice-versa):

    
	var $fields = $el.find('.acf-field').each(function(index, element) {
		console.log('---');
		var $type = $(element).data('type');
		if ($type == 'group') {return;}
		console.log('type:' + $type);
		var $key = $(element).data('key');
		var $val = $('input[name*=' +$key ).val();
		if ($type == 'wysiwyg') {
			console.log('looking for wysiwyg');
			// does not work:
			// var $id = $('[data-key="' + $key + '"].acf-input textarea').attr('id');
			var $id = $(element).find('.acf-input div').attr('id');
//something similar; we have to trim the -wrap suffic and the wp- prefix:
			$id = $id.replace('-wrap','');
			$id = $id.replace('wp-acf','acf');
			console.log('id' + $id);
			$val = find_editor($id, 'get', '');
			if ($val == undefined) {
				console.log('no wysiwyg visible, look for textarea');
				$val = $('#' + $id).val();
			}
		}
		console.log($key);
		console.log($val);
	});

    and then I added a function for get/set of the Tiny editor:

    
function find_editor($id, action, value) {
	$editor = false;
	for (i=0; i<tinyMCE.editors.length; i++) {
		console.log(tinyMCE.editors[i].id);
		if ($id == tinyMCE.editors[i].id) {
		// found the right one, set and stop
		$editor = tinyMCE.editors[i];
		break;
		}
	}
	console.log($editor);
	if (action == 'set') {
		if ($editor) {
			// this is a tinyMCE function call
			$editor.setContent("some value");
		}
	}
	
	if (action == 'get') {
		if ($editor) {
			// this is a tinyMCE function call
			return $editor.getContent();
		}
	}
}

    So, this is beginning to work. I am not dealing with other inputs such as checkboxes yet.

  • Wow, thanks! I will try this out.

  • HI John,
    That is great, but now how do I loop through the ACF input/textarea fields within that row? In the example:

    acf.add_action('append', function( $el ){
	
	// $el will be equivalent to the new element being appended $('tr.row')
	
	
	// find a specific field
	var $field = $el.find('#my-wrapper-id');
	
	
	// do something to $field
	
});

    I do not understand the $el.find(‘#my-wrapper-id’);. I do not know what the ID of this new row is.

    I was trying to do $el.each(‘input’) or something like that and couldn’t get this to work.

    After a second or whatever, then newly-created row seems to have an ID of sizzle1529351842030 and when you create another row, the previous sizzle-row loses its ID, and so on. Where does the “sizzle” get its numeric portion (1529351842030)? Is that related to the ACF internal ID or is it just a timestamp?

    So what I would like is a way to access all of the ACF inputs/text areas, buttons, selects, on that new row, as I want to populate it dynamically. Also, I am unsure how to set the contents of an ACF wysiwyg (tinymce) field.

  • I think I have part of it figured out, but I have reached the limits of what I know about with jQuery. I have a repeater row set up with various inputs, including a WYSIWYG editor. I would like to add a copy/paste button so I can just duplicate that row’s contents, or even go to another Post and paste a row.

    So far, I have figured out how to add a copy button, and how to add a paste button (which basically creates a row).

    Here is what I have so far; can someone review and help me figure out how to access each of the fields in a repeater row via Javascript?

    // first make some buttons that we are adding dynamically:
var acf_paste_button = '<a class="acf-button button" id="acf_paste_row" href="#" data-event="paste-row">Paste Row</a>';
// TODO: Give the copy button a FA of acf-font icon
var acf_copy_button = '<a class="small acf_copy_row" href="#" data-event="copy-row" title="Click to copy this row">C</a>';
// global: Keep track of button-pasted state:
var acf_button_pasted = false;
// add a button to the bottom of the actions area:
$('.acf-actions').prepend(acf_paste_button);
// add some copy buttons to each row in the ACF:
$('td.acf-row-handle').append(acf_copy_button)
//when you click the paste row button, send a click to the "add row" button
$('body').on('click','#acf_paste_row', function() {
	$('.acf-button.button.button-primary').click();
	acf_button_pasted = true;
});

// when you click the coyp row, put it into a cookie
$('body').on('click','.acf_copy_row', function() {
	alert('todo: COPY the inputs of this row into a cookie');
});

// listen for pasting events:
acf.add_action('append', function( $el ){
	// $el will be equivalent to the new element being appended $('tr.row')	
	if (	acf_button_pasted ) {
		// so we just added a row; now we need to add a copy button for it:
		$el.find('td.acf-row-handle').append(acf_copy_button);		

		// find a specific field
		console.log($el);
		var $field = $el.find('#my-wrapper-id');
		var $field = $el.find('.acf-row');
		console.log($field);
		console.log('now it is time to paste the stuff');
		// set the flag back to false in case you want to paste again.
		acf_button_pasted = false;
		// .acf-input-wrap 
		// do something to $field
		// TODO: Paste values into each of the inputs.
		$el.find('input').val('fish');
		// how to access a WYSIWYG editor?
		//tinymce.activeEditor.execCommand('mceInsertContent', false, " <b>bolded text</b> ");
		$('.tmce-active').execCommand('mceInsertContent', false, " <b>bolded text</b> ");
		// TODO: run through each element
		$el.each( 'input', function(el) {
			console.log(el);
		});
	}
});

  • Is there an event that can be detected when a new row is added?
    I’d like to listen for when the new row is added, and then do something after that (like put up a prompt to guide the user along, etc.)

  • I sure wish you would fix the fullscreen problem! Annoying to have to code around this.
    For me, it turned out to be not the 2nd array, but the 1st. And for good measure, do the same thing for both Full and Basic. In your example you seem to be looking at ‘Full’ and then doing the unset to ‘Basic’. For us, it worked better like this:

    if( ($key = array_search('fullscreen' , $toolbars['Full'][1])) !== false )
	{
	
	    unset( $toolbars['Full'][1][$key] );
	}
	
	if( ($key = array_search('fullscreen' , $toolbars['Basic'][1])) !== false )
	{

	    unset( $toolbars['Basic'][1][$key] );
	}
Viewing 6 posts - 1 through 6 (of 6 total)