Почему запятые вставляются, когда innerHTML копируется после обратной передачи? - PullRequest
4 голосов
/ 05 декабря 2008

Это дело покажется сложным, но это не так уж плохо. Javascript в конце этого кода кажется правильным.

РЕДАКТИРОВАТЬ: Вот страница, работающая на живом сервере. Первый пример не чередуется между открытым и закрытым, потому что я вырвал много кода, чтобы сузить пример настолько, насколько смог.

http://69.64.80.239/tmp/borked2.aspx

В следующем клиентском коде перечислены два случая. Первый случай отправляется обратно, когда нажимается кнопка изображения, и добавляет вызов большой функции javascript, используя в качестве аргумента клиентскую кнопку изображения.

Во втором случае просто используется onClientClick, и выполняется javascript без обратной передачи.

Оба метода выполняют отображение и скрытие текстового поля, которое должно появиться. Однако при использовании метода обратной передачи запятые вставляются каждый раз, когда вы идете вперед и назад - сначала 1, затем 3, затем 7, затем 15, а затем 31. Такое странное поведение не происходит в случае № 2, что заставляет меня поверить, что в этом случае JavaScript это звук.

Когда происходит обратная передача, в моем текстовом поле появляется атрибут 'value = ","', которого раньше не было. все большее число запятых вписывается в новый добавленный атрибут.

Этот случай чрезвычайно урезан, чтобы эффективно выделить проблему. В конечном итоге это вызывает подробное представление, над которым я выполняю ту же копию, чтобы добавить запятую в начало каждого значения формы, которое оно отправляет.

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

<h5>CASE 1: Using Serverside postback to insert Javascript into a Literal</h5>
<table><tr><td>

    <asp:ImageButton id="CollapseExpand" runat="server" ImageUrl="/images/plus.gif" src="/images/plus.gif"
        AlternateText="Hide Tasks" Width="12" Height="12"  onclick="CollapseExpand_Click"
        />

     <div style="display:none">
     <asp:TextBox runat="server" ID="Textbox1"></asp:TextBox>
     <asp:Button runat="server" ID="btnSubmit1" Text="Submit 1" />
     </div>

    <asp:Literal runat="server" ID="ScriptAnchorTest"></asp:Literal>     

</td></tr></table>

ДЕЛО 1 Код позади

protected void CollapseExpand_Click(object sender, ImageClickEventArgs e)
{

    Literal l = (Literal)this.ScriptAnchorTest;
    l.Text = "<script type=\"text/javascript\">Expand(document.getElementById('" + this.CollapseExpand.ClientID + "'));</script>";

}


СЛУЧАЙ 2: Выполнение Javascript на стороне клиента напрямую

    <asp:ImageButton id="CollapseExpand2" runat="server" src="/images/plus.gif" 
        AlternateText="Hide Tasks" Width="12" Height="12"  onClientClick="Expand(this); return false;"
        />

     <div style="display:none">
     <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>
     <asp:Button runat="server" ID="btnSubmit2" Text="Submit 2" />
     </div>

</td></tr></table>    

// Функция Javascript функция Expand (изображение, индекс) { // получаем источник изображения var src = image.getAttribute ("src");

    // if src is currently "plus.", then toggle it to "minus.png"    
    if (src.indexOf("plus") > 0) {

        //  toggle the  image
        image.src = image.src.replace("plus", "minus");

        var tr = image.parentNode.parentNode;
        // Get a reference to the next row from where the image is
        var next_tr = tr.nextSibling;

        // Get a refernece to the <tbody> tag of the grid
        var tbody = tr.parentNode;

        // Get a reference to the image's column
        var td = image.parentNode;
        var detailnode

        //loop through the content of the image's column. if hidden div is found, get a reference
        for (var j = 0; j < td.childNodes.length; j++) {
            if (td.childNodes[j].nodeType == 1) {
                if (td.childNodes[j].nodeName.toLowerCase() == 'div') {
                    detailnode = td.childNodes[j].cloneNode(true);
                }
            }
        }

        // Create a new table row for "Expand"  
        var newtr = document.createElement('tr');
        var newtd = document.createElement('td');
        var newfirsttd = newtd.cloneNode(true);

        /* insert an empty cell first */
        newtr.appendChild(newfirsttd);
        newtd.colSpan = 8;

        // insert the  hidden div's content  into the new row
        newtd.innerHTML = detailnode.innerHTML;


        newtr.appendChild(newtd);
        tbody.insertBefore(newtr, next_tr);

        tr.className = "selected";
    }


    else {
        image.src = src.replace("minus", "plus");
        var row = image.parentNode.parentNode;
        var rowsibling = row.nextSibling;
        var rowparent = row.parentNode;
        rowparent.removeChild(rowsibling);
    }

Ответы [ 2 ]

6 голосов
/ 05 декабря 2008

У меня нет времени на чтение всего кода, но обратите внимание на следующее: возможно, вы копируете фрагмент HTML и создаете его клон в своем коде. Таким образом, вы на самом деле получаете два текстовых поля с одинаковым идентификатором, хотя вы видите только одно из них. При обратной передаче браузер объединяет значения в виде списка через запятую. Например, если вы введете «Test1» и «Test2» в текстовые поля, соответственно, а затем отправите, оба текстовых поля получат удвоенное значение. Теперь, если вы раскрываете только один из них (скажем, первый) и отправляете, только расширенный снова удваивается, а нерасширенный остается тем же при обратной передаче.

Для решения, если вам нужно только показать или скрыть div, лучше всего сделать это из javascript, на стороне клиента, изменив стиль (видимость) этого div, а не клонируя его. Таким образом, ваша функция может быть сокращена до одной строки кода.

4 голосов
/ 05 декабря 2008

Серхиу прав, вы создаете два html-ввода с тем же идентификатором «Textbox1», как вы можете видеть на скриншоте, снятом с помощью Firebug

Ответ Stackoverflow

Это приводит к объединению двух значений, разделенных запятой.

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