Updating Manager Pages in a Plugin IV

Making the Edit Draft and Edit Original buttons do what they're supposed to do


This is the fourth in a series of articles dealing with issues created by operations performed in plugins that work on the Create/Edit Resource Panel in the MODX Manager. In the previous article, we saw how to place extra buttons on the Create/Edit Resource panel and make them call functions, but no information was passed to the function and the functions didn't do anything useful. In this one, we'll look at how to make the Edit Draft button and the Edit Original button do what they're supposed to do. In the next article, we'll tackle the Delete Draft function, which is a little more complex.

MODX logo

Placing the Code

Because their actions are simple, we'll place the entire JavaScript code for the actions of both the Edit Draft and the Edit Original buttons right into the onClick call itself (i.e., in the HTML code for the button). This means the two functions we created earlier to test these two buttons will no longer be needed.


The Edit Draft Button

We'll start with this button because it's fairly simple. All it does is forward the user to the Create/Edit Resource page for the draft using window.location.replace, which is the preferred method for forwarding a user to another page in JavaScript. The code for that looks like this (assuming that the ID of the draft is 12):

onClick="window.location.replace('yoursite.com/manager/?a=resource/update&id=12')";

This is the same URL you'd see in your browser's address window if you edited the draft yourself in the Manager. When the user clicks on the button, they get forwarded to that manager page, which is the Create/Edit Resource page for resource 12.

We can't just put that URL in the code, though, because it will change from page to page. We have to build it ourselves. This complicates our heredoc statement in the PHP code, which now looks like this:

$editDraftButton = <<<EDITDRAFTBUTTON
    var buttonDiv=document.getElementById('modx-action-buttons');
    var buttonRows=buttonDiv.getElementsByClassName("x-toolbar-left-row");

    /* Inject Edit Draft button */
    var row = buttonRows[0];
    var editDraftButton = row.insertCell(0);
        var editDraftButton = buttonRow.insertCell(0);
        editDraftButton.innerHTML = '\
            <span id="stagecoach_edit_draft_button" class="x-btn x-btn-small stagecoach-link">\
                <button onclick="window.location.replace(\\'{$managerUrl}?a=resource/update&id={$scId}\\')">Edit Draft</button>\
            </span>';
EDITDRAFTBUTTON;

If this looks a little strange, remember that we're using PHP to create JavaScript code that will create HTML code. First of all, JavaScript doesn't like newlines in quoted strings. That's why every line inside the innerHTML section ends with a backslash. That escapes the newline at the end of the line and keeps JavaScript from crashing. We could have written all the code on a single line to avoid this, but we might need to do a "View Source" on the page, and it would be very difficult to read.

Second, we have to do some weird escaping in the URL for the redirection. The \\' code at each end of the URL took me quite a while to discover, though it makes perfect sense once you understand it. If we just used a single quote, it would be passed through to the JavaScript code, which would crash because the single quote is inside the outer single quotes. So, the JS code needs a literal backslash in front of the single quote. In other words, the first backslash escapes the second so PHP will put a single backslash in the JS code. Because we're in a heredoc, the single quote will come through unchanged. The resulting JS code will look like this:

    var buttonDiv = document.getElementById('modx-action-buttons');
    var buttonRows = buttonDiv.getElementsByClassName("x-toolbar-left-row");

    /* Inject Edit Draft button */
    var row = buttonRows[0];
    var editDraftButton = row.insertCell(0);
    var editDraftButton = buttonRow.insertCell(0);
    editDraftButton.innerHTML = '\
        <span id="stagecoach_edit_draft_button" class="x-btn x-btn-small stagecoach-link">\
            <button onclick="window.location.replace(\'/revo23/manager/?a=resource/update&id=365\')">Edit Draft</button>\
        </span>';

We've left a blank line at the beginning of the heredoc section to make the resulting JS code easier to read. It doesn't need (and shouldn't have) a backslash at the end because it's not inside a JavaScript quoted string. Note that if we wanted to put an actual blank line *inside* the quoted string, it would definitely need a backslash, otherwise the JS would crash.

Notice that we've enclosed the two variables ($managerUrl, and $scId) in curly braces in the heredoc sections even though they're simple variables. We do this so we can be sure that PHP knows where those variable names begin and end.


The Edit Original Button

This looks just like the code for the Edit Draft button except that it uses a different variable for the ID of the resource:

    $editOriginalButton = <<<EDITORIGINALBUTTON
    var buttonDiv=document.getElementById('modx-action-buttons');
    var buttonRows=buttonDiv.getElementsByClassName("x-toolbar-left-row");

    /* Inject Edit Original button */
    var row = buttonRows[0];
    var editDraftButton = row.insertCell(0);

        var editOriginalButton = buttonRow.insertCell(0);
        editOriginalButton.innerHTML = '\
            <span id="stagecoach_edit_original_button" class="x-btn x-btn-small stagecoach-link">\
                <button onclick="window.location.replace(\\'{$managerUrl}?a=resource/update&id={$liveId}\\')">Edit Original</button>\
            </span>';
EDITORIGINALBUTTON;

Note that the $managerUrl, $scId, and $liveId variables have to be set above the code for the buttons. We'll worry about that later, when we put the plugin together.


Coming Up

We've still got some work to do. We haven't set the values of the two variables used in each button code. We also haven't looked at the Delete Draft button yet, and as it is now, all the buttons are going to appear on every page at the site. In the next article, we'll look at the Delete Draft button, which actually does call a JavaScript function in its onClick() code. In the article after that, we'll look at how to set the variables and make the buttons appear on the correct pages (and not appear on the rest).


Looking for high-quality, MODX-friendly hosting? As of May 2016, Bob's Guides is hosted at A2 hosting. (More information in the box below.)



Comments (0)


Please login to comment.

  (Login)