如何单击一次然后切换并确保切换的 CSS 在加载表格后出现？

Question

Hi i would like to ask how to draw the table once and then toggle the table. Besides that, the toggleSetting's css will only load after the table is done drawn/loaded.

PS: i'm quite new to javascript and please be forgiving, thank you and also please ignore my terrible english.

here is my toggle function

    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";
        }           
    }

here is my code for the javascript function

        $("#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) {
                    
                    
                }
            });

the table in the DrawTable function is a table drawn using stringbuilder and append.

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());
}

this is my code for the main table

        <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>

I've tried to using the toggleSetting function in complete:function(data) but it wont work.

Answer 1

First, you did seem to leave out the web method directive on your general function. And your ajax call should thus include the web method. eg:

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

But a ajax call means your code behind will run just fine, but you can't update any control attributes because the web page has not been posted/sent to the server. So the web page and controls remains sitting on users desktop.

You can call your server code, but it can't modify controls since the whole web page has not been sent up to the server (it is still sitting in the browser).

Your current code setup thus needs a post back of the page. Or at the VERY least the part of the page with the controls you are setting. This suggest you might as well use a update panel, and your button code is not ajax or JS anymore. So, you could place regular asp button that posts back the pack. And update panel means a partial post back - so both the button and table have to be inside of that up-date panel for this to work. That means the page and a post back occurs, but ONLY what is inside the update panel goes up to the server.

The other way? Don't call the server. Do this client side as js, and then you don't need or have to call server side code. And thus you not need any post back (full or partial with a update panel). So, I would consider writing the function in js, and not call the code behind (server side). However, I unfortunately find js somewhat hard to work with, but 100% client side code would be best. Eventually, if you going to run any code behind after a hide/show of the given control (client side), then eventually if ANY code is to run server side and set or work with those controls, then a post-back will be required.

And your ajax post needs to include the web method in the url eg:

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

note VERY VERY careful in above how in the above json string the names are to be the SAME as the parameters you have for the server side function.

But, without a post back? The settings will occur server side, but any post back from the client side will send up the whole web page in its current state, and the changed values of the controls server side will be over-written. So best to think that you have a copy of the web page sitting client side, and then one sitting server side. Changes on the server side copy of the web page will get over written by any post back. And changes server side will NOT appear until such time that the server side copy of the web page is sent back down to the client.

You have: Client side web page. Change things, controls etc. client side. post-back. The web page is sent to server. Code behind runs (maybe update web page), and then the WHOLE page is sent back down to the browser. So, you can't run server side code that updates controls unless te web page is sent up to the server. If you break this rule, then you have changes being made client side and server side - but the two pages are out of sync now.

Change the style attributes 100% client side. So in js, you can do the same as your c# server side code with something like this:

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

With jquery, then you can go:

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

And thus now set any style setting, say like:

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

And, because hide and show is oh so very common?

You can use this:

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

or

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

Note that hide() and show() actually sets the style display to "none" or "normal".

So, I would would not do a ajax call to set/hide the controls UNLESS you using a full asp.net button and a full postback. Or put the buttons/controls and the asp.net button inside of a update panel, and you also not get a full page post back.

Given that you just hiding and showing a button or control? I think this can with relative ease be handled with 100% client side browser code.