Create a component with javascript

[Marco Brenna]

Is it possibile to add an appery.io component (button, map, custom component, ecc...) inside a page using javascript?

Thanks

Marco

[Illya Stepanov]

Hi Marco -

Do you mean to create it inside the builder or dynamically in your app? If you mean the second, then yes it is possible.

[Marco Brenna]

Hi Illya,
thanks for the reply. Yes, I mean the second. Specifically I need to put dynamically inside the page a text field, a button, a date component and a Google Map.

Can you tell me the code for dynamically create the components?

Thanks

Marco

[Alena Prykhodko]

Hi Marco,

Currently, there are core public functions that you can use to create any component dynamically .

1) To create functionality familiar/close to yours you need to create template components - simple components from builder palette, but invisible.
2) On needed event find your component, clone it, fill with needed info, and append to parent.

[Marco Brenna]

Thanks for your solution. I see there's documentation for clone and append here:
http://api.jquery.com/clone/
I will use this approach, if I'll have other questions about this topic, I'll reopen the discussion.

Thanks,

Marco

[Marco Brenna]

Hi, I have tried your suggestion for solve the problem and used this code:

$('[dsid="date_picker_id"]').clone(true).appendTo( '#the_content_id' );

and it works until I create two or more date pickers. In that case, when I open the calendar by clicking the button for one date picker, every calendar for every cloned datepicker will open. When I click a date this will be set for all date picker.
In conclusion, every date picker are linked and listen to the same event but obviously I need different date pickers.

Is there any solution or api for create an indipendent datepicker dinamically?
I have tried also this code:

$('#an_input_field').datepicker();

but it doesn't work well on mobile and it has bugs because I believe that it creates the original jquery-ui component and not the mobile optimized appery.io component.

Waiting for your reply I send my

Best regards

Marco

[Yurii Orishchuk]

Hi Marco,

You cloned html components with data and events.

Thus you have this glitches.

Here is a simple example of correct approach:

pre

Apperyio("html_443").append('');

jQuery("#myDatePicker").datepicker({});

/pre

Regards.

[Yurii Orishchuk]

Sorry, forgot escapings:

precode

Apperyio("html_443")&#46;append('<input type="text" data-role="date" id="myDatePicker">');

jQuery("#myDatePicker")&#46;datepicker({});

/code/pre

Regards.