Mixing
Updating posts from JavaScript in Wordpress
I've written the start of a script that is applied to the edit.php page on the admin area in Wordpress. The script collects information (id, title and a few ACF fields that are shown in the columns using a plugin) and uses this information to generate divs for each of the posts, and then creates a Muuri instance with these new divs.
The idea is that the post list on the front end should be rendered with Muuri, to create a masonry layout. In order to make it easier for the user to set the arrangement and size of each item in the masonry, I want the user to use Muuri with the drag and drop functionality in the admin area, so that they can drag and drop each post and set their positions. I then want to pass the order and the sizes of each post from the admin to the front end.
This is the script that I add to the edit.php page:
var output = "<div class='grid'>";
$(window).on("load", function(){
$("#the-list").find("tr").each(function(index){
var title = $(this).find(".title").find(".row-title").text();
var sort = $(this).find(".column-order").text();
var layout = $(this).find(".column-size").text();
var id = $(this).attr("id");
var link = $(this).find(".title").find(".row-title").attr("href");
var select = "<select class='layout-changer' data-id='" + id +"' style='position:absolute;bottom:0;left:0;'>";
select += "<option value='layout1'>Layout 1</option>";
select += "<option value='layout2'>Layout 2</option>";
select += "<option value='layout3'>Layout 3</option>";
select += "</select>";
output += "<div class='item " + layout + "' data-id='" + id +"' data-layout='" + layout + "' data-sort='" + sort + "'><div class='item-content'><div class='my-custom-content'>" + select + "<a href='" + link + "'>" + title + "</a></div></div></div>";
});
output += "</div><button class='submitGrid'>Save</button>";
$(".wrap").append(output);
var grid = new Muuri('.grid', {
dragEnabled: true,
layout: {
fillGaps: true,
rounding: false
},
sortData: {
order: function (item, element) {
return parseFloat(element.getAttribute('data-sort'));
},
}
});
grid.sort('order');
$(".layout-changer").change(function(){
var choice = $(this).find("option:selected").val();
var parent = $(this).closest(".item");
var parentEl = $(this).closest(".item")[0];
parent.removeClass().addClass("item").addClass(choice);
parent.attr("data-layout", choice);
grid.refreshItems(parentEl).layout();
grid.layout();
})
});
My idea is that I then want to pass properties from the Muuri instance (the id, the order and the CSS class representing the size of each item) to some kind of PHP function that upon clicking a submit button updates each post's ACF fields in the database.
This is the function that I've begun to carve out:
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
})
It creates an array containing an object for each item/post in the Muuri grid, where the properties are set to the order of the item using the index of the for loop, and then sets id and layout using data fields that I'm setting on the element when initially loading the page or changing the layout of the grid.
How would I go about sending this information to a PHP function and then update each post in the database with the help of these objects?
javascript php wordpress
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
add a comment |
I've written the start of a script that is applied to the edit.php page on the admin area in Wordpress. The script collects information (id, title and a few ACF fields that are shown in the columns using a plugin) and uses this information to generate divs for each of the posts, and then creates a Muuri instance with these new divs.
The idea is that the post list on the front end should be rendered with Muuri, to create a masonry layout. In order to make it easier for the user to set the arrangement and size of each item in the masonry, I want the user to use Muuri with the drag and drop functionality in the admin area, so that they can drag and drop each post and set their positions. I then want to pass the order and the sizes of each post from the admin to the front end.
This is the script that I add to the edit.php page:
var output = "<div class='grid'>";
$(window).on("load", function(){
$("#the-list").find("tr").each(function(index){
var title = $(this).find(".title").find(".row-title").text();
var sort = $(this).find(".column-order").text();
var layout = $(this).find(".column-size").text();
var id = $(this).attr("id");
var link = $(this).find(".title").find(".row-title").attr("href");
var select = "<select class='layout-changer' data-id='" + id +"' style='position:absolute;bottom:0;left:0;'>";
select += "<option value='layout1'>Layout 1</option>";
select += "<option value='layout2'>Layout 2</option>";
select += "<option value='layout3'>Layout 3</option>";
select += "</select>";
output += "<div class='item " + layout + "' data-id='" + id +"' data-layout='" + layout + "' data-sort='" + sort + "'><div class='item-content'><div class='my-custom-content'>" + select + "<a href='" + link + "'>" + title + "</a></div></div></div>";
});
output += "</div><button class='submitGrid'>Save</button>";
$(".wrap").append(output);
var grid = new Muuri('.grid', {
dragEnabled: true,
layout: {
fillGaps: true,
rounding: false
},
sortData: {
order: function (item, element) {
return parseFloat(element.getAttribute('data-sort'));
},
}
});
grid.sort('order');
$(".layout-changer").change(function(){
var choice = $(this).find("option:selected").val();
var parent = $(this).closest(".item");
var parentEl = $(this).closest(".item")[0];
parent.removeClass().addClass("item").addClass(choice);
parent.attr("data-layout", choice);
grid.refreshItems(parentEl).layout();
grid.layout();
})
});
My idea is that I then want to pass properties from the Muuri instance (the id, the order and the CSS class representing the size of each item) to some kind of PHP function that upon clicking a submit button updates each post's ACF fields in the database.
This is the function that I've begun to carve out:
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
})
It creates an array containing an object for each item/post in the Muuri grid, where the properties are set to the order of the item using the index of the for loop, and then sets id and layout using data fields that I'm setting on the element when initially loading the page or changing the layout of the grid.
How would I go about sending this information to a PHP function and then update each post in the database with the help of these objects?
javascript php wordpress
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
add a comment |
I've written the start of a script that is applied to the edit.php page on the admin area in Wordpress. The script collects information (id, title and a few ACF fields that are shown in the columns using a plugin) and uses this information to generate divs for each of the posts, and then creates a Muuri instance with these new divs.
The idea is that the post list on the front end should be rendered with Muuri, to create a masonry layout. In order to make it easier for the user to set the arrangement and size of each item in the masonry, I want the user to use Muuri with the drag and drop functionality in the admin area, so that they can drag and drop each post and set their positions. I then want to pass the order and the sizes of each post from the admin to the front end.
This is the script that I add to the edit.php page:
var output = "<div class='grid'>";
$(window).on("load", function(){
$("#the-list").find("tr").each(function(index){
var title = $(this).find(".title").find(".row-title").text();
var sort = $(this).find(".column-order").text();
var layout = $(this).find(".column-size").text();
var id = $(this).attr("id");
var link = $(this).find(".title").find(".row-title").attr("href");
var select = "<select class='layout-changer' data-id='" + id +"' style='position:absolute;bottom:0;left:0;'>";
select += "<option value='layout1'>Layout 1</option>";
select += "<option value='layout2'>Layout 2</option>";
select += "<option value='layout3'>Layout 3</option>";
select += "</select>";
output += "<div class='item " + layout + "' data-id='" + id +"' data-layout='" + layout + "' data-sort='" + sort + "'><div class='item-content'><div class='my-custom-content'>" + select + "<a href='" + link + "'>" + title + "</a></div></div></div>";
});
output += "</div><button class='submitGrid'>Save</button>";
$(".wrap").append(output);
var grid = new Muuri('.grid', {
dragEnabled: true,
layout: {
fillGaps: true,
rounding: false
},
sortData: {
order: function (item, element) {
return parseFloat(element.getAttribute('data-sort'));
},
}
});
grid.sort('order');
$(".layout-changer").change(function(){
var choice = $(this).find("option:selected").val();
var parent = $(this).closest(".item");
var parentEl = $(this).closest(".item")[0];
parent.removeClass().addClass("item").addClass(choice);
parent.attr("data-layout", choice);
grid.refreshItems(parentEl).layout();
grid.layout();
})
});
My idea is that I then want to pass properties from the Muuri instance (the id, the order and the CSS class representing the size of each item) to some kind of PHP function that upon clicking a submit button updates each post's ACF fields in the database.
This is the function that I've begun to carve out:
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
})
It creates an array containing an object for each item/post in the Muuri grid, where the properties are set to the order of the item using the index of the for loop, and then sets id and layout using data fields that I'm setting on the element when initially loading the page or changing the layout of the grid.
How would I go about sending this information to a PHP function and then update each post in the database with the help of these objects?
javascript php wordpress
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
I've written the start of a script that is applied to the edit.php page on the admin area in Wordpress. The script collects information (id, title and a few ACF fields that are shown in the columns using a plugin) and uses this information to generate divs for each of the posts, and then creates a Muuri instance with these new divs.
The idea is that the post list on the front end should be rendered with Muuri, to create a masonry layout. In order to make it easier for the user to set the arrangement and size of each item in the masonry, I want the user to use Muuri with the drag and drop functionality in the admin area, so that they can drag and drop each post and set their positions. I then want to pass the order and the sizes of each post from the admin to the front end.
This is the script that I add to the edit.php page:
var output = "<div class='grid'>";
$(window).on("load", function(){
$("#the-list").find("tr").each(function(index){
var title = $(this).find(".title").find(".row-title").text();
var sort = $(this).find(".column-order").text();
var layout = $(this).find(".column-size").text();
var id = $(this).attr("id");
var link = $(this).find(".title").find(".row-title").attr("href");
var select = "<select class='layout-changer' data-id='" + id +"' style='position:absolute;bottom:0;left:0;'>";
select += "<option value='layout1'>Layout 1</option>";
select += "<option value='layout2'>Layout 2</option>";
select += "<option value='layout3'>Layout 3</option>";
select += "</select>";
output += "<div class='item " + layout + "' data-id='" + id +"' data-layout='" + layout + "' data-sort='" + sort + "'><div class='item-content'><div class='my-custom-content'>" + select + "<a href='" + link + "'>" + title + "</a></div></div></div>";
});
output += "</div><button class='submitGrid'>Save</button>";
$(".wrap").append(output);
var grid = new Muuri('.grid', {
dragEnabled: true,
layout: {
fillGaps: true,
rounding: false
},
sortData: {
order: function (item, element) {
return parseFloat(element.getAttribute('data-sort'));
},
}
});
grid.sort('order');
$(".layout-changer").change(function(){
var choice = $(this).find("option:selected").val();
var parent = $(this).closest(".item");
var parentEl = $(this).closest(".item")[0];
parent.removeClass().addClass("item").addClass(choice);
parent.attr("data-layout", choice);
grid.refreshItems(parentEl).layout();
grid.layout();
})
});
My idea is that I then want to pass properties from the Muuri instance (the id, the order and the CSS class representing the size of each item) to some kind of PHP function that upon clicking a submit button updates each post's ACF fields in the database.
This is the function that I've begun to carve out:
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
})
It creates an array containing an object for each item/post in the Muuri grid, where the properties are set to the order of the item using the index of the for loop, and then sets id and layout using data fields that I'm setting on the element when initially loading the page or changing the layout of the grid.
How would I go about sending this information to a PHP function and then update each post in the database with the help of these objects?
javascript php wordpress
javascript php wordpress
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
asked Nov 20 '18 at 9:12
tobiasgtobiasg
135214
135214
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Send via jQuery ajax function (since that is what you're using)
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
var itemdata = JSON.stringify(payload);
$.ajax({
url: "/path/to/phpfile.php",
type: "POST",
data: {
postitems: itemdata
},
beforeSend: function() {
},
success: function(response) {
console.log(response);
}
});
});
POST params in PHP file :
$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
Thanks! I get500 (Internal Server Error)on the PHP file though. Any idea why?
– tobiasg
Nov 20 '18 at 10:14
Sorry .... updated answer ... remove right parenthesis from$_POST['postitems']);. should be$_POST['postitems'];
– Jamie_D
Nov 20 '18 at 10:19
Thank you so much! Now I just have to figure out how to update the posts with this. :)
– tobiasg
Nov 20 '18 at 10:30
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389645%2fupdating-posts-from-javascript-in-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Send via jQuery ajax function (since that is what you're using)
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
var itemdata = JSON.stringify(payload);
$.ajax({
url: "/path/to/phpfile.php",
type: "POST",
data: {
postitems: itemdata
},
beforeSend: function() {
},
success: function(response) {
console.log(response);
}
});
});
POST params in PHP file :
$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
Thanks! I get500 (Internal Server Error)on the PHP file though. Any idea why?
– tobiasg
Nov 20 '18 at 10:14
Sorry .... updated answer ... remove right parenthesis from$_POST['postitems']);. should be$_POST['postitems'];
– Jamie_D
Nov 20 '18 at 10:19
Thank you so much! Now I just have to figure out how to update the posts with this. :)
– tobiasg
Nov 20 '18 at 10:30
add a comment |
Send via jQuery ajax function (since that is what you're using)
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
var itemdata = JSON.stringify(payload);
$.ajax({
url: "/path/to/phpfile.php",
type: "POST",
data: {
postitems: itemdata
},
beforeSend: function() {
},
success: function(response) {
console.log(response);
}
});
});
POST params in PHP file :
$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
Thanks! I get500 (Internal Server Error)on the PHP file though. Any idea why?
– tobiasg
Nov 20 '18 at 10:14
Sorry .... updated answer ... remove right parenthesis from$_POST['postitems']);. should be$_POST['postitems'];
– Jamie_D
Nov 20 '18 at 10:19
Thank you so much! Now I just have to figure out how to update the posts with this. :)
– tobiasg
Nov 20 '18 at 10:30
add a comment |
Send via jQuery ajax function (since that is what you're using)
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
var itemdata = JSON.stringify(payload);
$.ajax({
url: "/path/to/phpfile.php",
type: "POST",
data: {
postitems: itemdata
},
beforeSend: function() {
},
success: function(response) {
console.log(response);
}
});
});
POST params in PHP file :
$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
Send via jQuery ajax function (since that is what you're using)
$(document).on("click", ".submitGrid", function(){
var allItems = grid.getItems();
var payload = ;
var item = {};
for (i = 0; i < allItems.length; i++) {
item = {
order: i,
layout: allItems[i]._element.dataset.layout,
id: allItems[i]._element.dataset.id.replace(/D/g,'')
}
payload.push(item);
}
var itemdata = JSON.stringify(payload);
$.ajax({
url: "/path/to/phpfile.php",
type: "POST",
data: {
postitems: itemdata
},
beforeSend: function() {
},
success: function(response) {
console.log(response);
}
});
});
POST params in PHP file :
$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
edited Nov 20 '18 at 10:19
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
answered Nov 20 '18 at 10:00
Jamie_DJamie_D
51938
51938
Thanks! I get500 (Internal Server Error)on the PHP file though. Any idea why?
– tobiasg
Nov 20 '18 at 10:14
Sorry .... updated answer ... remove right parenthesis from$_POST['postitems']);. should be$_POST['postitems'];
– Jamie_D
Nov 20 '18 at 10:19
Thank you so much! Now I just have to figure out how to update the posts with this. :)
– tobiasg
Nov 20 '18 at 10:30
add a comment |
Thanks! I get500 (Internal Server Error)on the PHP file though. Any idea why?
– tobiasg
Nov 20 '18 at 10:14
Sorry .... updated answer ... remove right parenthesis from$_POST['postitems']);. should be$_POST['postitems'];
– Jamie_D
Nov 20 '18 at 10:19
Thank you so much! Now I just have to figure out how to update the posts with this. :)
– tobiasg
Nov 20 '18 at 10:30
Thanks! I get
500 (Internal Server Error) on the PHP file though. Any idea why?– tobiasg
Nov 20 '18 at 10:14
Thanks! I get
500 (Internal Server Error) on the PHP file though. Any idea why?– tobiasg
Nov 20 '18 at 10:14
Sorry .... updated answer ... remove right parenthesis from
$_POST['postitems']); . should be $_POST['postitems'];– Jamie_D
Nov 20 '18 at 10:19
Sorry .... updated answer ... remove right parenthesis from
$_POST['postitems']); . should be $_POST['postitems'];– Jamie_D
Nov 20 '18 at 10:19
Thank you so much! Now I just have to figure out how to update the posts with this. :)
– tobiasg
Nov 20 '18 at 10:30
Thank you so much! Now I just have to figure out how to update the posts with this. :)
– tobiasg
Nov 20 '18 at 10:30
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389645%2fupdating-posts-from-javascript-in-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
