jquery - Dynamically update post title in admin page

admin管理员组

文章数量:1424916

I have a textarea in admin post page when creating new post, that's title:

<textarea id="post-title-0" class="editor-post-title__input" placeholder="Add title" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 94px;">vbhgfhfgh</textarea>

I want to update title on the fly using jQuery. I tried

$('#post-title-0').val('some value');
$('#post-title-0').text('some value');

I also tried using plain javascript.

val() updates title but when I click on title it is being erased. Is there anyway to update title via JS?

I have a textarea in admin post page when creating new post, that's title:

<textarea id="post-title-0" class="editor-post-title__input" placeholder="Add title" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 94px;">vbhgfhfgh</textarea>

I want to update title on the fly using jQuery. I tried

$('#post-title-0').val('some value');
$('#post-title-0').text('some value');

I also tried using plain javascript.

val() updates title but when I click on title it is being erased. Is there anyway to update title via JS?

• posts
• jquery
• javascript
• title

Share Improve this question asked Jun 12, 2019 at 6:44 FosAvanceFosAvance 14355 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 8

The block editor is restoring back the title that was last saved (or typed manually into the textarea), so with the block editor, you can change the title dynamically using this code:

wp.data.dispatch( 'core/editor' ).editPost( { title: 'Title here' } )

PS: You should make sure your JS file has the wp-editor, wp-edit-post or wp-data as part of the dependencies.

UPDATE

Here are the resources which helped me identify the above solution/code:

• https://developer.wordpress/block-editor/packages/packages-data/#dispatch

• https://riad.blog/2018/06/07/efficient-client-data-management-for-wordpress-plugins

• https://github/WordPress/gutenberg/blob/master/packages/editor/src/components/post-title/index.js (the React component which setups the title textarea / UI)

本文标签： jqueryDynamically update post title in admin page