как сделать щелчок один раз, а затем переключить и убедиться, что CSS переключения наступает после загрузки таблицы?

Question

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

PS: я новичок в javascript и, пожалуйста, простите, спасибо, а также, пожалуйста, не обращайте внимания на мои ужасные engli sh.

вот моя функция переключения

    function toggleSetting(setting, ctrl) {

        var stt = document.getElementById(setting);
        if (stt.style.display == 'none') {
            stt.style.display = '';
            ctrl.className = "accordion2";
        }
        else {
            stt.style.display = 'none';
            ctrl.className = "accordion";
        }           
    }

вот мой код для javascript функции

        $("#tableAOnce").one("click", (function () {
            
            $.ajax({
                type: "POST",
                url: "AccInfo.ashx",
                success: function (output) {
                    try {
                        output = JSON.parse(output);
                        DrawTable(output);
                        toggleSetting('toggleSBook', this); 
                        //alert(output);

                    }
                    catch (ex) {
                        alert("error");
                        $('#tableA').empty();
                    }
                }
                , complete: function (data) {
                    
                    
                }
            });

таблица в функции DrawTable - это таблица, нарисованная с помощью построителя строк и дополнения.

function DrawTable(output){
            var general = output;
            var sb = new StringBuilder();
            sb.append("<table>");
            sb.append("<tr>");
            sb.append("<td>");
            sb.append("</td>");
            sb.append("</tr >");
            sb.append("</table>");
            $('#tableA').empty().html(sb.toString());
}

это мой код для основной таблицы

        <table>
            <tr>
                <td>
                    <table id="tableAOnce" class="accordion" onclick="toggleSetting('toggleTab',this)" >
                    <tr>
                        <td align="left">Table1</td>
                    </tr>
                    </table>
                </td>
            </tr>
            <tr style="display:none;" id="toggleTab" >
                <td>
                    <table id="tableA"></table>
                </td>
            </tr>
        </table>

Я пытался полностью использовать функцию toggleSetting: function (data ), но это не сработает.

Answer 1

Во-первых, вы, кажется, упустили директиву веб-метода для своей общей функции. Таким образом, ваш вызов ajax должен включать веб-метод. например:

[WebMethod]  
Public static function toggleSetting(setting, ctrl) {

Но вызов ajax означает, что ваш код будет работать нормально, но вы не можете обновить какие-либо атрибуты управления, потому что веб-страница не была отправлена ​​/ отправлена ​​на сервер. Таким образом, веб-страница и элементы управления остаются на рабочем столе пользователей.

Вы можете вызывать код своего сервера, но он не может изменять элементы управления, поскольку вся веб-страница не была отправлена ​​на сервер (она все еще находится в браузере).

Таким образом, ваша текущая настройка кода требует публикации на обратной стороне страницы. Или, по крайней мере, часть страницы с настраиваемыми элементами управления. Это предполагает, что вы также можете использовать панель обновлений, и ваш код кнопки больше не ajax или JS. Итак, вы можете разместить обычную кнопку asp, которая возвращает пакет обратно. А панель обновления означает частичную обратную публикацию, поэтому и кнопка, и таблица должны находиться внутри этой панели обновления, чтобы это работало. Это означает, что страница и обратная публикация происходит, но ТОЛЬКО то, что находится внутри панели обновлений, передается на сервер.

Другой способ? Не звоните на сервер. Сделайте эту клиентскую сторону как js, и тогда вам не нужно или не нужно вызывать код на стороне сервера. И, таким образом, вам не потребуется никаких сообщений (полная или частичная с панелью обновлений). Итак, я бы подумал о том, чтобы написать функцию в js, а не вызывать код позади (на стороне сервера). Тем не менее, я, к сожалению, считаю, что с js довольно сложно работать, но лучше всего подойдет 100% клиентский код. В конце концов, если вы собираетесь запускать какой-либо код после скрытия / отображения данного элемента управления (на стороне клиента), то, в конечном итоге, если ЛЮБОЙ код должен запускать серверную сторону и устанавливать или работать с этими элементами управления, тогда потребуется обратная передача .

И ваш ajax пост должен включать веб-метод в URL, например:

        $.ajax({
            type: "POST",
            url: "AccInfo.ashx/toggleSetting",
            data: {setting: "some value",
                  ctrl:  "some value"}

обратите внимание ОЧЕНЬ ОЧЕНЬ осторожно, как в приведенной выше строке json имена быть такими же, как параметры, которые у вас есть для функции на стороне сервера.

Но без обратной отправки? Настройки будут происходить на стороне сервера, но любая публикация со стороны клиента отправит всю веб-страницу в ее текущем состоянии, а измененные значения на стороне сервера управления будут перезаписаны. Поэтому лучше думать, что у вас есть копия веб-страницы на стороне клиента, а затем одна на стороне сервера. Изменения на серверной копии веб-страницы будут переписаны любой обратной связью. И изменения на стороне сервера НЕ появятся до тех пор, пока копия веб-страницы на стороне сервера не будет отправлена ​​обратно клиенту.

У вас есть: Веб-страница на стороне клиента. Измените вещи, элементы управления и т. Д. c. сторона клиента. пост-назад. Веб-страница отправляется на сервер. Выполняется код позади (возможно, обновляет веб-страницу), а затем ВСЕ страница отправляется обратно в браузер. Таким образом, вы не можете запускать серверный код, который обновляет элементы управления, если веб-страница не отправлена ​​на сервер. Если вы нарушите это правило, то у вас будут внесены изменения на стороне клиента и на стороне сервера - но две страницы сейчас не синхронизированы c.

Измените атрибуты стиля на 100% клиентской стороне. Таким образом, в js вы можете сделать то же, что и ваш c# серверный код, примерно так:

function ShowUpload() {
               var JUpload = document.getElementById('<%=UploadFiles.ClientID%>')
               JUpload.style.display = "inline";
               return false;
           }

С jquery, тогда вы можете go:

        function mysetter(ctrl, setting, value) {
            $('#' + ctrl).css(setting, value);
        }

Итак, теперь установите любой параметр стиля, скажем, например:

        mysetter('Button1', 'display', 'none');

И, поскольку скрытие и отображение очень распространены?

Вы можете использовать это:

 $('#MyControl').hide();

или

 $('#MyControl').hide();

Обратите внимание, что hide () и show () фактически устанавливают отображение стиля на «none» или «normal».

Итак, я бы не выполняйте вызов ajax для установки / скрытия элементов управления, ЕСЛИ вы не используете полную кнопку asp. net и полную обратную передачу. Или поместите кнопки / элементы управления и кнопку asp. net внутри панели обновлений, и вы также не получите сообщение на всю страницу обратно.

Учитывая, что вы просто скрываете и показываете кнопку или элемент управления ? Я думаю, что с этим можно относительно легко справиться с помощью 100% кода браузера на стороне клиента.