@SaDiSST

AJAX: отрисовка полученных записей на лету. Как?

Здрасте, Тостер!
Настала и для меня пора задать свой вопрос уважаемым господам.
Заранее прошу прощения за возможную глупость: я лишь начинающий кодер (программистом у меня, при всём желании, язык еще не повернется себя назвать). Если для тебя, уважаемый, моя ситуация напомнит пословицу "заблудиться в трех соснах", то знай: я в этих соснах блуждаю уже 3 или 4 день, периодически стучась о них головой. Итак, к делу:

Начну с кода:

.js:
function makeRecord(id) {
    var name    = $('#recorderName_'    + id).val();
    var email   = $('#recorderEmail_'   + id).val();
    var phone   = $('#recorderPhone_'   + id).val();
    var specId  = $('#recordToSpec_'    + id).val();
    var recId   = $('#recordId_'        + id).val();
    var time    = $('#recordedToTime_'  + id).val();

    var postData = {
        name:   name,
        email:  email,
        phone:  phone,
        time:   time,
        specId: specId
    };
    $.ajax({
        type: 'POST',
        url: "/index/createnewrecord/",
        data: postData,
        dataType: 'json',
        success: function(data) {
            if(data['success']) {
                alert(data['message']);
            } else {
                alert(data['message']);
            }
        }
    });
}


HTML:
<div class="specialist">
    <table cellspacing="2" cellpadding="2" border="1" width="90%">
        <tr>
            <th>Специальность</th>
            <th>ФИО</th>
            <th>Запись</th>
        </tr>

    {*Показываем каждого специалиста*}
    {foreach $specialists as $specialist name=ppls}
        <form action="/index/createnewrecord/" method="POST" id="newRecord">
            <tr>
                <td>{$specialist['speciality']}</td>
                <td>{$specialist['name']}</td>
                <td><a href="#" onClick="startNewRecord('{$specialist['id']}'); return false;">Записаться на прием</a></td>
            </tr>

        {*Таблица для записи к специалисту*}
            <tr class="hideme" id="newRecordTo_{$specialist['id']}">
                <td colspan="3">
                    <table border="1" cellpadding="1" cellspacing="1" width="100%">
                        <tr>
                            <th>Ваше ФИО</th>
                            <th>Телефон</th>
                            <th>e-mail</th>
                            <th>Дата+Время записи</th>
                            <th>&nbsp;</th>
                        </tr>
                        <tr>
                            <td><input      type="text"     id="recorderName_{$specialist['id']}"></td>
                            <td>+7 <input   type="text"     id="recorderPhone_{$specialist['id']}"></td>
                            <td><input      type="email"    id="recorderEmail_{$specialist['id']}"></td>
                            <td><input      type="datetime" id="recordedToTime_{$specialist['id']}"></td>
                            <td>
                                <input      type="hidden"   value="{$specialist['id']}" id="recordToSpec_{$specialist['id']}">
                                <input      type="button"   value="Записаться!" onClick="makeRecord('{$specialist['id']}');">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </form>
        {/foreach}
        </table>
    </div>
{/if}

{*Если есть записи, показываем*}
{if isset($records) && $records !== 0}
<div id="displayRecords">
    <table cellpadding="4" cellspacing="3" border="2" width="65%">
        <tr>
            <th>#</th>
            <th>Записан на</th>
            <th>Запись от</th>
            <th>Специалист</th>
        </tr>

        {*Показываем каждую запись*}
        {foreach $records as $record name=records}
            <tr>
                <td>
                    <a href="#" onClick="showInfo('{$record['id']}'); return false;">#{$smarty.foreach.records.iteration}</a>
                </td>
                <td>{$record['date_recorded']}</td>
                <td>{$record['when_recorded']}</td>
                <td>{$record['to_whom']}</td>
            </tr>

            {*Подробности записей*}
            <tr class="hideme" id="recordId_{$record['id']}">
                <td colspan="4">
                    <table border="1" cellspacing="4" cellpadding="4" width="100%">
                        <tr>
                            <th>Записавшийся</th>
                            <th>e-mail</th>
                            <th>Телефон</th>
                        </tr>
                        <tr>
                            <td>
                                <input type="hidden" name="recorderName_{$record['id']}" value="{$record['who']}">
                                {$record['who']}
                            </td>
                            <td>{$record['email']}</td>
                            <td>{$record['phone']}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        {/foreach}
    </table>
