Как изменить текст элемента, но чтобы он оставался при перезагрузке страницы?

Question

[Johnny Show]

Есть чекбокс, который обрабатывается аяксом. Осуществил показ текста при разном положении чекбокса(нет галочки = текст- "Открыто", есть - "Закрыто"). Ставлю галочку,текст "Закрыто"появляется, но при перезагрузки страницы текст ссбрасывает на "Открыто", галочка стоит.

За ранее благодарю за отведенное внимание на мой вопрос.
Собственно код:
шаблон:

<td>
                    <input type="checkbox" id="itemStatus_{$item['id']}"  {if $item['status']}checked="checked"{/if} onclick="updateOrderStatus('{$item['id']}');"/>
                    <p class="msg">Открыт</p>
</td>

файл js:

function updateOrderStatus(itemId) {
    var status = $('#itemStatus_' + itemId).attr('checked');

    if(!status) {
        status = 0;
       
    }else {
        status = 1;
        $('.msg').text('Закрыт');

    }
    var postData = { itemId: itemId, status: status};

    $.ajax({

        type: 'POST',
        async: true,
        url: '/admin/setorderstatus/',
        data: postData,
        dataType: 'json',
        success:function (data) {
            if(!data['success']) {
                alert(data['message']);
            }

        }
    });
}

controller:
/**
* Установление нового статуса заказа
*/

function setOrderStatusAction() {

    $itemId = $_POST['itemId'];
    
    $status = $_POST['status'];

    $res = updateOrderStatus($itemId,$status);

    if($res) {
        $resData['success'] = 1;
    }else {
        $resData['success'] = 0;
        $resData['message'] = 'Ошибка установки статуса';
    }

    echo json_encode($resData);
    return;
}

Answer 1

[Exploding]

Перечитал внимательней:)
Через css сделайте с помощью :after для чекбокса. Текст кириллицу с помощью конвертера юникода сгенерите.
И на странице будет меньше"мусора" для ПС и париться не надо будет с переключениями статусов текстовых.

Comments

[Johnny Show]

через css не получилось,т.к. там нужна привязка к ID

[Exploding]

Johnny Show, что за... Какая ещё привязка к id? У вас состояние чекбокса при перезагрузке страницы сохраняется?

[Johnny Show]

Exploding, да

[Johnny Show]

Exploding, через after получилось только показывать текст ,когда статус 1, а при 0 - текст не получилось вывести, так же не понял как тот текст можно было расположить в удобном месте,а не на самой галочке. При обновлении браузера,текст не слетал:)

[Exploding]

Johnny Show, Ну вот типа такого...

<style>
input.block-info{
	position: relative;
}


input.block-info:after{
	display: block;
	position: absolute;
	content: "Close";
	padding: 10px;
    color: #949494;
    background-color: #F1F1F1;
    border-radius: 3px;
    box-shadow: 0 1px 3px 1px #aaa;
    margin: 150% 0;
}

input.block-info:checked:after{
	content: "Open";
}
</style>
<input type="checkbox" class="block-info">

[Johnny Show]

Exploding, спасибо за подробный ответ.Вчера всё же понял как можно изменять положения текста,добавив ему св-во display:block, ну а там двигать паддингом.

[Exploding]

Johnny Show, Только не паддингом, а маргином:)

[Johnny Show]

Exploding, можно было и тем и тем, но у меня в коде стоит паддинг:)

[Exploding]

Johnny Show, ну просто если установить элементу, который "двигаешь" паддингом какой-то видимый бордер, то станет понятно, что это на самом деле за "передвижение"

[Johnny Show]

Exploding, хах, ты абсолютно прав!! это лемент инпута:))) Снимаю шляпу,сэр,твой вариант железобетонный:))

[Johnny Show]

Exploding, посмотрел твой код ,прикольно получается ,вроде кнопки) Ну а себе я просто текст поставил,т.к. чекбокс в таблице находится.В общем там можно много чего придумать.Осталось при помощи JS глянуть,как посоветовал KorniloFF.

[Exploding]

Johnny Show, Просто я, как правило, стараюсь поменьше юзать js если это можно сделать с использованием css. А с css3 о-го-го сколько всего можно переложить с js на css.

[Exploding]

Johnny Show, В таблице? А зачем в принципе там чекбокс и ещё и надпись?)) Не проще ли использовать иконку например замка: открыт/закрыт? И нагрузка на браузер меньше будет и места свободного будет больше гораздо... Ну это так... К слову))

[Johnny Show]

Exploding, я просматриваю видеоматериалы по созданию учебного инет-магазина от автора Дмитрия Афанасьева,если интересно вот ссыль: https://www.youtube.com/channel/UCLwG2LUXE5-o5q-8u...
Собственно сама таблица:


Дальше можно много чего сделать. Cуть этих видео понять логику построения и набивать руку.. :)
Очень хорошо что есть такие форумы как Тостер, в котором можно спросить совета и пообщаться на эти темы:)

[Johnny Show]

Exploding, а чем плохо частое использование js?

[Exploding]

Johnny Show, я думал у меня плохо с проектированием интерфейсов, но увидев скрин отошел в сторонку покурить...)) Понятно, что это обучающая версия, но хотябы padding то можно поставить и мин. ширину для ячеек...
Про js: я не имел ввиду часто - значит плохо))) Каждая задача индивидуальна и где-то js необходим (например сложные анимации с canvas или без него, просто сложные, обработка событий), а в случаях с такими мелочами как hover-эффекты, показать/скрыть и прочая дребедень js является попросту лишней "прокладкой". Js ведь по сути никаких "тайных приемов" для этого не использует. С помощью него вы так же само управляете css-свойствами элемента! По этому я и говорю, зачем юзать js тратя на него доп. ресурсы системы в тех случаях, когда можно без него обойтись.
Например в библиотеке jquery есть метод .animate и он весьма полезен, но его можно сказать, в 90% используют не по назначению!!! И также есть масса заготовок анимации для show/hide эффектов, НО это было выпущено когда css еще не имел поддержки той, что есть сейчас в css3 для работы с анимацией! И вообще считается большим грехом использовать их для таких простых вариантов анимации как обычный show/hide! Css справляется ГОРАЗДО лучше с этими задачами (т.к. вообще разные подходы к реализации)... А jquery-ui анимацию в первую очередь, и наверно единственную, нужно использовать для "составных", "сложных" анимаций (как-то так я это назову:)), где css анимация невозможна или крайне геморна! Короче долго тут все это писать... Читайте больше мануалов по тем технологиям с которыми работаете:)

Answer 2

[Stalker_RED]

Точно так-же как вы делаете if (status) checked можно сделать и с открыт/закрыт.

Answer 3

[Павел Корнилов]

Есть чекбокс, который обрабатывается аяксом. Осуществил показ текста при разном положении чекбокса(нет галочки = текст- "Открыто", есть - "Закрыто"). Ставлю галочку,текст "Закрыто"появляется, но при перезагрузки страницы текст ссбрасывает на "Открыто", галочка стоит.

Самое простое - сохранять значение checked в кукисах. А потом, при загрузке страницы, проверять кукис и ставить нужное значение динамически. Т.о. достигается, что для каждого пользователя будет его уникальное значение.

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

Comments

[Johnny Show]

попробовал так реализовать - не получилось:\

function updateOrderStatus(itemId) {
    var status = $('#itemStatus_' + itemId).attr('checked');
    var checkIn = $('#itemStatus_' + itemId);

    if(!status) {
        status = 0;

        checkIn.append('<p>Открыт</p>');
    }else {
        status = 1;
        checkIn.append('<p>Закрыт</p>');
    }
    var postData = { itemId: itemId, status: status, checkIn: checkIn};

    $.ajax({

        type: 'POST',
        async: true,
        url: '/admin/setorderstatus/',
        data: postData,
        dataType: 'json',
        success:function (data) {
            if(!data['success']) {
                alert(data['message']);
            }

        }
    });
}

[Павел Корнилов]

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

[Johnny Show]

KorniloFF, есть привязка. Есть авторизованный пользователь,который может в админке настроить заказы. Статус чекбокса у меня удачно заносится в базу, т.к. идёт привязка к ИД товара.При обновлении чеккед не слетает,как это случается с текстом под чекбоксом. Или ты имеешь ввиду привязку в БД? Потову как привязку текста в БД посчитал лишним.

[Павел Корнилов]

Johnny Show, c привязкой к Юзеру понял. Но лишним тут является запрос серверу. Лучше, повторюсь, такие данные хранить на клиенте.

[Johnny Show]

Johnny Show, KorniloFF, хорошо.Надо будет подумать как это реализовать.Спасибо за подсказку..

[Johnny Show]

KorniloFF, я понял как можно было реализовать с помощью сss:
Добавил класс в инпут,т.к. через ИД,который есть не работало.Осталось понять как можно перемещать тот текст. :)) жаль что не смог понять как реализовать при помощи JS а лучше Jquery :\ Если кто подскажет,тому + к карме:)
.my_checkbox:checked::after{
content: "Закрыт";
}
.my_checkbox::after{
content: "Открыт";
}

[Павел Корнилов]

Johnny Show, да как еще подсказать?
На onchange чекбокса навесьте
$.cookie(this.id, this.checked);
Потом проверяйте:
el.checked = $.cookie(el.id);
Вы мои ответы вообще читаете???

[Johnny Show]

KorniloFF, читаю все ответы.:) Вчера понял как можно реализовать при помощи css, благодаря подсказкой Exploding , сейчас попробую и твой метод. Думаю вопрос можно закрыть решеннным. сем спасибо!:)

[Павел Корнилов]

Вот вам готовый код:

<script src="https://cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js"></script>

<div id="ch">
	<label><input id=ch1 type="checkbox">Checkbox</label>
	<label><input id=ch2 type="checkbox">Checkbox</label>
	<label><input id=ch3 type="checkbox">Checkbox</label>
</div>

<script type="text/javascript">

function saveChecked() {
	$.cookie(this.id, this.checked);
	console.log($.cookie(this.id));
};

window.addEventListener('load', function(e) {
	document.querySelectorAll('#ch input[type=checkbox]').forEach(function(i) {
		i.onchange = saveChecked;
		i.checked = $.cookie(i.id) === 'true';
	})
});

</script>

[Johnny Show]

KorniloFF, ого,ну спаибооо. Осталось теперь разобрать js потому как давно проходил изучениею

[Павел Корнилов]

Johnny Show, на здоровье!
Вставьте код целиком для начала, посмотрите как работает, думаю, всё как нужно будет. Я тестировал.
Сейчас для своего сайта решил статью на эту тему написать, ссылку потом выложу. Я там код оптимизирую для меньшего потребления памяти.