3

I have a table which contains input text and select option and button.The table row is cloned when the button is clicked. Every thing is working fine except the select option. After the table row is cloned the select option not display what i select. Here is the JsFiddle http://jsfiddle.net/aravinth/Ad22d/

Javascript code like

var b = 1;

function cloneRow() {

var row = document.getElementById("table");
var table = document.getElementById("particulars");

var clone = row.rows[1].cloneNode(true);
var clones = row.rows.length;

var workerName = clone.cells[0].getElementsByTagName('input')[0];
var position = clone.cells[2].getElementsByTagName('select')[0];
var date1 = clone.cells[3].getElementsByTagName('input')[0];
var fromHr = clone.cells[4].getElementsByTagName('input')[0];
var toHr = clone.cells[5].getElementsByTagName('input')[0];
var add = clone.cells[1].getElementsByTagName('input')[0];

workerName.id = "workerName" + b;
position.id = "position" + b;
date1.id = "date1" + b;
fromHr.id = "fromHr" + b;
toHr.id = "toHr" + b;
add.id = "add" + b;
$(date1).datebox();
table.appendChild(clone);
b++;

}

Also i referred this

1 . Change Select value using jQuery Uniform.js

2 . jquery cloning a block of element. select element acting weired

3. select not working after .clone

but not get success. Please suggest some solutions.

Community
  • 1
  • 1
Aravin
  • 4,126
  • 1
  • 23
  • 39
  • @HüseyinBABAL thanks for your reply ..in my browser and my android device it is not changing... – Aravin Feb 05 '14 at 06:48

4 Answers4

4

It seems, jQuery mobile doesn't recognize the cloned selectmenu.

What you can do, is remove the selectmenu and re-add only the HTML select and then initialize it with selectmenu() 

$('.ui-select', clone).remove();
clone.cells[2].appendChild(position);
$(position).selectmenu();

See modified JSFiddle

Update:

I just followed jquery cloning a block of element. select element acting weired and found @malko's answer, which is a lot more elegant than removing and reinserting. This reduces it to 

$(position).closest('.ui-select').replaceWith(position);
$(position).selectmenu();

See JSFiddle

Community
  • 1
  • 1
Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
3

I think you solved select option issue by using this answer. And another one issue you need to fix in your fiddle. The issue is time picker for last two columns (fromHr and toHr).

To fix this you need to add the bellow lines in your javascript code. 

$(fromHr).datebox();
$(toHr).datebox();

because those rows are dynamically created. So you need to add the above lines to show time picker in your fromHr and toHr.

See this working FIDDLE

Community
  • 1
  • 1
CJ Ramki
  • 2,620
  • 3
  • 25
  • 47
2

The issue is that jQuery Mobile recreates a lot of elements, for example your select, to be non-native widgets, and then binds functions to certain events. When you just clone the row, you aren't getting the event-bindings, so what you need to do is actually append the raw html -- what it was before it got re-rendered -- and then trigger the create method:

var template="<tr><td>..your row here..</td></tr>";
$("#particulars").append(template).parent().trigger('create');

I have a barely working fiddle, but I removed a lot of your code so I could easily illustrate what I am talking about. http://jsfiddle.net/Ad22d/81/

dave
  • 62,300
  • 5
  • 72
  • 93
1

I had the same issue and fixed it by calling selectmenu("destroy") on the original select box before cloning, and then re-initializing select boxes by calling selectmenu() after cloned select is appended.

Mike
  • 11
  • 1