Akalonda Akalonda - 3 months ago 30
CSS Question

ContentTools - How can I pass additional data from a DIV to the payload object, to be passed into the POST array?

I use ContentTools for my content editor/PHP CMS.

I'm trying to pass additional values from a "editable div" to the POST array (then it will be stored in a database).
The script uses Javascript to get the data and to make the call to my server side code.

Relevant JS code for the saving process:



// Collect the contents of each editable region into a FormData instance
payload = new FormData();
//payload.append('__page__', window.location.pathname);
payload.append('page_id', page_id); // Page ID from the Meta Property

for (name in regions) {
payload.append(name, regions[name]);
//payload.append('template', 'template');
}


// Send the updated content to the server to be saved
onStateChange = function(ev) {
// Check if the request is finished
if (ev.target.readyState == 4) {
editor.busy(false);
if (ev.target.status == '200') {
// Save was successful, notify the user with a flash
if (!passive) {
new ContentTools.FlashUI('ok');
}
} else {
// Save failed, notify the user with a flash
new ContentTools.FlashUI('no');
}
}
};

xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', 'update-page.php'); // Server side php file, which will catch the $_POST array.
xhr.send(payload);





Below you see an example editable div which will be in the POST array when page is saved after editing.
Note that the div has additional custom html tags 'data-template'.




<div id="content_4" class="content" data-template="5" data-editable data-name="1">
This is some example website text.
This is some other example website text.
</div>





I'm trying to pass along the values from "data-template".
What I've tried so far does not work:

// Added in: editor.addEventListener('saved', function (ev) {
var template = document.querySelector("div[data-template]"); // Get Template name from editable div
// Or
var template = document.getElementsByTagName("[data-template]")[0].getAttribute('[data-template]');

// Added in: the For In Loop
for (name in regions) {
payload.append(name, regions[name]);
payload.append('template', template); // added but does not work
}


Also, I don't want to use the div ID as value to be passed on.

I'm still trying other ways, but my JavaScript knowledge is not (yet!) as strong as my PHP knowledge.

Does someone know a solution to this issue?

There must be simple solution to get the value from the data-template, passed on to the POST (only the data-template value of the changed content in the div).

Right?

Answer

You can select the template data for each region by selecting the region's DOM element by it's editable name (e.g data-name):

for (var name in regions) {
    // Select the region DOM element
    var regionDOM = document.querySelector('[data-name="' + name + '"]');

    // Get the `data-template` attribute
    var tpl = regionDOM.getAttribute('data-template');

    // Add the region HTML and template to the payload
    payload.append(name, regions[name]);
    payload.append('template_' + name, tpl);
}

The reason you get no value for for template at all in your code is that you're calling the getAttribute method with the CSS selector and not just the attribute name you want, e.g .getAttribute('[data-template]') should be .getAttribute('data-template').

The other difference in the code I've posted is that the template for each region is saved. If it will be the same template for all regions then you could modify the code to be:

for (var name in regions) {
    // Select the region DOM element
    var regionDOM = document.querySelector('[data-name="' + name + '"]');

    // Get the `data-template` attribute
    var tpl = regionDOM.getAttribute('data-template');

    // Add the region HTML and template to the payload
    payload.append(name, regions[name]);
}

// Set the template value for the payload to that of the last region
// found.
payload.append('template', tpl);
Comments