css - Check if a new Wordpress post is successfully published with jQuery

admin管理员组

文章数量:1129154

I would like jQuery to click on a button/link after a Wordpress post is successfully published for the first time. Here are CSS selectors for WP publish ID:

    // Before a post is published:
    <input type="submit" name="publish" id="publish" class="button button-primary button-large preventDefault" value="Publish">

    // After a post is published:
    // <input type="submit" name="save" id="publish" class="button button-primary button-large preventDefault" value="Update">

#publish has different values before and after WP publishes a post. Here are my test codes:

    document.getElementById("publish").onclick = function () {
        var isPublished = this.value;
        if (isPublished === 'Update') {         // works with Publish before post published; not work with Update after post published
          alert('A new post has been successfully published');
        }
        //  return true;

        //return false;

      }

The above codes dont work because var isPublished = this.value; obtains a value before WP publishes a new post. How can I get that value after a new post is successfully published.

Or is there another way of checking is a WP post is successfully posted?

Very appreciate any help.

I would like jQuery to click on a button/link after a Wordpress post is successfully published for the first time. Here are CSS selectors for WP publish ID:

    // Before a post is published:
    <input type="submit" name="publish" id="publish" class="button button-primary button-large preventDefault" value="Publish">

    // After a post is published:
    // <input type="submit" name="save" id="publish" class="button button-primary button-large preventDefault" value="Update">

#publish has different values before and after WP publishes a post. Here are my test codes:

    document.getElementById("publish").onclick = function () {
        var isPublished = this.value;
        if (isPublished === 'Update') {         // works with Publish before post published; not work with Update after post published
          alert('A new post has been successfully published');
        }
        //  return true;

        //return false;

      }

The above codes dont work because var isPublished = this.value; obtains a value before WP publishes a new post. How can I get that value after a new post is successfully published.

Or is there another way of checking is a WP post is successfully posted?

Very appreciate any help.

• css
• publish

Share Improve this question edited Dec 26, 2023 at 6:55 daro2013 asked Dec 26, 2023 at 6:49 daro2013daro2013 2511 silver badge66 bronze badges 2

• Why would a post not be successfully published? Is that all you want to know, or do you plan on doing something else when a post is published? If it's the latter then in the modern editor you would not do it like this with jQuery. – Jacob Peattie Commented Dec 26, 2023 at 9:03
• As mentioned in my post, I want jQuery to click a link (for auto translation - my website is bilingual) after a CPT post is successfully published. I use WP Classic Editor with its plugin installed. Any advice is very appreciated. – daro2013 Commented Dec 26, 2023 at 13:05

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I have replace the answer I gave yesterday with this newly updated and tested version. I also added some code to test with that changes Publish to Update after 6 seconds. Please give it a shot.

<input type="submit" name="save" id="publish" class="button button-primary button-large preventDefault" value="Publish">

<script>
    var publishButton = document.getElementById('publish');
    var checkPublishStatus = setInterval(function() {
        var isPublished = publishButton.value;
        console.log(isPublished);
        if (isPublished === 'Update') {
            alert('A new post has been successfully published');
            clearInterval(checkPublishStatus); // Stop the interval
        }
    }, 500); // Check every 500 milliseconds

    window.onload = function() {
        setTimeout(function(){
            document.querySelector('#publish').value = 'Update';
        }, 5000);
    }
</script>

Here is the jQuery version:

<script>
    var publishButton = $('#publish');
    var checkPublishStatus = setInterval(function() {
        var isPublished = publishButton.val();
        console.log(isPublished);
        if (isPublished === 'Update') {
            alert('A new post has been successfully published - JQUERY');
            clearInterval(checkPublishStatus); // Stop the interval
        }
    }, 500); // Check every 500 milliseconds

    $(window).on('load', function() {
        setTimeout(function(){
            $('#publish').val('Update');
        }, 5000);
    });
</script>

本文标签： cssCheck if a new Wordpress post is successfully published with jQuery