enter image description here

I’m having a bit of a weird problem. I created some jquery to run when you’re looking through posts for a custom post type on the admin side. The basic functionality is, when the user clicks on “Quick Edit”, the function then counts how long the title is, creates the character counter, and will not allow the post to be updated if the title is too long.

That all works just fine. The problem I am having is after the user clicks “update” and saves the post. Let’s say the user made an update, but then realized they forgot something and clicked quick edit again before refreshing the page. The function no longer works. This is what appears after clicking quick edit right after saving that same post.

If you were to click on a different post’s quick edit, the jquery is still running. For some reason, it only ignores a post that has been saved. Refreshing will allow the jquery to work on that post again. So specifically, I’m trying to fix this to present the scenario I described above so that the jquery always works and the user can never enter too long a title. Would anyone know why the javascript stops working on posts that have been quick edited?

Here is the code for the javascript in case it is of help:

$(document).ready(function(){   

    $("body.post-type-properties tr.iedit a.editinline").click(function() {
        console.log("test");
        setTimeout(function(){
            var id = $("tr.inline-edit-row").prop("id");
            var titleLength = $("#" + id + ".inline-edit-row input[name=post_title]").val().length;
            $("#" + id + ".inline-edit-row input[name=post_title]").after("<p>Title length: <span class='length'>" + titleLength + "</span>/70</p>");
            $("#" + id + " p.submit").after("<p class='warning' style='float: right; padding-right: 5px; display: none'>Please shorten title length to save changes</p>");
            if ( titleLength >= 71 ) {
                $("#" + id + " button.save").attr('disabled', 'disabled');
                $("p.warning").css("display", "inherit");
            }
            $("#" + id + ".inline-edit-row input[name=post_title]").on("change paste keyup", function() {
               var newLength = $("#" + id + ".inline-edit-row input[name=post_title]").val().length;
               $("span.length").text(newLength);
               if (newLength >= 71) {
                $("#" + id + " button.save").attr('disabled', 'disabled');
                $("p.warning").css("display", "inherit");
               } else if ( newLength < 71 ) {
                $("#" + id + " button.save").removeAttr('disabled');
                $("p.warning").css("display", "none");

               }
            });
        }, 50);
    });

});

I run the console log right at the beginning of the function to see if its at least acknowledging the click. The console log only happens prior to updating the post, but not after updating which is the problem.

I hope this was enough info to make the issue clear to anyone who may want to help. Thank you in advanced!

Read more here: WordPress all posts on admin side – jquery stops working after quick edit is saved


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: