Блог

Хорошо, итак, для class я должен создать CRUD-приложение в основном. У меня должна быть панель навигации, которая ссылается на разные «страницы», загружаемые с помощью server.js файл. На этом сервере я загружаю файл JSON, который содержит два массива, один для страниц или разделов, а другой для пользователей. Цель состоит в том, чтобы ввести информацию о пользователе в один раздел, нажать кнопку, а затем информация об этом пользователе будет указана в другом разделе. Вы также должны иметь возможность удалять каждого отдельного пользователя по желанию, и все это локально.

Моя проблема в том, что у меня есть функция addUser, и внутри этой функции есть прослушиватель щелчков для кнопки добавить. Прямо сейчас, единственное, что он делает, когда на него нужно нажать, это выдает console.log , но я не могу заставить это работать. Функция addUser также имеет консоль.журнал, который работает нормально, и я полагаю, что моя проблема в том, что я не знаю, где я должен добавлять функцию addUser в свой код. На всякий случай я продолжу и перечислю весь свой код. Во-первых, это server.js:

  var SERVER = (function(){
    //variable to store data.users into
    var _userData = [];
    var _sectionData = [];

    //getting the data and putting it into the variables above
    var _loadData = function(){
        $.getJSON("./data/data.json", function(data){
             _userData = data.Users;
             _sectionData = data.Sections;

             //console.log(_sectionData);
        })
    }

    var _showData = function(){
        return _userData;
    }

    var _getSection = function(sectionYouWant){
        let sec = {};
        $.each(_sectionData, function(idx, section){
            if(section.sectionName == sectionYouWant){
                sec = section.sectionContent;
            }
        });
        return sec;
    }

    _loadData();

    return {
        loadData: _loadData,
        showData: _showData,
        getSection: _getSection
    }
})()
  

далее следует app.js

     function addUser(){
    console.log("firing addUser");

    $('#addButton').click(function(e){
        console.log("are you working????")
        e.preventDefault();
    })
}

function initNavListeners(){
    $("#home").click(function(e){
        //console.log('click home');
        var sectionData = SERVER.getSection('home');
        $('.wrapper').html(sectionData);
    });

    $("#view").click(function(){
        //console.log('click view users');
        var userData = SERVER.showData();
        var sectionData = SERVER.getSection('view');

        $(".wrapper").html(sectionData);

        function showUsers(){
            $.each(userData, function(idx, user){
                $(".wrapper").append(`
                <br/><p><b>Name:</b> ${user.fName} ${user.lName}</p>

                <p><b>Email Address:</b>
                ${user.email}</p>

                <p><b>Twitter Handle:</b>
                ${user.twitter}</p>

                <button class="delete" id=${idx}>DELETE</button><br/>`)
            })
        }

        showUsers();

    });

    $("#register").click(function(e){
        //console.log('click register');
        addUser();
        var sectionData = SERVER.getSection('register');
        $('.wrapper').html(sectionData);
    });
}

$(document).ready(function(){
    SERVER.loadData();
    initNavListeners();

    var sectionData = SERVER.getSection('home');
    $('.wrapper').html(sectionData);
})
  

Наконец, JSON:

     {
    "Users": [
        {
            "fName": "Andrea",
            "lName": "Trigg",
            "email": "at@users.com",
            "twitter": "@at"
        }
    ],
    "Sections": [
        {
            "sectionName": "home",
            "sectionContent": "<h1>HOME</h1><p>Welcome to the home page for my Homework 5 assignment! In this little application, you can register users and it will be submitted to a local JSON file. Then when you go to the view users page, it will show all the current users registered. You can also delete each individual user by pressing the "delete user" button below their information.</p><p>I hope this will work on your machine because it definitely works on mine!</p><p>I'm honestly not sure what else I should put here, so have a gif of a cute kitten trying to eat their own tail.</p><img src="https://i.pinimg.com/originals/84/c8/ba/84c8bab01787f2ee1ebef1378e9e8444.gif"><p>I hope you have a great week! Thank you for taking a look at my Homework 5!</p>"
        },
        {
            "sectionName": "view",
            "sectionContent": "<h1>VIEW USERS</h1><p>Scroll below to see all users stored in the database. Click the delete button to delete a user from the database (careful, you won't get the information back if you delete!)</p>"
        },
        {
            "sectionName": "register",
            "sectionContent": "<h1>REGISTER</h1><p>Register a new user by using the form below!</p><form><input id="first" type="text" value="" placeholder="First Name:"><br/><input id="last" type="text" value="" placeholder="Last Name:"><br/><input id="emailAddress" type="text" value="" placeholder="Email:"><br/><input id="twitterHandle" type="text" value="" placeholder="Twitter Handle"><br/><input id="addButton" type="button" value="SUBMIT"></form>"
        }
    ]
}
  

Если вы видите что-либо, что может быть причиной того, что мой прослушиватель кликов не работает, в то время как сама функция работает, это было бы огромной помощью. Я действительно борюсь с этим, поэтому любая помощь была бы отличной! Спасибо!

Вау, хорошо, проработав над этим три часа, я, наконец, понял это.

Итак, по сути, вы берете функцию addUser и вместо того, чтобы делать ее глобальной, помещаете ее в прослушиватель кликов #register, который находится в initNavListener. Это должно выглядеть примерно так:

 $("#register").click(function(e){
        //initListeners();
        //console.log('click register');
        var userData = SERVER.showData();
        var sectionData = SERVER.getSection('register');
        $('.wrapper').html(sectionData);

        function addUser(){
            console.log("firing addUser");

            $('#addButton').click(function(e){
                console.log("are you working????")
                e.preventDefault(); )}
  

Прямо сейчас я чувствую себя самым большим идиотом: ‘D

ETA: Если кто-нибудь хочет помочь мне разобраться, как удалить этих пользователей, это было бы здорово, но это не указано в рубрике как что-то, что мне нужно сделать, поэтому я не придаю этому особого значения atm.