У меня есть форма и таблица на той же странице, как я могу использовать форму для обновления таблицы. Express / Node.js - PullRequest
0 голосов
/ 14 сентября 2018

Я очень новичок в разработке веб-сайтов, и я в настоящее время застрял на этой проблеме.

Что я пытаюсь сделать, я создаю поисковую страницу для веб-сайта.Я хочу использовать форму, чтобы позволить пользователю выбрать местоположение или категорию, а затем обновить ту же страницу с результатами.

Я уже создал сторону узла и могу получить желаемые результаты иззапрашивает мою базу данных, но когда я пытаюсь отобразить страницу с моими новыми результатами, она как бы обновляется в состояние по умолчанию.

Любая помощь будет оценена:)

Ниже мой html или.Страница ejs

<form method="post" action="/search" enctype="multipart/form-data" id="newListingForm">
        <label>Keyword</label>
        <br>
        <input type ="text" name="searchKeyword">
        <br>
        <label>Location</label>
        <br>
        <select name="searchLocation">
                <option value="Default">Default</option>
                <option value="Auckland">Auckland</option>
                <option value="Wellington">Wellington</option>
                <option value="Christchurch">Christchurch</option>
                <option value="Test">Test</option>
              </select>
        <br>
        <label>Catergory</label>
        <br>
        <select name="searchCategory">
                <option value="Default">Default</option>
                <option value="Landscaping">Landscaping</option>
                <option value="Construction">Construction</option>
                <option value="Automotive">Automotive</option>
                <option value="Test">Test</option>
              </select>        
        <br>
        <input type="submit" value="Submit">
    </form>

    <table>
        <% for(var i = 0; i < listingResults.length; i++) { %>
        <tr>
            <td>
                <%= listingResults[i].name %>
            </td>
            <td>
                <%= listingResults[i].serviceid %>
            </td>
            <td>
                <%= listingResults[i].category %>
            </td>
            <td>
                <%= listingResults[i].location %>
            </td>
            <td>
                <%= listingResults[i].description %>
            </td>
            <td>
                <%for (var image in listingResults[i].imageFiles){%>
                <img src="/temp/<%= listingResults[i].imageFiles[image] %>" alt="" height="100">
                <%}%>
            </td>
        </tr>
        <% } %>
    </table>

Это то, что я звоню в моем поисковике

router.get('/search', (req, res) => {
    let listingResults = [];
    const singleListing = {
        serviceid: 0,
        name: 'asd ', // Selected in step 3
        location: ' asd',
        category: ' asd',
        description: ' asd',
        imageFiles: [], // Create empty array for holding filenames for the images
    };
    listingResults.push(singleListing);
    res.render('search.ejs', { listingResults });
});

router.post('/search', findServices, renderSearchPage, (req, res) => {});

function findServices(req, res, next) {
    console.log(req);
    const searchParamaters = {
        location: req.body.searchLocation,
        category: req.body.searchCategory,
        keywords: req.body.searchKeywords,
    };

    console.log('search params', searchParamaters);

    let condition = [];
    const queryLocationService = `Location='${searchParamaters.location}'`;
    condition.push(queryLocationService);
    const queryCategoryService = `Category='${searchParamaters.category}'`;
    condition.push(queryCategoryService);
    condition.join(' AND ');

    let conditionString = condition.join(' AND ');
    console.log(conditionString);
    let sql = `SELECT * FROM website_user.Service WHERE ${conditionString}`;
    console.log(sql);
    connection.query(sql, (err, results) => {
        console.log(results);
        req.services = results;
        return next();
    });
}

function renderSearchPage(req, res) {
    let listingResults = [];
    let count = 0;
    // console.log('req length', req.services.length);
    req.services.forEach((service) => {
        // Step 4) Create a statement that will gather all the photos that are related to a aervice
        const queryPhotos = `SELECT * FROM Photo WHERE Service_ID = ${service.Service_ID}`;
        connection.query(queryPhotos, (err4, results4) => {
            // Create a singleListing object that holds the information required
            const singleListing = {
                serviceid: service.Service_ID,
                name: service.Title, // Selected in step 3
                location: service.Location,
                category: service.Category,
                description: service.Description,
                imageFiles: [], // Create empty array for holding filenames for the images
            };
            results4.forEach((element) => { // For each result of the photo query (results3):
                const filename = `${uuid()}.${element.Extension}`; // Create a filename
                singleListing.imageFiles.push(filename); // Add filename to array in singleListing object
                // Write the file to the temp directory
                fs.writeFile(`app/public/temp/${filename}`, element.Photo_Blob, (err5) => {
                    if (err5) throw err5;
                });
            });

            listingResults.push({ singleListing });
            // console.log('listing results', listingResults);
            count += 1;
            if (count === req.services.length) { // Once all the services has been looped through and added
                console.log('hit render ', listingResults);
                res.render('search.ejs', { listingResults });
                // Must be rendered in this step otherwise it wont work for some reason..
            }
        });
    });
}

1 Ответ

0 голосов
/ 14 сентября 2018

Похоже, вы вызываете res.render () внутри цикла forEach (). Это неправильный подход. Вы должны вызывать res.render () только один раз. Вы получаете 1 запрос, вы отправляете 1 ответ методом res.render ().

Обновлен. Извините, я пропустил, вы написали условие для решения, которое я написал раньше.

Полагаю, вам следует вызывать res.render () после forEach, а не внутри. Это уточнит код. И вы не пропустите ни одной проблемы с условием.

Обновлено снова.

Теперь у меня есть обратный вызов - причина, по которой res.render внутри forEach. Я обычно использую функции async / await, чтобы избежать ада обратного вызова.

Что вы отправляете обратно, если либо нет доступных служб, либо возникает ошибка?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...