Bootstrap modal close suddenly

[Yassir Jabbari]

Hi everyone,

 

I've developed a module for my website and I have an issue. All works normally, but since few days, my modal of my module close suddenly...

I don't know how to fix that, I spend lot of hours on this issues...

Prestahop 1.7.5 with bootstrap 4

There is some code :

tpl : 

<p data-toggle="modal" data-target="#tailleNonDispo"
   class="action modal-activator">{l s='Unavailable size ?' mod='unavailablesize'}</p>
<div class="modal fade" id="tailleNonDispo" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="h4 modal-title">{l s='Unavailable size ?' mod='unavailablesize'}</div>
            </div>
            <div class="modal-body">
                <p>{l s='Subtitle Modal' mod='unavailablesize'}</p>
                <link rel="stylesheet" type="text/css" href="/modules/unavailablesize/views/templates/css/style.css">
                <div class="form-group row">
                    <div class="col-sm">
                        <input type="text" class="form-control" id="inputName"
                               placeholder="{l s='Name' mod='unavailablesize'}" name="inputName">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm">
                        <input type="email" class="form-control" id="inputMail"
                               placeholder="{l s='Email address' mod='unavailablesize'}" name="inputMail">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm">
                        <input type="text" class="form-control" id="inputPhone"
                               placeholder="{l s='Phone' mod='unavailablesize'}" name="inputPhone">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm">
                        {foreach from=$product.features item=feature}
                            {if isset($feature.value)}
                                {if $feature.name == "Collection"}
                                    <input type="text" class="form-control" id="productDetail"
                                           value="{$product_manufacturer->name|cat:' - '|cat:$feature.value|escape:'html':'UTF-8'|cat:' - '|cat:$nameProduct}"
                                           disabled name="productDetail">
                                {/if}
                            {/if}
                        {/foreach}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm">
                        {foreach from=$groups key=id_attribute_group item=group}
                            {if $group.group_type == 'color'}
                                {foreach from=$group.attributes key=id_attribute item=group_attribute}
                                    <input type="text" class="form-control" id="productDetail"
                                           value="{$group.name|cat:' : '|cat:$group_attribute.name}"
                                           disabled name="productDetail">
                                    <input type="hidden" value="{$group_attribute.name}" name="color"
                                           id="color">
                                {/foreach}
                            {/if}
                        {/foreach}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm">
                        <input type="text" class="form-control" id="modele" value="Ref : {$reference_product}" disabled
                               name="modele">
                    </div>
                </div>
                <div class="btn-group group-toggle container custom-size" data-toggle="buttons">
                    {foreach from=$attributesCombinations item=item}
                        {if $item['id_attribute_group'] != 48}
                            <div class="btn btn-secondary col-md-2 col-sm-3 col-xs-3 ml-1 mb-1">
                                <input type="radio" name="size" value="{$item['attribute']}"
                                       autocomplete="off"> {$item['attribute']}
                            </div>
                        {/if}
                    {/foreach}
                </div>
                <button type="submit" class="btn btn-primary custom-button"
                        onclick="validateForm()">{l s='Send' mod='unavailablesize'}</button>
                <div class="alert alert-success" id="success">
                    <strong>{l s='Success' mod='unavailablesize'}</strong> {l s='Success send mail' mod='unavailablesize'}
                </div>
                <div class="alert alert-danger" id="error">
                    <strong>{l s='Error' mod='unavailablesize'}</strong> {l s='Error detected' mod='unavailablesize'}
                </div>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">{l s='Close' mod='unavailablesize'}</button>
            </div>
        </div>
    </div>
</div>

 

css :

.custom-button {
    display: block;
    margin: 1em auto;
}

#success, #error {
    display: none;
}

.custom-selector {
    margin: .3em !important;
}

.action {
    cursor: pointer;
    line-height: calc(2.5rem - 2px);
}

 

js :

function validateForm() {
    let name = document.getElementById('inputName');
    let email = document.getElementById('inputMail');
    let phone = document.getElementById('inputPhone');
    let size = document.getElementsByName('size');
    let sizeChecked = false;
    let contactChecked = false;

    if (email.value === "" && phone.value === "" && name.value === "")
        alert("Veuillez renseignez votre nom, une adresse mail ou un numéro de téléphone.");
    else if (phone.value !== "")
        contactChecked = true;
    if (email.value !== "") {
        if (ValidateEmail(email.value))
            contactChecked = true;
    }
    if (name.value !== "")
        contactChecked = true;
    for (var i = 0; i < size.length; i++) {
        if (size[i].checked) {
            sizeChecked = true;
            break;
        }
    }
    if (contactChecked && sizeChecked) {
        var json = {
            name: name.value,
            email: email.value,
            phone: phone.value,
            size: document.querySelector('input[name="size"]:checked').value,
            product: document.getElementById('modele').value,
            color: document.getElementById('color').value
        };
        $.ajax({
            url: '/unavailablesize',
            type: 'POST',
            data: 'json=' + JSON.stringify(json) + '&ajax=1',
            success: function () {
                document.getElementById('success').style.display = "block"
            },
            error: function () {
                document.getElementById('error').style.display = "block"
            }
        });
    }
}
function ValidateEmail(mail) {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
        return true;
    }
    alert("L'adresse mail est invalide");
    return false;
}