</div>
{/if}


PHP:
function createnewrecordAction() {

    $resData = null;

    $name   = isset($_POST['name'])     ? trim($_POST['name'])          : null;
    $email  = isset($_POST['email'])    ? trim($_POST['email'])         : null;
    $phone  = isset($_POST['phone'])    ? trim(intval($_POST['phone'])) : null;
    $time   = isset($_POST['time'])     ? $_POST['time']                : null;
    $specId = isset($_POST['specId'])   ? $_POST['specId']              : null;

    $resData    = checkRecordParams($name, $email, $phone, $time, $specId);


    if(!$resData) {
        $record = makeNewRecord($name, $email, $phone, $time, $specId);

        if($record['success']) {
            $resData['success'] = true;
            $resData['message'] = 'Заявка подана';
        } else {
            $resData['success'] = false;
            $resData['message'] = 'Пожалуйста, проверьте поля ввода';
        }
    }

    echo json_encode($resData);
}


В общем, мне нужно отрисовать свежие записи AJAX'ом, без перезагрузки. Про .append() и .html(), разумеется, слыхал. Более того, пытался действовать именно через них, но то ли из за недостатка ума, то ли из за переизбытка хромосом, ничего дельного так и не смог сотворить. Помогите, а?

P.S.: Предложения по оптимизации кода принимаются также. Вдруг возникнут.

Заранее благодарю.
С уважением,
SaDiSST.
  • Вопрос задан
  • 727 просмотров
Пригласить эксперта
Ответы на вопрос 2
trushka
@trushka
PHP пусть возвращает не json, а банальный html - используйте тот же код, что {*Показываем каждую запись*}. А потом вставляете в таблицу$('#displayRecords').append(data) Только dataType: 'json' в запросе указовать тогда не нужно
Ответ написан
@SaDiSST Автор вопроса
trushka: Я частично реализовал то, что предложили Вы, однако, оставил json. Я немного переделал логику отрисовки страниц и ajax'ов, и в связи с этим возник вопрос, но сначала код. Обратите внимание на input="button" .display :

HTML:
spoiler
<table cellpadding="4" cellspacing="3" border="2" width="65%"  class="displayRecords">
        <tr>
            <th>show</th>
            <th>Заявка на</th>
            <th>К специалисту</th>
        </tr>

        {*Показываем каждую запись*}
        {foreach $records as $record name=records}
            <tr>
                <td>
                    <!--<input type="hidden" id="record_{$record['id']}" value="{$record['id']}">-->
                    <input type='button' onClick="displRec();" value='info' class="display">
                </td>
                <td>{$record['date_recorded']}</td>
                <td>{$record['to_whom']}</td>
            </tr>

            {*Подробности записей*}
            <tr class="hideme" id="addInfo">
                <td colspan="4">
                    <table border="1" cellspacing="4" cellpadding="4" width="100%">
                        <tr>
                            <th>Записавшийся</th>
                            <th>e-mail</th>
                            <th>Телефон</th>
                        </tr>
                        <tr>
                            <td>
                                <input type="hidden" name="" value="">
                                {$record['who']}
                            </td>
                            <td>{$record['email']}</td>
                            <td>{$record['phone']}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        {/foreach}
    </table>


JS:
spoiler
function displRec() {
    $('.display').on('click', function() {
        if($(this).next('#addInfo').css('display') != 'table-row'){
            $(this).next('#addInfo').show();
        } else {
            $(this).next('#addInfo').hide();
        }
    });
}


В общем, я пытаюсь не передавая ID на кнопку извлечь данные по записи. На .next() внимания можно не обращать - неудачный эксперимент, как и .parent().parent(), и так далее. Вопрос в том, как это можно реализовать. Поможете?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы