{"id":782,"date":"2012-04-25T06:18:48","date_gmt":"2012-04-25T06:18:48","guid":{"rendered":"http:\/\/www.websitedesignwebsitedevelopment.com\/?p=782"},"modified":"2014-03-19T09:13:53","modified_gmt":"2014-03-19T09:13:53","slug":"duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation","status":"publish","type":"post","link":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/","title":{"rendered":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation"},"content":{"rendered":"

Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation<\/h2>\n

Problem:<\/h3>\n

Sometimes we need to replicate the input fields on runtime with core js or jquery functions like .html, .append() or .prepend(). You will notice that most of the jquery examples are available with DOM ready functions or document ready. Most of the slicers get these examples as it is and provide a dummy application to development team. Due to shortage of time the developers implement it as it is. These things involves problems whenever we deal with “add more” fields functionality. In that case we mostly hardcode an input field or replicate some .html() result. For example you are going to replicate such field which is already implemented with a unique ID and especially for date time etc. So that calendar will not work on duplicated fields because of unique ID.<\/p>\n

Solution:<\/h4>\n

What i suggest?<\/p>\n

    \n
  1. Either use the unique ID’s for each field which you are going to duplicate<\/li>\n
  2. Or Don’t use any ID for that field, DOM will maintain its uniqueness itself and you will not get any conflict<\/li>\n<\/ol>\n

    Important Note:<\/b> For those guys who face problems on jquery lightbox implementation on those DOM elements which are created or appended on runtime. They must recall those functions which are initially called in dom ready function. I will suggest that make them as independent function and then call them in dom ready. So you can further use those function instead of being dependent on page refresh.
    \nAnother solution is to refresh that instance so it could initialize on required DOM elements again.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation Problem: Sometimes we need to replicate the input fields on runtime with core js or jquery functions like .html, .append() or .prepend(). You will notice that most of the jquery examples are available with DOM ready functions or document ready. Most of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[26],"tags":[],"class_list":["post-782","post","type-post","status-publish","format-standard","hentry","category-javascript"],"acf":[],"yoast_head":"\nDuplicate input fields in DOM giving error on jquery lightbox or calendar implementation<\/title>\n<meta name=\"description\" content=\"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation\" \/>\n<meta property=\"og:description\" content=\"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation\" \/>\n<meta property=\"og:url\" content=\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/\" \/>\n<meta property=\"og:site_name\" content=\"AndroidBubble Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/Website-Design-Website-Development\/172363336135453\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-25T06:18:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-19T09:13:53+00:00\" \/>\n<meta name=\"author\" content=\"Fahad\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fahad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/\"},\"author\":{\"name\":\"Fahad\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7\"},\"headline\":\"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation\",\"datePublished\":\"2012-04-25T06:18:48+00:00\",\"dateModified\":\"2014-03-19T09:13:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/\"},\"wordCount\":281,\"articleSection\":[\"Javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/\",\"url\":\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/\",\"name\":\"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation\",\"isPartOf\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/#website\"},\"datePublished\":\"2012-04-25T06:18:48+00:00\",\"dateModified\":\"2014-03-19T09:13:53+00:00\",\"author\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7\"},\"description\":\"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation\",\"breadcrumb\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/androidbubble.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Development\",\"item\":\"https:\/\/androidbubble.com\/blog\/category\/website-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Javascript\",\"item\":\"https:\/\/androidbubble.com\/blog\/category\/website-development\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#website\",\"url\":\"https:\/\/androidbubble.com\/blog\/\",\"name\":\"AndroidBubble Blog\",\"description\":\"Articles & Posts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/androidbubble.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7\",\"name\":\"Fahad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g\",\"caption\":\"Fahad\"},\"sameAs\":[\"http:\/\/www.androidbubbles.com\/\",\"https:\/\/x.com\/phpFlex\"],\"url\":\"https:\/\/androidbubble.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation","description":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/","og_locale":"en_US","og_type":"article","og_title":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation","og_description":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation","og_url":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/","og_site_name":"AndroidBubble Blog","article_publisher":"https:\/\/www.facebook.com\/pages\/Website-Design-Website-Development\/172363336135453","article_published_time":"2012-04-25T06:18:48+00:00","article_modified_time":"2014-03-19T09:13:53+00:00","author":"Fahad","twitter_misc":{"Written by":"Fahad","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/#article","isPartOf":{"@id":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/"},"author":{"name":"Fahad","@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7"},"headline":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation","datePublished":"2012-04-25T06:18:48+00:00","dateModified":"2014-03-19T09:13:53+00:00","mainEntityOfPage":{"@id":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/"},"wordCount":281,"articleSection":["Javascript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/","url":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/","name":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation","isPartOf":{"@id":"https:\/\/androidbubble.com\/blog\/#website"},"datePublished":"2012-04-25T06:18:48+00:00","dateModified":"2014-03-19T09:13:53+00:00","author":{"@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7"},"description":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation","breadcrumb":{"@id":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/androidbubble.com\/blog\/website-development\/javascript\/duplicate-input-fields-in-dom-giving-error-on-jquery-lightbox-or-calendar-implementation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/androidbubble.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website Development","item":"https:\/\/androidbubble.com\/blog\/category\/website-development\/"},{"@type":"ListItem","position":3,"name":"Javascript","item":"https:\/\/androidbubble.com\/blog\/category\/website-development\/javascript\/"},{"@type":"ListItem","position":4,"name":"Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation"}]},{"@type":"WebSite","@id":"https:\/\/androidbubble.com\/blog\/#website","url":"https:\/\/androidbubble.com\/blog\/","name":"AndroidBubble Blog","description":"Articles & Posts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/androidbubble.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7","name":"Fahad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g","caption":"Fahad"},"sameAs":["http:\/\/www.androidbubbles.com\/","https:\/\/x.com\/phpFlex"],"url":"https:\/\/androidbubble.com\/blog\/author\/admin\/"}]}},"views":625,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts\/782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/comments?post=782"}],"version-history":[{"count":2,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions"}],"predecessor-version":[{"id":1630,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions\/1630"}],"wp:attachment":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/media?parent=782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/categories?post=782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/tags?post=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}