Search jQuery

jQuery Forum

Cloning Form elements - select and range inputs

in jQuery Mobile • 7 years ago

I am having a hell of a time cloning a form in jQuery Mobile 1.3.2 and jQuery 1.9.1. Originally all expandable and range inputs weren't working (were visible but had no functionality) when cloned, now they are acessible but duplicated - a select nested inside a select

I have the following markup:
<div data-role="page" id="auditForm" data-theme="a">
<div class="observationTemplate">
<h4 class="observationTitle">Observation - 1</h4>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true" data-theme="b" class="close">close</a>
<div data-role="fieldcontain">
<label for="audit-observation-category" class="ui-hidden-accessible select">Observation Category</label>
<select name="audit-observation-category" id="audit-observation-category" data-theme="e" data-corners="false">
<option value="" selected>Observation Category</option>
<option value="Site">Site</option>
<option value="Incident">Incident</option>
<option value="NearMiss">Near Miss</option>
</select>
</div>
<div data-role="fieldcontain">
<label class="ui-hidden-accessible" for="audit-observation-notes">Notes</label>
<textarea cols="40" rows="8" name="audit-observation-notes" id="audit-observation-notes" class="notes" placeholder="Notes" maxlength="140"></textarea>
</div>
<div data-role="fieldcontain">
<label class="ui-hidden-accessible" for="audit-observation-recommendation">Recommendation</label>
<textarea cols="40" rows="8" name="audit-observation-recommendation" id="audit-observation-recommendation" class="notes" placeholder="Recommendation" maxlength="140"></textarea>
</div>
<div data-role="fieldcontain">
<label for="audit-observation-severity" data-theme="e">Severity</label>
</div>
<div data-role="fieldcontain">
<input type="range" name="audit-observation-severity" id="audit-observation-severity" value="15" min="15" max="180" step="15" data-hilight="true" data-theme="d">
</div>
<div data-role="fieldcontain">
<label for="audit-observation-person" class="ui-hidden-accessible select">Observation Person</label>
<select name="audit-observation-person" id="audit-observation-person" data-theme="e" data-corners="false">
<option value="" selected>Observation Person</option>
<option value="Jim">Jim</option>
<option value="Bob">Bob</option>
<option value="Gary">Gary</option>
</select>
</div>
<div data-role="fieldcontain">
<label class="ui-hidden-accessible" for="audit-observation-date">Date</label>
<input type="date" name="audit-observation-date" id="audit-observation-date" placeholder="Date" value="">
</div>
</div>
<div id="auditContainer"></div>
<div data-role="controlgroup" data-type="horizontal" data-theme="d">
<a href="#" id="auditObservationButton" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="b">Add Observation</a>
</div>
</div>
and the following jQuery
function newObservation() {
var len = $('.observation').length;
var titleLen = $('.observation').length + 2;
var $html = $('.observationTemplate').clone();
$('.observationTitle:eq(0)').text("Observation - " + titleLen);
$html.find('[name=audit-observation-category]').eq(0).attr({name:"audit-observation-category" + len, id:"audit-observation-category" + len});
$html.find('[name=audit-observation-notes]').eq(0).attr({name:"audit-observation-notes" + len, id:"audit-observation-notes" + len});
$html.find('[name=audit-observation-recommendation]').eq(0).attr({name:"audit-observation-recommendation" + len, id:"audit-observation-recommendation" + len});
$html.find('[name=audit-observation-severity]').eq(0).attr({name:"audit-observation-severity" + len, id:"audit-observation-severity" + len});
$html.find('[name=audit-observation-person]').eq(0).attr({name:"audit-observation-person" + len, id:"audit-observation-person" + len});
$html.find('[name=audit-observation-date]').eq(0).attr({name:"audit-observation-date" + len, id:"audit-observation-date" + len});
return $html.html();
}
$(document).on('pagebeforecreate', function(){
$('<div/>', {
'class' : 'observation', html:newObservation()
}).appendTo('#auditContainer');
$('#auditObservationButton').click(function() {
$('<div/>', {
'class':'observation', html:newObservation()
}).hide().appendTo('#auditContainer').slideDown('slow');
$('#auditContainer').trigger('create');
$('select').selectmenu('refresh');
});
$('#auditForm').on('click', '.close', function(){
$(this).parent().fadeOut();
});
});

I have a fiddle, but for some reason it doesn't like jqm 1.3.2 and have it on my dev server http://dirtybirddesign.com/dirtybirddesignlab.com/FireSafe/audit.html#auditForm

