I built a form using jquery.
As soon as I use $(‘#Form’).append(”); the newly added elements aren’t themed / don’t look the same way as I they would, when I insert them using PHP.
To make it clear:
php added: Jquery Mobile Style
Jquery dynamicly added: Regular Form style.
How can I buy pass this?
======ADDON======
Ok, here’s the code
this functions adds the block:
function addItem(section){
if(itemcounter[section]>1){
$('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>');
$('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>');
$('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>');
}else{
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>');
}
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>');
$('#deductionItemContentRow'+section+'_'+itemcounter[section]+'1').append('<td id="deductionItemContent'+section+'El'+itemcounter[section]+'"></td>');
$('#deductionItemContent'+section+'El'+itemcounter[section]).append('<div class="type-select"><label for="nu_item_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_item"}{literal}'+itemcounter[section]+'</label><select onchange="updateForm('+section+');" id="nu_item_'+section+'_'+itemcounter[section]+'" name="nu_item_'+section+'_'+itemcounter[section]+'"></select></div>')
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="main">{/literal}{translate text="application_reports_plate5_item_main"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="aux">{/literal}{translate text="application_reports_plate5_item_aux"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="jib">{/literal}{translate text="application_reports_plate5_jib"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="rope">{/literal}{translate text="application_reports_plate5_rope"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="underhookdevice">{/literal}{translate text="application_reports_plate5_underhookdevice"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="rigging">{/literal}{translate text="application_reports_plate5_rigging"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="none">{/literal}{translate text="application_reports_plate5_none"}{literal}</option>');
$('#deductionItemContentRow'+section+'_'+itemcounter[section]+'2').append('<td id="deductionItemContent'+section+'E2'+itemcounter[section]+'"></td>');
$('#deductionItemContent'+section+'E2'+itemcounter[section]).append('<div class="type-select"><label for="nu_status_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_itemstatus"}{literal} '+'</label><select onchange="updateForm('+section+');" id="nu_status_'+section+'_'+itemcounter[section]+'" name="nu_status_'+section+'_'+itemcounter[section]+'"></select></div>')
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="stowed">{/literal}{translate text="application_reports_plate5_item_stowed"}{literal}</option>');
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="erected">{/literal}{translate text="application_reports_plate5_item_erected"}{literal}</option>');
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="inservice">{/literal}{translate text="application_reports_plate5_item_inservice"}{literal}</option>');
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="none">{/literal}{translate text="application_reports_plate5_none"}{literal}</option>');
$('#deductionItemContentRow'+section+'_'+itemcounter[section]+'3').append('<td id="deductionItemContent'+section+'E3'+itemcounter[section]+'"></td>');
$('#deductionItemContent'+section+'E3'+itemcounter[section]).append('<div class="type-text"><label for="nu_deduction_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_deduction"}{literal}</label><input onkeyup="updateForm('+section+');" type="text" length="6" maxlength="6" id="nu_deduction_'+section+'_'+itemcounter[section]+'" name="nu_deduction_'+section+'_'+itemcounter[section]+'" /></div>');
/**
* Add Data to page 3
*/
$('#weightMasterDataTable'+section).append('<tr id="weightMasterDataTableRow'+section+itemcounter[section]+'"></tr>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'1"></td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'2"></td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'3">0</td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'4">0</td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'5">0</td>');
/**
* Add Radio Buttons
*/
$('#weightMasterDataButtons'+section).append('<input type="radio" name="nu_masterbutton_'+section+'" id="nu_masterbutton_'+section+'_'+itemcounter[section]+'" value="'+itemcounter[section]+'" /><label for="nu_masterbutton_'+section+'_'+itemcounter[section]+'" > {/literal}{translate text="application_reports_plate5_item"}{literal} '+itemcounter[section]+'</label>');
$('#weightMasterDataButtons'+section).append('<br />');
/**
* in the end update counter
*/
itemcounter[section]++;
}
the HTML code that belongs to this looks like this:
<tr>
<td>
<div id="tabs-2">
<h4>deductions for loadtest 1</h4>
<div id="deductions1">
<a onclick="addItem(1);">+ Add item to deduction</a>
<table id="deductionMaster1" class="tablecloth" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="deductionMasterRow11">
<td>
<table id="deductionItemContent1" class="tablecloth" width="100%" cellspacing="0" cellpadding="0" border="0"></table>
</td>
</tr>
<tr id="deductionMasterRow12">
<td id="deductionMasterElement12">
total:
<b id="deductionValue1">0</b>
lbs
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
This is only a small part of the form, because everything reacts the same way.
I guess I need to tell the browser somewho that the inserted form elements are to be themed the jquery style.
But I don’t know how to.
Try adding
at the end of the jQuery script. That should deal with the <select> tags.
If that is successful, refer to jquery mobile’s documentation for information on how to deal with any other form element you want on you page.