Question

我在这里遇到小问题。这里有所有的输出。但如果我删除那些它也会从数据库中删除。我想仅从html页面关闭内容而不是从数据库中删除它。

我正在使用javascript。任何帮助对我都有很大帮助。

HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>My Parse App</title>
        <meta name="description" content="My Parse App">
        <meta name="viewport" content="width=device-width">
        <!--  <link rel="stylesheet" href="css/reset.css">-->
        <!--  <link rel="stylesheet" href="css/styles.css">-->
        <!--
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
        <style>
            /* my CSS here */
        </style>
    </head>
    <body bgcolor="#45a049">
        <div>
            <form id=post-form>
                <label for="fname">First Name :</label>
                <input type="text" id="post-fname" name="firstname"><br>
                <label for="lname">Last Name :</label>
                <input type="text" id="post-lname" name="lastname"><br>
                <label for="image">Select Image :</label>
                <input type="file" id="post-image" ><br>
                <input type="submit" value="Submit">
            </form>
        </div>
        <list id="list-posts" style="list-style-type:circle; width:50%" border="2" cellspacing="1" cellpadding="100" >
        </list>
        <script type="text/javascript">
            /* my JS here */
        </script>
    </body>
</html>

CSS

input[type=text],
select {
    width: 50%;
    /*align-content:center;*/

    align-self: center;
    padding: 5px 20px;
    margin: 30px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=file],
select {
    /*padding: 20px 5px;*/

    padding-right: -5px;
    padding-left: 50px;
    margin: 20px 10px;
}
input[type=submit] {
    width: 40%;
    /*align-self: center;*/

    background-color: #4CAF50;
    color: white;
    padding: 7px 30px;
    /*align:center;*/

    margin: 20px 10px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #45a049;
}
div {
    border-radius: 10px;
    background-color: #f2f2f2;
    background-position: center;
    background-size: contain;
    /*background-position: 30px 60px;*/

    position: absolute;
    padding: 10px 10px;
    margin: 80px 500px;
    text-align: center;
    align-self: center;
    left=50%;
    top=50%;
}

JS

Parse.initialize("", "");


var Post = Parse.Object.extend("UpdateDelete");
$("#post-form").submit(function(event) {
    event.preventDefault();
    var Firstname = $("#post-fname").val();
    var Lastname = $("#post-lname").val();
    var Image = $("#post-image").val();

    var new_post = new Post;

    new_post.set("Firstname", Firstname);
    new_post.set("Lastname", Lastname);
    var fileElement = $("#post-image")[0];
    var filePath = $("#post-image").val();
    var fileName = filePath.split("\\").pop();
    console.log("sumbit for post clicked");

    if (fileElement.files.length > 0) {
        var file = fileElement.files[0];
        var newFile = new Parse.File(fileName, file);
        newFile.save({
            success: function() {
                console.log("Inserted");
            },
            error: function(file, error) {
                console.log("Error");
            }

        }).then(function(theFile) {

            new_post.set("Image", theFile);
            new_post.save({
                success: function() {
                    console.log("Image Saved");
                },
                error: function(error) {
                    console.log("Post Save with file error " + error.message);
                }
            });
        });

    } else {

        new_post.save(Firstname, Lastname, {
            success: function(new_post) {
                console.log("All posted");
                getPosts();
            },
            error: function(new_post, error) {
                console.log("Error" + error.message);
            }
        });

    }
});


// deleting item form list
$("#list-posts").on("click", "#delitem", function() {

    close();
    var id = $(this).attr("href");
    console.log("ID retrieved" + id);
    var query = new Parse.Query(Post);
    var delobj = id;

    query.equalTo("objectId", id);
    query.get(delobj, {

        success: function(delobj) {

            delobj.destroy({});
            location.reload();
            console.log("Object deleted successfully");

        },
        error: function(delobj, error) {
            console.log("error deleting");
        }

    });
});

function showDialog() {
    $("#list-posts").on("click", "#showDialog()", function(e) {
        e.preventDefault();
        var x = document.getElementById("myDialog");

        function showDialog() {
            x.show();
        }
    })
}

// Retrieving
function getPosts() {
    var query = new Parse.Query(Post);
    query.find({

        success: function(results) {
            console.log("Retrieving");
            var output = "";
            for (var i in results) {

                var Firstname = results[i].get("Firstname");
                var Lastname = results[i].get("Lastname");

                var id = results[i].id;
                //                     console.log(results[i].get("file"));
                var img = "";


                if (results[i].get("Image")) {
                    var file = results[i].get("Image");
                    var url = file.url();
                    console.log("url:" + url);

                    img = "<img src='" + url + "' style='width:170px;height:170px; margin:20px 10px'/>";
                }
                output += "<li style= 'list-style-type:circle' reversed='reversed' >";
                output += "<h3 id='Firstname' href='" + id + "'>" + Firstname + "</h3>";

                output += "<li style= 'list-style-type:circle' reversed='reversed' >";
                output += "<h3 id='Lastname' href='" + id + "' >" + Lastname + "</h3>";
                output += img;
                output += "<button id='delitem' href='" + id + "' style='display:inline-block; margin:20px 10px'>delete</button>";
                output += "<button  id='mydialog' style='display:inline-block; margin:20px 10px'>User Info</button>";
                output += "<dialog id='myDialog'> This is dialog window</dialog>";

                output += "<button id='modals_close' style='display:inline-block; margin:20px 10px'>Close Info</button>";
                output += "</li>";


                $("#list-posts").html(output);
            };
        },
        error: function(error) {
            console.log("Query Error" + error.message);
        }
    });
}
getPosts();

Answer 1

首先：遍历项目列表并为每个项目创建HTML。此HTML包含具有ID的DOM元素。因此，HTML中会多次出现一个ID，这是不允许的。改为使用类。

关闭<LI>标记的数量与开放标记的数量不同。

我根据您提供的代码创建了一个小提琴：https://jsfiddle.net/1muc0460/
但是由于访问api.parse.com是未经授权的（由于初始化失败，因为我们需要一个app-key和一个js-id），所以我们无法与之相提并论。

它有很多错误。包含特殊字符的选择器。函数定义中的函数定义具有相同的名称。那些添加事件处理程序，但从不调用（初始化）。

我开始修理：https://jsfiddle.net/1muc0460/1/
但我放弃了。我不知道你想要追求什么逻辑，所以很难修复。我添加了一个测试项目，你的JS会创建，但你的按钮都没有任何效果。

只要您提供正确的功能代码，我就可以更新此答案。

关闭特定内容而不从数据库中删除

1 个答案: