代码之家 › 专栏 › 技术社区 › tobiasg

从WordPress中的javascript更新帖子

wordpress php javascript

tobiasg · 技术社区 · 6 年前

我已经编写了应用于 edit.php 在WordPress的管理区域中显示。脚本收集信息(ID、标题和一些使用插件显示在列中的acf字段),并使用这些信息为每个日志生成div,然后创建 Muuri 比如这些新的沙发。

其思想是,应该用muuri呈现前端的post列表,以创建一个砖石布局。为了方便用户设置砌体中每个项目的排列和大小,我希望用户在管理区域中使用带有拖放功能的muuri,以便他们可以拖放每个帖子并设置其位置。然后我想把订单和每个帖子的大小从管理员传递到前端。

这是我添加到 编辑程序 页:

    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();
    })
});

我的想法是,然后我想将muuri实例的属性(表示每个项目大小的id、order和css类)传递给某种php函数,该函数在单击提交按钮时会更新数据库中每个post的acf字段。

这就是我开始开拓的功能:

$(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);
        }
    })

它为muuri网格中的每个项目/日志创建一个包含对象的数组,在该数组中,使用for循环的索引将属性设置为项目的顺序,然后设置 id 和 layout 使用在最初加载页面或更改网格布局时在元素上设置的数据字段。

如何将这些信息发送到PHP函数,然后在这些对象的帮助下更新数据库中的每个日志?

1 回复 | 直到 6 年前

Jamie_D 6 年前

通过jquery ajax函数发送(因为这正是您使用的函数)

 $(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);
            }
        });        
  });

在php文件中发布参数:

$postitems = $_POST['postitems'];
$postArray = json_decode($postitems);
print_r($postArray);
exit();