Export conflict with ActiveForm

[drenty]

EDIT BY KARTIK: Changed title to Export conflict with ActiveForm. Original title was Client side validation issue.

Hello Kartik,

Client-side validation doesn't work anymore. Is it just me?

When I replace the widget by a textarea the validation works.

[kartik-v]

Client side validation should work only if you are using with active form. Something like $form->field($model, $attrib)->widget(MarkdownEditor::classname(), $options);

How are you using the widget?

[drenty]

Oh yeah my bad. I was using it this way:

echo \kartik\markdown\MarkdownEditor::widget([
    'model' => $model, 
    'attribute' => 'content',
]);

Client-side validation works now but I cannot submit the form (with a plain TextArea I can).

[kartik-v]

You need to debug your code for errors? What error messages are you receiving?

[drenty]

I don't have any JS error.

I think there is a problem with your recent changes in renderExportForm() which seem to break the submit button.

When I set showExport to false or put my Submit button before the widget, I can submit the form.

I don't know if it's the nested forms or what. The nested form doesn't even appear in the DOM (I'm using Chrome).

[kartik-v]

Pushed in a fix. Check and let know.

[drenty]

Shouldn't the export form be inside the iframe? If I change your code to do this it works fine.

[kartik-v]

Are you facing the same error after the fix? The form submission target is set to the iframe and when the plugin is initialized, the form is automatically removed and appended at the end of the body via javascript. So you should not face the nested form issue.

If you are facing any error can you post the log/screenshot? If you are fixing it with some code can you please post the same as well?

[drenty]

Yes I'm facing the exact same issue. The submit button seems to be disabled.

Here is my DOM:

The quick hack I did that seems to work:

protected function renderExportForm()
{
    $action = $this->_module->downloadAction;
    if (!is_array($action)) {
        $action = [$action];
    }
    $frameId = $this->options['id'] . '_export';
    $iframe = '<iframe style="width: 0px; height: 0px;" scrolling="no" frameborder="0" border="0" id="' . $frameId .'" name="' . $frameId . '">';
    return $iframe . Html::beginForm($action, 'post', ['class' => 'kv-export-form', 'style' => 'display:none', 'target' => $frameId]) .
    Html::textInput('export_filetype', '', ['style' => 'display:none']) .
    Html::textInput('export_filename', '', ['style' => 'display:none']) .
    Html::textArea('export_content', '', ['style' => 'display:none']) .
    Html::endForm() .
    '</iframe>';
}

[kartik-v]

The hack above would disable export & file download functionality itself - since the code will never be able to locate the export form for submission. Have you checked that?

Also IMHO -- the iframe contents cannot be framed that way. An iframe needs a src attribute (url) to generate the contents.

[kartik-v]

Revamped code with latest commit. Making it work cross browsers, especially with IE was tricky - but looks like its resolved. Check and update. This should resolve few issues:

• Client validation and enabling the widget to work seamlessly with ActiveForm/ActiveField
• Intrusion free iframe to hold the export form contents and submit.

[drenty]

The submit button works now however I still have the following issues on Chrome:

• The HTML export doesn't work.
• The text export downloads a file with no name nor extension.

On Firefox it works but the files have no name nor extension.

[kartik-v]

I don't know if you have the latest version (or is it a caching problem with your environment). It seems to work fine on all browsers.

You can validate this on the demo site for usage with ActiveForm here. It also has a submit and reset button, with CLIENT VALIDATION (try setting the notes field to blank for example). You can check this from your browsers and update.

[drenty]

You're right, it was a caching problem.

I just cleared all my assets and it works great, thank you :)