Hi Years,

In modals you should initialize form fields that are custom implementation for example, when you open the modal, you should initialize the plugin here is an example:

jQuery('#modal-1').modal('show', function() {
    // Do the initialization stuff
});

Hi yearstech,

My team mate (Arlind) can help you with this question, but he is not in the office until 17 June. When Arlind comes back, just reply to this thread and you will make sure he will see your comment.

Thanks for your understanding!

Hi Yasin,

Can you please give me access to that page so I can check how that can be implemented?

Hi Yasin,

Please add the following Custom CSS in your CSS file:

.datepicker.datepicker-dropdown {
    z-index: 10000000 !important;
}

And then, when generating modal content, after you append it, you can initialize it:

(view large image)

So basically to initialize the date picker in modal execute this code (after inserting HTML):

jQuery(".datepicker").each(function(i, el) {
    var $this = jQuery(el),
        opts = {
            format: attrDefault($this, 'format', 'mm/dd/yyyy'),
            startDate: attrDefault($this, 'startDate', ''),
            endDate: attrDefault($this, 'endDate', ''),
            daysOfWeekDisabled: attrDefault($this, 'disabledDays', ''),
            startView: attrDefault($this, 'startView', 0),
            rtl: rtl()
        },
        $n = $this.next(),
        $p = $this.prev();
    $this.datepicker(opts);
    if ($n.is('.input-group-addon') && $n.has('a')) {
        $n.on('click', function(ev) {
            ev.preventDefault();
            $this.datepicker('show');
        });
    }
    if ($p.is('.input-group-addon') && $p.has('a')) {
        $p.on('click', function(ev) {
            ev.preventDefault();
            $this.datepicker('show');
        });
    }
});

Here is the video that shows how it works explicitly:

https://d.pr/v/yMdTOc

Please note that custom implementation of code is not covered by the support, only issues like z-index issues and something that doesn't work. 

You have to figure out by yourself how to initialize plugins after AJAX actions.

Dear Yasin, 

We have very limited time of support so I am not able to provide special support over Skype. We can manage to solve these issues one by one by presenting me the page with the issue, also FTP access can help me to put the code and try fixing the problem.

So basically, prepare pages that have issues and paste the page URL here  and describe the problems so I will try to give you proper solution. If that is something inside the theme support scope.

Hi Yasin,

I will answer to your questions briefly to give you information how to fix several issues:

1. Its weird why is that shown, are you adding another validation on that form? Because when investigated, our theme recognizes these inputs as required only:

(view large image)

If you are calling $( ".form" ).validate( ... ) on another instance, then you should remove the "validate" class in the form because our theme automatically adds validation events.

2. Just like date picker, select 2 should be initialized like I shown you before:

(view large image)

But in this case with this method:

$( ".my-custom-select" ).select2(opts);

3. On modals everything needs to be reinitialized, the DOM is freshly added to the document, so to validate the fields you must call $form.validate( {} ); and pass the options which fields to validate.

4. I have tested form wizard with data tables by enqueueing form wizard before data table:

(view large image)

And it is working:

https://d.pr/v/Xx79Kk

5. In your site something is preventing jQuery Tooltip from bootstrap to be initialized. Please check your libraries to see which one is causing this issue, I have tested and in our site works:

https://d.pr/v/q34vAf

bootstrap.js includes support for tooltips, you may change the order of bootstrap.js file, because I have tested to re-include it and the tooltips should work fine:

https://d.pr/v/LVwUUl

Hi Yasin,

If you cannot access "$('.datepicker').datepicker();" then you can try this way:

jQuery('.datepicker').datepicker();

Also make sure the date picker library is included. If its included load it in the end (before neon-custom.js)