Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Помогите с поведением jquery метода .append() в таблице

Доброго всем времени. Ребят возник вопрос один по казалось бы такому простому методу как append. Вроде всё понятно, он ДОБАВЛЯЕТ в конец элемента то что мы хотим добавить. Но тогда какого чёрта он в нижеследующем кода ЗАМЕЩАЕТ полностью табличные данные, а не присоединяет их? Это отрывок из книги Джона Дакетта, суть проста, есть таблица, при клике по заголовка колонок происходит сортировка таблицы. Функции сортировки (метод sort()) различных данных (текстовых, чиловых, дат) определены в объекте compare. Больше всего интересует строка 57. Ведь у нас уже есть на странице в момент открытия заполненная страница, мы создаём rows, вставляем туда элементы tr, сортируем их, и ПРИБАВЛЯЕМ методом append, почему предыдущие tr стираются? Я вроде бы как понимаю что где-то дело в том что rows содержит эти же объекты DOM, а не копии, видимо в этом что-то дело, но не могу всё равно доходчиво себе объяснить почему метод append, призванный ДОБАВЛЯТЬ, ЗАМЕЩАЕТ? Ребят подскажите пожалуйста как вы это видите? Сорри если туплю где-то конкретно, может уже перетрудился))


var compare = {                           // Declare compare object
  name: function(a, b) {                  // Add a method called name
    a = a.replace(/^the /i, '');          // Remove The from start of parameter
    b = b.replace(/^the /i, '');          // Remove The from start of parameter

    if (a < b) {                          // If value a is less than value b
      return -1;                          // Return -1
    } else {                              // Otherwise
      return a > b ? 1 : 0;               // If a is greater than b return 1 OR
    }                                     // if they are the same return 0
  },
  duration: function(a, b) {              // Add a method called duration
    a = a.split(':');                     // Split the time at the colon
    b = b.split(':');                     // Split the time at the colon

    a = Number(a[0]) * 60 + Number(a[1]); // Convert the time to seconds
    b = Number(b[0]) * 60 + Number(b[1]); // Convert the time to seconds

    return a - b;                         // Return a minus b
  },
  date: function(a, b) {                  // Add a method called date
    a = new Date(a);                      // New Date object to hold the date
    b = new Date(b);                      // New Date object to hold the date

    return a - b;                         // Return a minus b
  }
};

$('.sortable').each(function() {
  var $table = $(this);                     // This sortable table
  var $tbody = $table.find('tbody');        // Store table body
  var $controls = $table.find('th');        // Store table headers
  var rows = $tbody.find('tr').toArray();   // Store array containing rows

  $controls.on('click', function() {        // When user clicks on a header
    var $header = $(this);                  // Get the header
    var order = $header.data('sort');       // Get value of data-sort attribute
    var column;                             // Declare variable called column

    // If selected item has ascending or descending class, reverse contents
    if ($header.is('.ascending') || $header.is('.descending')) {  
      $header.toggleClass('ascending descending');    // Toggle to other class
      $tbody.append(rows.reverse());                // Reverse the array
    } else {                                        // Otherwise perform a sort                            
      $header.addClass('ascending');                // Add class to header
      // Remove asc or desc from all other headers
      $header.siblings().removeClass('ascending descending'); 
      if (compare.hasOwnProperty(order)) {  // If compare object has method
        column = $controls.index(this);         // Search for column’s index no

        rows.sort(function(a, b) {               // Call sort() on rows array
          a = $(a).find('td').eq(column).text(); // Get text of column in row a
          b = $(b).find('td').eq(column).text(); // Get text of column in row b
          return compare[order](a, b);           // Call compare method
        });

        $tbody.append(rows);
      }
    }
  });
});
Ответ: laimas, спасибо за наводку! Разобрался! Действительно, на существующие dom-элементы действует чуть по-другому!
Вопрос: Не работает append() через ajax

Не работает
Javascript
1
 $("#pagination").append('<ul class="pagination pagination-sm" id="myPager1"></ul>'); 


Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$('#show_detail_balance').click(function(){
                $.ajax({
                    type: "POST",
                    url: 'balance_from_to_test.php',
                    data: "fromD="+$("#from_1").val()+"&toD="+$("#to_1").val(),
                    success: function(html){
                          $("#tbdetail").html(html);
                          $("#pagination").empty();
                          $("#pagination").append('<ul class="pagination pagination-sm" id="myPager1"></ul>');
                   }
                });
            });


хотя вне $('#show_detail_balance').click все ок
Ответ: Натупила так натупила

#pagination изначально находился внутри блока #tbdetail. Данные с ajax success (собственно $("#tbdetail").html(html); ) просто делейтили содержимое внутри #tbdetail а с ними и селектор #pagination, к которому я пыталась прилепить нужный тег ($("#pagination").append('<ul class="pagination pagination-sm" id="myPager1"></ul>').

Подправила косяк с вложенностью #pagination в #tbdetail и все чудненько заработало ^_^

Может кому пригодиться ajax -овая часть с рабочим append()

Javascript
1
2
3
4
5
6
7
8
9
10
     $.ajax({
                    type: "POST",
                    url: 'balance_from_to_test.php',
                    data: "fromD="+$("#from_1").val()+"&toD="+$("#to_1").val(),
                    success: function(html){
                          $("#tbdetail").html(html);  
                          $("#pagination").html('');
                          $("#pagination").append('<ul class="pagination pagination-sm" id="myPager1"></ul>');
                        }                                               
});

Almag13, спасибо за помощь )
Вопрос: Запрет на дублирование .append

Вечер добрый

есть ajax запрос,где в success прописано вставлять содержимое методом
.append.

Так вот задача состоит в том что нужно запретить дублирование .append при нажатии на одну и туже ссылку более одного раза.

вот код
$(document).ready(function(){
  
  
  $('.container:not(:first)').hide();
  
  $('.container,#container').on('click','a',function(e) {
        e.preventDefault();	
        $.ajax({
            type: "POST",
            url: "ajax.php",
			data:"id="+this.href.split('/').pop(),
            success: function(data) {  
                $('#container').hide().append("<div style='clear: both;' class='container'>"+data+"</div>").fadeIn(200);
				}
			});
        
    });
  
	
});


Html

<div class="container"><ul>
	<li><a href="id1">Товары для отдыха</a></li>
	<li><a href="id2">Товары для дома</a></li>
	<li><a href="id3">Специальные ножи</a></li>
	<li><a href="id4">Детские санки</a></li>
	</ul>
	</div><div style="clear: both;"></div>
	<div id="container"></div>


Буду рад помощи в решении данного вопроса.

ссылка на пример
Ответ: apolon13,
пропишите любой класс вашим ссылкам
Вопрос: Оформление добавляемых с помощью append ячеек таблицы.

Всем привет. Возникла небольшая проблема при добавлении ячеек таблицы. Мне нужно сделать, чтобы при добавлении ячейки после первой строки производился перенос строки, а затем следовала горизонтальная черта вдоль всей ячейки как у тега <hr>. После этого следует другая строка. Как это сделать с помощью функции append?
Пробовал следующие 2 варианта:
Код Javascript
1
$("tr").eq(i).append("<td class='cols'>"+str1+"<br><hr>"+str2+"</td>");
Также пробовал добавить через div:
Код CSS
1
2
3
4
5
    .line{
        height: 5px;
        background-color: black;
        border-color: black;
    }
Код Javascript
1
$("tr").eq(i).append("<td class='cols'>"+str1+"<br><div class='line'></div>"+str2+"</td>");
Подскажите как сделать или что исправить? Заранее спасибо
Ответ: Если я вас правильно понял ячейка с текстом в две строки разделенные горизонтальной линией вдоль всей ячейки.
Пример
Код HTML5
1
2
3
4
5
6
7
8
<table>
<tr><td>запись1</td></tr>
<tr><td>запись2</td></tr>
<tr><td>запись3</td></tr>
<tr><td>запись4</td></tr>
</table>
 
<div id='add'>Добавить линию</div>
Код Javascript
1
2
3
4
5
6
$(document).ready(function(){
    $('#add').click(function(){
        $('table tr').append("<td>Новая запись<hr>Ещё запись</td>");
    });
    
});
Вопрос: Прошу помочь с ajax и append jquery

Привет всем, помогите пожалуйста разобраться.
$(document).ready(function(){  
            var frm = $('#formx');
            frm.submit(function(){  
                $.ajax({  
                    type: "GET",  
                    url: "/report/gen/",  
                    data: frm.serialize(),  
                    success: function(result){  
                        $("#main").append(result);
                        
                    },
                    error: function(data) {
                        alert('Возникла ошибка: ');
                    }                    
                });  
                return false;  
            });  
              
        });

<div class="jumbotron">
    <form action="/report/gen/" method="get" id="formx">
        <input name="q" class="form-control" onmouseover="this.focus();" type="text" placeholder="Наведите курсор мыши..." id="reg">
        <br>
        <input type="submit" class="btn btn-lg btn-primary" value="Печать">
    </form>

<div id="main">	
        {% for re in baby %}
            <div id="list">


                    <table border="0" cellspacing="0" cellpadding="2" width="100%" height="100%" class="order">
                          <tr>
                            <td rowspan="2" align="center"><b>{{ re.poll }}</b></td>
                            <td align="center"><h1><p>{{ re.centr }}</p></h1></td>
                          </tr>
                          <tr>
                            <TD rowspan="2" ALIGN="CENTER"><h3>тенге</h3>                        </TD>
                          </tr>
                          <tr>
                            <TD ALIGN="LEFT">{{ re.node }}</TD>
                          </tr>
                    </table>

            </div>
            <!--<script type="text/javascript">
                $('.clickme').bind('click', function(){
                var form_field='<p style="cursor:pointer"><input type="file" name="image[]" /><span onclick="$($(this).parent()).remove()">удалить</span></p>'
                  $("#list").append(form_field);
                });
            </script>-->
        
        {% endfor %}
		</div>

пытаюсь вывести список в id margin при помощи append, но мне выдает полную страницу с поиском, а мне надо чтобы только таблица была в div = "list"
Ответ: follow_me,
в нормальном случае сервер должен присылать только таблицу
как вариант
$(function(){
            var frm = $('#formx');
            frm.submit(function(){
                $( "#main" ).load( "/report/gen/ #list>table" , frm.serialize());
                return false;
            });

        });

только это не вставка, заменит всё содержимое #main на таблицу
Вопрос: Как добавить в append цикл

Как мне добавить цикл в append?
пока вот такая штука получается
$(".timetable-header").append('<span class="icon_list_soc">'
        +products.forEach(function(item, i, arr) {
            var addon;
            if (item['marker'] == product['marker']){
                addon = ''
                if (product['socid'] == item['socid']){addon = 'active'};
                
                for(var i = 0; i < products.length; i++) {
                    for(var key in products[i] ) {
                        if(key == 'id' && products[i][key] == item['id'] ){
                            var newID = i;
                        }
                    }
                }
                
                //$(".product-statistic-soc").append('<a class="product-statistic-soc__item" href="/product.php?pid='+newID+'">'
                //+'<i class="icon-p-'+soc[item['socid']]['marker']+' '+addon+'"></i></a>');
                
                +'<a class="product-statistic-soc__item" href="/product.php?pid='+newID+'">'
                +'<i class="icon-p-'+soc[item['socid']]['marker']+' '+addon+'"></i></a>'+
                
            }
        +   
        });
        +'</span>');


Вобщем нужно группу ссылок выводимых этим циклом я так понимаю добавить в span контейнер.
Сейчас ошибка SyntaxError: expected expression, got '}'
Ответ:
Сообщение от Cdelphi78
вообще можно вставлять функции цыклы
можно если цикл что-то возвращает, в данном случае нельзя, forEach ничего не возвращает
Вопрос: jQuery. Странно работает append.

Здравствуйте. Хочу заставить программу генерировать любое количество линий, но получается только одна (по одной на каждую направляющую). Код работает, но 1 раз. Где ошибка?

<!DOCTYPE html>
<html lang="ru">
   <head>
      <meta charset="utf-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
$(document).ready(function(){
    $("#addVerticalGuideRail").click(function(){/*При щелчке по этой направляющей, создать её перемещаемую копию.*/
        $("div").append("<span class='vertical draggable' title='Щелкните по направляющей дважды для её удаления.'></span>");
    });

    $("#addHorizontalGuideRail").click(function(){/*При двойном щелчке по любой из направляющих, предложить пользователю её удалить.*/
        $("div").append("<span class='horizontal draggable'  title='Щелкните по направляющей дважды для её удаления.'></span>");
    });
	
	$( ".draggable" ).draggable();/*Перемещаемый класс.*/
	
	$(".horizontal, .vertical").dblclick(function(){/*При двойном щелчке по любой из направляющих, предложить пользователю её удалить.*/
	    var deleteLine = confirm("Вы, действительно, хотите удалить направляющую линию?");
		if(deleteLine){
		    $(this).remove();
		}
	});
	
	$(function() {
        $(".horizontal, .vertical").draggable({
            drag: function() {
			    var draggableLinePosition = $(this).position();
				$("#draggableLinePosition").text("y: " + draggableLinePosition.top + " x: " + draggableLinePosition.left);
			}
        });
    });
    
});
</script>
<style>
.horizontal {
    position: absolute;
    left: 0px;
    right: 0px;
    border-top: 2px solid #00f;
}
.vertical {
    position: absolute;
    border-right: 2px solid #00f;
    top: 0;
    bottom: 0;
	z-index: 10;
}
.horizontal:hover, .vertical:hover{
    border-top: 2px solid #f00;
	border-right: 2px solid #f00;
	color: #f00;
	z-index: 10;
}
</style>
</head>
<body>

<span id="addHorizontalGuideRail" class="draggable horizontal"></span>
<span id="addVerticalGuideRail" class="draggable vertical"></span>

<div></div>


<p id="draggableLinePosition">Text</p>

</body>
</html>
Ответ: рони,
спасибо.
Вопрос: Два раза срабатывает append

Почему может два раза срабатывать append? Проверила все по 100 раз... Проблема точно в нем. Вот например такая строчка:
Javascript
1
 $("#users").append($('<div class="nickUser">' + userName + "</div>"));
Ответ: а зачем внутри еще раз $ ?
я так пишу
Javascript
1
$("#users").append('<div class="nickUser">' + userName + "</div>");
Вопрос: Append данных к существующему тегу

Есть форма

<form action="" id='PageViewForm' onsubmit="ga('sent'); ">
    <label><input></label>
</form>


К onsubmit нужно добавить
yaCounter'.yandex_metrika_id.'.reachGoal('corp_landing_order'); return true;


Чтоб получилось так
<form action="" id='PageViewForm' onsubmit="ga('sent'); yaCounter'.yandex_metrika_id.'.reachGoal('corp_landing_order'); return true; ">
    <label><input></label>
</form>


Знаю, что новые теги можно создавать с заданными атрибутами так (сомневаюсь, что это вообще правильное направление):
$('#PageViewForm').append($('<img/>', { id: 'myimg', src: 'https://mc.yandex.ru/watch/' + id, style: 'position:absolute; left:-9999px;' }));


Добавлять к атрибуту так
$(document).ready(function(){
            document.getElementById('PageViewForm').onsubmit ="yaCounter'.yandex_metrika_id.'.reachGoal('corp_landing_order'); return true;";
        });


Но не один вариант не работает
Ответ:
как то так
<form action="" id='PageViewForm' onsubmit="alert(this.name);" name="PageViewForm">
    <label>
        <input>
    </label>
    <input name="" type="submit" value="ok">
</form>
<script>
    var form = document.forms.PageViewForm;
    var fn = form.onsubmit.bind(form);
    document.forms.PageViewForm.onsubmit = function() {
        fn();
        alert("test");
        return false
    };
</script>
Вопрос: противоположность append()

Всем привет. Ребят, есть у меня чат, в который добавляются сообщения по средством

$("#chat").append(data.msg);


Дело в том, что сейчас данные добавляет так:

Код:
#1 - Сообщение
#2 - Сообщение
#3 - Сообщение
#4 - Сообщение  - последнее добавленное
А нужно вот так:

Код:
#4 - Сообщение - последнее добавленное
#3 - Сообщение
#2 - Сообщение
#1 - Сообщение
Ответ: sergei1094,
.eq(i). выбрать i-тый элемент -- что непонятно?