Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: JS Почему срабатывает событие по добавлению строки таблицы?

Здравствуйте.

Ниже код, который формирует таблицу - dataTables
в которой есть быстрый поиск, сортировка столбцов по имени
и есть кнопка по нажатию, которой добавляется строка сверху и наполняется
такой информацией
1.1 1.2 1.3

<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">


<script type="text/javascript">
$(document).ready(function() {
    var dataSet = [
       [ "Tiger", "Nixon", "user1"],
        [ "Garrett", "Winters", "user2", ]
    ];

var t = $('#example').DataTable(

        {
            data: dataSet,
            columns: [
                { title: "Фамилия" },
                { title: "Имя" },
                { title: "Пользователь" }
            ]
        }

);
var counter = 1;

$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3'
] ).draw( false );
counter++;
} );

// Automatically add a first row of data
$('#addRow').click();
} );
</script>
<div class="container">
<button id="addRow" class="btn btn-success"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Фамилия</th>
        <th>Имя</th>
        <th>Пользователь</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Фамилия</th>
        <th>Имя</th>
        <th>Пользователь</th>

    </tr>
    </tfoot>
</table>
</div>


Проблема в том, что даже при первоначальном запуске формы сразу уже срабатывает событие по добавлению строки.

Подскажите, где ошибка.
Ответ: drno,

проблема решена

// Automatically add a first row of data
// $('#addRow').click();
Вопрос: Сохранение предыдущих данных при динамическом добавлении поля ввода

Я РНР-шник, с Javascript и jQuery не подружился все еще
Вообщем, есть код:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Динамическое добавление поля в форму (для записи в массив и обработки на стороне сервера).</title>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="datetimepicker.jquery.css"/>
<script src="datetimepicker.jquery.js"></script>
<script src="datetimepicker.full.jquery.min.js"></script>
<?
$nowdate = date("d/m/Y");
?>
<script type="text/javascript">
 
function addField () {
    var telnum = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3))+1;
    $('div#add_field_area').append('\
    <div id="add'+telnum+'" class="add"><label> Поле №'+telnum+'</label>\
    <input type="text" width="120" name="val[]" id="datetimepicker3-'+telnum+'"  value="add'+telnum+'"/>\
    <input type="text" width="120" name="val[]" id="datetimepicker2-'+telnum+'"  value="09:00"/>\
    <div class="deletebutton" onclick="deleteField('+telnum+');"></div></div>');
 
    $('#datetimepicker2-'+telnum+'').datetimepicker({
        datepicker:false,
        format:'H:i',
        defaultTime:'09:00',
    step:10
    }); 
    $('#datetimepicker3-'+telnum+'').datetimepicker({
        timepicker:false,
        format:'d/m/Y',
        formatDate:'Y/m/d'
    });
}
 
function deleteField (id) {
    $('div#add'+id).remove();
}
 
</script>
<style>
...
</style>
</head>
 
<body>
 
 
        <div id="add_field_area">
            <?  
            $array = '';
            $values = explode("|",$array);
            $n = 0;
            foreach ($values as $value) {
            $n++;
                if ($n == 1) {
            ?><div id="add1" class="add">
                    <label> Поле №1</label>
                    <input type="text" width="120" name="val[]" id="datetimepicker2-0"  value="<?=$nowdate?>"/>
                    <input type="text" width="120" name="val[]" id="datetimepicker0-0"  value="09:00"/>
                    <script>
                    $('#datetimepicker2-0').datetimepicker({
                        timepicker:false,
                        format:'d/m/Y',
                        formatDate:'Y/m/d'
                    });
                    $('#datetimepicker0-0').datetimepicker({
                        datepicker:false,
                        format:'H:i',
                        defaultTime:'09:00',
                        step:10
                    });
                    </script>
             </div>
                 <?
                } else {            
                ?>
                <div id="add<?=$n?>" class="add">
                    <label> Поле №<?=$n?></label>
                    
                   <div class="deletebutton" onclick="deleteField(<?=$n?>);"></div>
                    
                </div>
                
                <?  
                
                }
            }
             
                ?>
        </div>
        <div onclick="addField();" class="addbutton">Добавить новое поле</div>
        
