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. Afte

Solution 1:

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

Solution 2:

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

Solution 3:

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/

Solution 4:

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.