CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Aravin
Aravin

Reputation: 4108

Issue in select option in Jquery mobile

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.

Upvotes: 3

Views: 310

Answers (4)

Mike
Mike

Reputation: 11

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.

Upvotes: 1

CJ Ramki
CJ Ramki

Reputation: 2630

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

Upvotes: 3

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

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

Upvotes: 4

dave
dave

Reputation: 64657

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/

Upvotes: 2

Related Questions