</body>
</html>
Там поля с выплывающим календарем и временем
Генерацию уникального ID для календарей как-то привязал еще
Суть в том, чтобы при появлении нового поля, оно повторяло значения предыдущего соответствующего. Это уже для полного кайфа.
Вот эти поля появляются:
HTML5
1
2
    <input type="text" width="120" name="val[]" id="datetimepicker3-'+telnum+'"  value="add'+telnum+'"/>\
    <input type="text" width="120" name="val[]" id="datetimepicker2-'+telnum+'"  value="09:00"/>\
Подскажите пожалуйста. В них как-то полагаю предопределять нужно значение предыдущего поля.
Спасибо.
Ответ: Просто КРАСАФФЧЕГ!
Попозже выложу полностью скрипт для скачивания (зашлифую немного), думаю пригодится многим
Вопрос: Динамическое добавление картинок в плагин вращения на 360 градусов

Приветствую участников форума!
Не получается осуществить динамическое добавление картинок в плагин вращения изображений на 360 градусов (в карточке товара в интернет-магазине).
<script type="text/javascript">
    window.onload = init;
    var product;
    function init(){
      car = $('.product1').ThreeSixty({
        totalFrames: 52,
        endFrame: 52,
        currentFrame: 1,
        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath:'http://360slider.com/img/car/',
        filePrefix: '',
        ext: '.png',
        height: 447,
        width: 1000,
        navigation: false,
        disableSpin: true,
   plugins: ['ThreeSixtyFullscreen']
      });
      $('.custom_previous').bind('click', function(e) {
        car.previous();
      });
      $('.custom_next').bind('click', function(e) {
        car.next();
      });
      $('.custom_play').bind('click', function(e) {
        car.play();
      });
      $('.custom_stop').bind('click', function(e) {
        car.stop();
      });
    }
  </script>


В скрипте картинки загружаются только из папки:
imagePath:'http://360slider.com/img/car/',


На сайте динамическая ссылка на фото реализована: src="{$product->image->filename|resize:500:500}"

Никак не могу связать скрипт с динамической ссылкой.
Прошу помощи
Ответ: Здравствуйте! Кто-нибудь может помочь с динамичесой загрузкой фото скриптом?
Вопрос: Не происходит отправка формы после динамического добавления полей

Не происходит отправка формы в базу данных MYSQL после динамического добавления полей

Все items0 - уходят в базу данных, а вот уже items2 - нет


PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script language="javascript">
var items=1;
function AddItem() {
  div=document.getElementById("items");
  button=document.getElementById("add");
  newitem="";
  newitem+=(items++)/2+1.5+". <input type=\"text\" name=\"item" + (items++);
  newitem+="\" size=\"45\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
 
var ritems=1;
function Add2Item() {
  div=document.getElementById("ritems");
  button=document.getElementById("add2");
  newitem="";
  newitem+=(ritems++)/2+1.5+". <input type=\"text\" name=\"ritem" + (ritems++);
  newitem+="\" size=\"45\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
 
var dlinas=1;
function Add3Item() {
  div=document.getElementById("dlinas");
  button=document.getElementById("add3");
  newitem="";
  newitem+=(dlinas++)/2+1.5+". <input type=\"text\" name=\"dlina" + (dlinas++);
  newitem+="\" size=\"45\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
 
var nivelirs=1;
function Add4Item() {
  div=document.getElementById("nivelirs");
  button=document.getElementById("add4");
  newitem="";
  newitem+=(nivelirs++)/2+1.5+". <input type=\"text\" name=\"nivelir" + (nivelirs++);
  newitem+="\" size=\"45\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
 
 
var davs=1;
function Add5Item() {
  div=document.getElementById("davs");
  button=document.getElementById("add5");
  newitem="";
  newitem+=(davs++)/2+1.5+". <input type=\"text\" name=\"dav" + (davs++);
  newitem+="\" size=\"45\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
 
var diams=1;
function Add6Item() {
  div=document.getElementById("diams");
  button=document.getElementById("add6");
  newitem="";
  newitem+=(diams++)/2+1.5+". <input type=\"text\" name=\"diam" + (diams++);
  newitem+="\" size=\"45\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
 
</script>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<fieldset>
<div ID="items">
<strong>Координаты (долгота): </strong>
<br>
1. <input type="text" name="item0" size="45"><br>
</div>
 
 
<div ID="ritems">
<strong>Координаты (широта): </strong>
<br>
1. <input type="text" name="ritem0" size="45"><br>
</div>
 
 
<div ID="dlinas">
<strong>Длина участка, км: </strong>
<br>
1. <input type="text" name="dlina0" size="45"><br>
</div>
 
 
<div ID="nivelirs">
<strong>Нивелирная отметка, м: </strong>
<br>
1. <input type="text" name="nivelir0" size="45"><br>
</div>
 
<div ID="davs">
<strong>Давление на участке, МПа: </strong>
<br>
1. <input type="text" name="dav0" size="45"><br>
</div>
 
<div ID="diams">
<strong>Диаметр на участке, мм: </strong>
<br>
1. <input type="text" name="diam0" size="45"><br>
</div>
 
<br/>
<br/>
 
<input type="button" value="Добавить поле" onClick="AddItem(), Add2Item(), Add3Item(), Add4Item(), Add5Item(), Add6Item();" ID="add, add2, add3, add4, add5, add6">
 
 
 
</fieldset>
 
 
 
<br/>
<fieldset>
<input id="submit" type="submit" value="Отправить данные"><br/>
</fieldset>
</form>
Ответ: Оттого что я чуть сократил форму, ты уже разнылся - то просто наврядли профессионал,
увидел недочет - которого недочетом назвать сложно - и о нет - ты дурак - я умный

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<body>
<form action="scripts/form.php" method="post" name="forma">
 
<fieldset>
<div ID="items">
<strong>Координаты (долгота): </strong>
<br>
1. <input type="text" name="item0" size="45"><br>
</div>
 
 
<div ID="ritems">
<strong>Координаты (широта): </strong>
<br>
1. <input type="text" name="ritem0" size="45"><br>
</div>
 
 
<div ID="dlinas">
<strong>Длина участка, км: </strong>
<br>
1. <input type="text" name="dlina0" size="45"><br>
</div>
 
 
<div ID="nivelirs">
<strong>Нивелирная отметка, м: </strong>
<br>
1. <input type="text" name="nivelir0" size="45"><br>
</div>
 
<div ID="davs">
<strong>Давление на участке, МПа: </strong>
<br>
1. <input type="text" name="dav0" size="45"><br>
</div>
 
<div ID="diams">
<strong>Диаметр на участке, мм: </strong>
<br>
1. <input type="text" name="diam0" size="45"><br>
</div>
 
<br/>
<br/>
 
<input type="button" value="Добавить поле" onClick="AddItem(), Add2Item(), Add3Item(), Add4Item(), Add5Item(), Add6Item();" ID="add, add2, add3, add4, add5, add6">
 
 
 
</fieldset>
 
 
 
<br/>
<fieldset>
<input id="submit" type="submit" value="Отправить данные"><br/>
</fieldset>
</form>
</body>
</html>
Добавлено через 22 минуты
Забыл добавить поля в form.php - можно закрыть тему - все работает
Вопрос: Динамическое добавление div в таблицу, по checkbox

Доброго времени суток, друзья. Возникла необходимость динамического добавления div контейнеров в ячейки таблицы, по событию checkbox.
Есть таблица, шесть checkbox'ов и столько же div контейнеров:
<html>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</html>

 <div id="1" style="display: none">
 <input class="i1" type="text" name="name" />
 </div>
<div id="2" style="display:none"> 
 <input class="i2" type="text" name="name" />
 </div>
<div id="3" style="display: none">
 <input class="i3" type="text" name="name" />
 </div>
<div id="4" style="display: none">
 <input class="i4" type="text" name="name" />
 </div>
<div id="5" style="display: none">
 <input class="i5" type="text" name="name" />
 </div>
<div id="6" style="display: none">
 <input class="i6" type="text" name="name" />
 </div>

<input  type="checkbox" id="c1" name="option1" value="a2"> 
<input  type="checkbox" id="c2" name="option2" value="a2">
<input  type="checkbox" id="c3" name="option3" value="a2">
<input  type="checkbox" id="c4" name="option4" value="a2">
<input  type="checkbox" id="c5" name="option5" value="a2">
<input  type="checkbox" id="c6" name="option6" value="a2">

Подскажите как реализовать появление divov в ячейках таблицы последовательно, то есть если выбран чекбокс 1-3-5 в ячейках таблицы они появляются именно в такой последовательности, при снятии чекбоксов из ячеек пропадают, чтоб была возможность выбрать другие, которые в свою очередь так же последовательно появляются в ячейках (td) и.т.д
Может проще в inner генерировать код... Вообщем понятия не имею как реализовать.
В Js очень слаб, спасибо.
Ответ: AlexOk,
какая связь между таблицей и div
Сообщение от AlexOk
если выбран чекбокс 1-3-5 в ячейках таблицы они появляются именно в такой последовательности,
таблицу нарисуйте с этим вариантом
Вопрос: Динамическое добавление с индексом

Нужно, чтобы при клике "добавить" добавился новый элемент со своим индексом. Индекс должен идти с меньшего к большему.
При клике на "добавить" элемент должен добавиться не в конец, а после кнопки "добавить" и автоматически исправить значения индексов на новые, т.к добавился новый элемент.
Вот сам код, который я написал, дальше не могу разобраться. Помогите, кто шарит.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<title>Тест</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
    var n = 1;
    $('.plus').click(function() {
        $('.quest').prepend('<div class="block-'+n+'"><div class="count"></div></div><div class="plus_1-'+n+'"></div>');
        
        $('.block-'+n).css({
                                    "width": "700px",
                                    "margin": "10px auto",
                                    "text-align": "left",
                                    "padding": "0px 40px",
                                    "border-radius": "6px",
                                    "border": "1px solid rgb(230, 217, 217)",
                                    "background": "rgb(236, 242, 255)"});
                
        $('.block-'+n+' .count').append(n); //индекс блока
        
        $('<div class="plus"><span></span><small>Добавить</small></div>').appendTo('.plus_1-'+n);
        n++;
    });
    $('body').on('click','.plus_1-'+n+' .plus',function() {
        $('.quest').prepend('<div class="block-'+n+'"><div class="count"></div></div><div class="plus_1-'+n+'"></div>');
        
        $('.block-'+n).css({
                                    "width": "700px",
                                    "margin": "10px auto",
                                    "text-align": "left",
                                    "padding": "0px 40px",
                                    "border-radius": "6px",
                                    "border": "1px solid rgb(230, 217, 217)",
                                    "background": "rgb(236, 242, 255)"});
                
        $('.block-'+n+' .count').append(n); //индекс блока
        
        $('<div class="plus"><span></span><small>Добавить</small></div>').appendTo('.plus_1-'+n);
        n++
    });
});
</script>
<div id="main">
    <div class="form">
            <div class="plus" style="text-align:center">
                <small>Добавить</small>
            </div>
            <div class="quest" style="text-align:center"></div>
    </div>
</div>
</body>
</html>
Ответ:
Вопрос: Не могу сформулировать jQuery .live() для динамического DOM элемента

Есть селектбокс, дизайн которого генериться jQuery плагином при загрузке документа (при doсReady событии). Но он, естественно, не срабатывает для динамических элементов, созданных через append().

Я пробовал юзать и live() и delegate() но ничего не выходит, live() тут врядли как-то поможет а delegate() не знает такого события, которое здесь нужно использовать. Помогите плиз
Ответ: jQuery работает с элементами, которые были на странице на момент инициализации кода.

Если добавляются новые элементы - при помощи ajax'а или функций типа append() - то события не затрагивают их.

Как же работать с новыми созданными элементами DOM?

Оказывается для динамических элементов используется делегированная обработка событий.

Если кратко, то смысл делегирования в том, что обработчики "навешиваются" не на отсутствующие в dom элементы, а на существующий родительский объект.

Таким образом, при срабатывании соответствующего события , будет вызван данный обработчик для всех элементов, соответствующих селектору, даже если этих элементов не было во время объявлении обработчика (например при загрузке страницы).

Вопрос: Динамическое добавление картинок и fancybox

Ребята, ну скажите, правильно ли я добавляю картинки

$('#xxxxx').html('<a rel="gallery" title="xxxxx" href="/xxxx/papk1/1.jpg"><img src="/xxxx/papka2/1.jpg" /></a>')


и как сделать чтоб при этом работало

$('a[rel=gallery]').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 500,
'speedOut' : 500
});



$("ххх").on('click','.xxxxx',function(){ не помог
Ответ: спасибо за код. чуть позже почитаю
Вопрос: Динамическое добавление форм

Всем привет!
Хочу сделать возможность добавлять однотипные формы формы по необходимости. То есть одна есть, но если человек хочет ввести еще один блок данных (например добавление данных о своем авто, есть еще машина - нажимаешь кнопку и еще одна форма выпадает однотипная. марка, объем, год вып...)

и так несколько раз.
На серваке эти данные будут приходить как многомерный массив.

<form>
<input ......./>
<input ......./>

//  блок полей которые надо повторять
<input name="year_1" ......./>
<input name="make_1" ......./>
<input name="engine_1" ......./>
// конец блока полей которые надо повторять

</form>


но при этом имена полей должны соответственно менять индексы... чтоб потом это весть большой массив перебрать foreach

Спасибо!
Ответ: Не формы надо добавлять, а поля одной форме, которым давать имена принадлежащие массиву - name="name[]".
Вопрос: Динамическое добавление полей и формирование JSON

Добрый день. Мне нужна помощь от знающих js, так как я полный наб.
Делаю форму добавления товара в интернет-магазин. Форма является частичным представлением на странице, по этому хочу использовать AJAX, чтобы добавлять поля динамически, без обновления страницы.
<fieldset>
        <form>
        <legend>Добавить деталь</legend>
        <div>
            <p>
                Выбрать категорию:
                @Html.DropDownList("Categories");
            </p>
        </div>

        <div>
            <p>
                Выбрать производителя:
                @Html.DropDownList("Brands");
            </p>
        </div>

        <div>
            <p>
                Название модели:
                @Html.EditorFor(model=>model.part.parts_model)
                @Html.ValidationMessageFor(model=>model.part.parts_model)
            </p>
        </div>

        <div>
            <p>
                Цена:
                @Html.EditorFor(model=>model.part.parts_price)
                @Html.ValidationMessageFor(model=>model.part.parts_price)
            </p>
        </div>

        <div>
            <p>
                Количество:
              @Html.EditorFor(model=>model.part.parts_amount)
              @Html.ValidationMessageFor(model=>model.part.parts_amount)  
            </p>
        </div>

            <div class="details">
                <input type="text" name="details_name" />
                <input type="text" name="details_value" />
                </div>
            <div><p><a class="plus">Добавить описание</a></p></div>

        <div>
            <input type="file" name="uploadImage" />
        </div>
            </form>

        <div>
            <input type="submit" value="Сохранить" />
        </div>
    </fieldset>


После нажатия на "Добавить описание", необходимо добавить 2 поля, аналогичные классу "details". После submit, соответственно сформировать json и отправить на сервер.
Не знаю, можно ли сформировать JSON из Razor элементов, может по другому как-то сделать, может обойтись без JSON.
Получалось добавлять товар, вручную задавая количество полей и задавая им индексы:
<div>
<p>
     Название характеристики:
     Html.EditorFor(model=>model.detail[0].details_name)
     </p>
     </div>

<div>
<p>
      Значение:
      Html.EditorFor(model=>model.detail[0].details_value)
      </p>
      </div>


Пытаюсь добавлять поля таким образом:
$(function() {
        $('form').on('click', 'a.plus', function() {
            var fld = $(this).closest('div').prev().find('div.details').last(), add=fld.clone().val('');
            fld.after(add)})
    })
Ответ: laimas,
да