Clone datepicker and dropzone

I have a single form to allow a user to add a series of events.  Each event can include dates, pictures and files.  When a user clicks a button, a jQuery function clones the code for a new event and inserts it below existing events.  The cloned code includes 'input/date' and 'input/dropzone' fields.  The code clones fine and the form looks the way it should, but the date and picture input fields don't work.  They don't accept input as they do when rendered at the time of page loading.

My Question
How should I properly duplicate datepicker and dropzone objects?  I understand from other discussions that the answer may include some reference to the AMD model.  If so, I would really appreciate guidance on how to implement the suggestion.  I've spent many weeks following this path and have pitiful little to show for my effort.

Here is the jQuery code is use to add a new event:

​​
$(document).ready(function() {

    $(".add-progress-marker").on("click", function(e){"use strict"

       e.preventDefault();

// clone the node

    var line_item = $(".progress_marker_line_items").clone(true, true).contents();

    var $input = $(line_item);

    line_item = $input.outerHTML;

    $input.insertBefore(".new_line_items").outerHTML;

    });

});

 

  • The strategy I use lately is to render everything server side and use ajax API to load the view and insert into DOM rather than trying to deal with all the cloning.

  • That sounds ... sophisticated.  Even though it may not be the best strategy, could you help me deal with it by cloning instead?  That, or perhaps show me how to render everything server side and use ajax API to load the view and insert into DOM?  Either way, I need a little help to make it work.  Examples would be a great help, to be sure.  I'm not sophisticated enough to use directional suggestions alone.  I'm certainly willing to learn and to do my research; I've been researching and trying things for months.  Now, I'm sort of praying for a miracle.

  • // start.php
    elgg_register_plugin_hook_handler('init', 'system', function() {
       elgg_register_ajax_view('partials/form_elements');
    });
    

     

    // views/default/partials/form_elements.php
    echo elgg_view_field([
       '#type' => 'date',
    ]);
    
    echo elgg_view_field([
       '#type' => 'dropzone',
    ]);
    
    // if using third-party input views, make sure the initialize their scripts inline
    // require(['third-party-input']);
    // and not using elgg_require_js(), because currently those are not intialized on
    // ajax requests

     

    // partial/form_elements.js
    define(function(require) {
    
       var $ = require('jquery');
       var Ajax = require('elgg/Ajax');
    
       $(document).on('click', '.trigger-element', function(e) {
           e.preventDefault();
    
           var ajax = new Ajax();
           ajax.view('partials/form_elements').done(function(output) {
              $('.placeholder').append($(output));
           });       
       }); 
    });
  • Thanks.  Great detail.  I'll try it out.

  • For the sake of others, here is how I implemented your recommendation:

    /** plugin/start**/
    
    elgg_register_event_handler('init','system','plugin_init');
    
    function plugin_init() {
    
       elgg_register_ajax_view('partials/testing');  //Register a view to be available for ajax calls
    
       elgg_require_js('js/testing');                //Request that Elgg load an AMD module onto the page
    
    }
    
    /**js/testing.js
    
      * Define function to fire when link is clicked
    
    **/
    
    
    define(function(require) {
    
    
       var $ = require('jquery');
    
       var Ajax = require('elgg/Ajax');
    
    
       $(document).on('click', '.trigger-element-testing', function(e) {
    
           e.preventDefault();
    
    
           var ajax = new Ajax();
    
       // Define variables to pass
    
           var field_type = $(this).data("element");                        // Extract field_type from <a ... data_element="<field_type>"</a>
    
           var entity     = $(this).attr("guid");                           // Extract entity guid from <a ... guid="<entity_guid>"</a>
    
           var cid        = "c"+Math.floor((Math.random()*200)+1);          // Create a random ID value
    
       
    
           ajax.view('partials/testing',{
    
            data: {                                                       // Pass variables to view
    
          element: field_type,
    
          guid: entity,
    
          cid: cid
    
            },
    
           }).done(function(output) {
    
              $('.placeholder').append($(output));                           // Insert the ajax view after <div class="placeholder"></div>
    
           });       
    
       }); 
    
    });
    
    /** site/start
      * 
    **/
    elgg_register_event_handler('init','system','site_init');
    
    function site_init() {
         $js_framework     = elgg_get_simplecache_url('js' , 'site/framework');
         elgg_require_js($js_framework);
    }
    
    /**js/site/framework.php**/
    
    $(document).ready(function(){
    
    $("a.collapser-testing").on("click", function(e) {
    
    e.preventDefault();
    
    $("<div>Collapser clicked</div>").dialog();
    
    });
    
    });
    
    /**partials/testing.php**/
    $element = elgg_extract('element', $vars);
    $guid    = elgg_extract('guid', $vars);
    $cid     = elgg_extract('cid', $vars);
    echo "<a class='collapser-testing' tabindex='-1'>Collapser</a><br>";
    /**display.testing.php**/
    
    echo '<a href="#" class="elgg-button-submit-element trigger-element-testing" rel="nofollow" data-element="date" guid="45467">+</a>
    
    Here:
    
    <div class="placeholder"><div>
    
    ';
    

     

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking