Как получить идентификатор многострочного режима текстового поля asp.net в элементе управления Datalist с помощью jquery - PullRequest
Новая
       17

Как получить идентификатор многострочного режима текстового поля asp.net в элементе управления Datalist с помощью jquery

1 голос
/ 09 февраля 2012

У меня есть два раздела с адресом выставления счета и доставки в списке данных: 

 <asp:DataList ID="dldirectory" runat="server" Width="100%" 
    RepeatColumns="1" EnableViewState="False" DataKeyField="Id" >
    <ItemTemplate>

                         <asp:TextBox ID="txtBillingAddress" runat="server" Text='<%# Eval("BillingFullAddress") %>' TextMode="MultiLine" Width="200" Height="150"></asp:TextBox>

                        <asp:CheckBox ID="chkCopy" runat="server" Text="Same as Billing Address." />

                         Address:
                         <asp:TextBox ID="txtDeliveryAddress" runat="server" Text='<%# Eval("DeliveryFullAddress") %>' TextMode="MultiLine" Width="200" Height="150"></asp:TextBox>
                         </ItemTemplate>

            <ItemStyle Width="50%" />
        </asp:DataList>

          <script type="text/javascript">

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked')) {$('input:text[id*=txtDeliveryAddress]').val($('input:text[id*=txtBillingAddress]').val());   }
       });
   });

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

Любые идеи о том, как получить точно такое же будущее с asp.netтекстовое поле установлено в многострочный режим.

Спасибо

Обновлен html: 

<textarea name="ctl00$MainContent$CustomersDefaultPaging$ctl00$txtBillingAddress" rows="2" cols="20" id="ctl00_MainContent_CustomersDefaultPaging_ctl00_txtBillingAddress" style="height:150px;width:200px;"></textarea>

Ответы [ 3 ]

1 голос
/ 09 февраля 2012

Если вы используете .Net 4, я бы посоветовал вам взглянуть на ClientIDMode этих элементов управления.На самом деле вы можете заставить их использовать идентификатор, который намного более дружественен к JavaScript.

http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

1 голос
/ 09 февраля 2012

Когда вы используете textbox элемент управления в многострочном режиме, он отображает текстовую область, поэтому ваш селектор должен быть другим. Селектор input:text будет искать поля ввода типа text, он не будет выбирать textarea. Попробуйте это. 

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked'))  {
               $('textarea[id*=txtDeliveryAddress]')
               .val($('textarea[id*=txtBillingAddress]').val());   
           }
       });
   });

Так как это DataList Я уверен, что у вас есть несколько элементов на странице. Так что в приведенном выше коде вы должны передать контекст при выборе текстовой области, используя элемент флажка в качестве ссылки. Попробуйте это 

   $(document).ready(function () {
       $('input:checkbox[id*=chkCopy]').change(function () {
           if ($(this).is(':checked'))  {
               //Assuming every item is rendered as a separate table
               //If it is inside a div the change it to div
               var $parent - $(this).closest('table');
               $parent.find('textarea[id*=txtDeliveryAddress]')
               .val($parent.find('textarea[id*=txtBillingAddress]').val());   
           }
       });
   });
0 голосов
/ 09 февраля 2012

Вы пытались выбрать текстовое поле, используя его идентификатор, 

$('#<%= txtDeliveryAddress.ClientID %>')

Если вместо этого вы используете ID, вам не нужно беспокоиться о том, как он отображает тег на стороне клиента.

...