Any help would be much appreciated.
Kane Leins

Replies(11)

John Chac..

Re: Cloning Form elements - select and range inputs

7 years ago

cloning of jqm elements is not a good idea. jqm enhances elements by adding its own style and cloning and reusing will end up in double enhancing...

I suggest use of inline templating or something like http://embeddedjs.com/ where those template can be in seperate files and will be easy to maintain and style.

here audit can be a seperate .ejs the nobservation can be another .ejs. keep two methods, addAudit and addObservation. don't keep any audit/observation in initial markup. instead inject one each by default.

Kane Leins

Re: Re: Cloning Form elements - select and range inputs

7 years ago

Yes the 'double enhancing' is exactly what I'm running into. There has to be a way to .find() and remove the doulbe enhanced parts, no? Ill take a look at the embeddedjs.com, but would prefer a more native JQM solution if there is one. Thank you for the assistance!

james.nad..

Re: Cloning Form elements - select and range inputs

7 years ago

I second John's opinion on cloning and the issues it causes, but just in case some else comes across this, I figured I would pass along this tidbit of knowledge.

jQuery's clone operation doesn't do deep copying of events etc unless you tell it too.

http://api.jquery.com/clone/

especially take a look at:

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

Kane Leins

Re: Re: Cloning Form elements - select and range inputs

7 years ago

Is deep copying a positive or negative here? Ill definitely take a look, have you run into this issue and how did you fix it? Thanks!

james.nad..

Re: Cloning Form elements - select and range inputs

7 years ago

It's both a positive and a negative depending on how you use it.

It will clone all the events, etc, however some of the triggers might be copied as well and cause unexpected side effects. So button to open up a pop up, when cloned, will open up the same popup as it's original.

A deep copy is also more resource intensive, so if you deep clone a whole page, it might take a while on slower machines. That's why this is an option.

I usually avoid the deep copy, and try to just clone a template and then enhance it with the events and data I need.

Try sticking your form outside of a jQuery Mobile page(so it's not enhanced), then clone it into the page you want and enhance it.

I haven't really spent any time looking at your particular use case, sorry, so I can't advise more. Please contact me if you need more specific help than this.

Kane Leins

Re: Re: Cloning Form elements - select and range inputs

7 years ago

James, I would greatly appreciate it if you could offer any specific help. How do you handle templating in jQM? Just store it as a var and add it on click/load? Let me know if there is anything else I can provide for you to see the issue I'm having. I greatly appreciate your knowledge.

John Chac..

Re: Cloning Form elements - select and range inputs

7 years ago

noticed there is id's used which is not ideal in these scenarios where you will end up creating non unqiue id's.

Kane Leins

Re: Re: Cloning Form elements - select and range inputs

7 years ago

Im updating the ID's so they should all be unique

watusiware

Re: Cloning Form elements - select and range inputs

7 years ago

Somebody else solved this problem here a while back, so you can search for their solution. It seemed over-complicated to me, though, and so not sure I would advise going down that path.

Some kind of template system might be useful, but I think they are over-rated, and then you are asking to browser to do more work and making jQuery Mobile even slower than it already is.

I just create a skeletal page with whatever list content or other dynamic content absent. I load this page conventionally. Then it is simple to populate the page with some dynamic data (perhaps from a server, perhaps from local storage, etc.) on pageinit or pagebeforeshow.

Kane Leins

Re: Re: Cloning Form elements - select and range inputs

7 years ago

Im going to try and just make the select lists native, so they aren't enhanced.

watusiware

Re: Cloning Form elements - select and range inputs

7 years ago

You will still have to eliminate duplicated IDs. I'd suggest not using IDs at all - use CSS classes. You will need to search for selectors on a particular page, if you have any JS code that references the elements that currently have IDs.

Top Reply

Response title

Attachments

jQuery Forum

Cloning Form elements - select and range inputs

Replies(11)

Re: Cloning Form elements - select and range inputs

Re: Re: Cloning Form elements - select and range inputs

Re: Cloning Form elements - select and range inputs

Re: Re: Cloning Form elements - select and range inputs

Re: Cloning Form elements - select and range inputs

Re: Re: Cloning Form elements - select and range inputs

Re: Cloning Form elements - select and range inputs

Re: Re: Cloning Form elements - select and range inputs

Re: Cloning Form elements - select and range inputs

Re: Re: Cloning Form elements - select and range inputs

Re: Cloning Form elements - select and range inputs

Statistics

Tags

Actions