Menu icon Foundation
Abide and Modal AJAX Issue

I can't seem to get Abide to work correctly on an modal form.

Form is called from:

<a href="/admin/edit_customer/<?= $order->id ?>/<?= $order->cust_id ?>" class="button tiny" data-reveal-id="myModal" data-reveal-ajax="true">Edit Customer</a>

and everything goes just fine, except abide never fires. Here's the form (abbreviated). In particular, I'm having issue with the email pattern.

<form data-abide action="/admin/edit_customer" method="POST">
<fieldset><legend>Edit Customer Information</legend>
<div class="row">
    <div class="large-6 columns">
        <div class="row collapse">
            <div class="small-4 columns">
                <label class="prefix" for="fname">First Name <small>required</small></label>
            </div>
            <div class="small-8 columns">
                <input type="text" id="fname" required value="<?= $c_info->fname ?>" placeholder="<?= $c_info->fname ?>" name="c_fname">
                <small class="error">First name is required.</small>
            </div>
        </div>
    </div>
    <div class="large-6 columns">
        <div class="row collapse">
            <div class="small-4 columns">
                <label for="lname" class="prefix">Last Name <small>required</small></label>
            </div>
            <div class="small-8 columns">
                <input type="text" required value="<?= $c_info->lname ?>" placeholder="<?= $c_info->lname ?>" name="c_lname" id="lname">
                <small class="error">Last name is required.</small>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="large-9 columns">
        <div class="row collapse">
            <div class="small-3 columns">
                <label class="prefix" for="email">Email</label>
            </div>
            <div class="small-9 columns">
                <input type="text" name="c_email" pattern="email" id="email" value="<?= $c_info->email ?>" required>
                <small class="error">Need a valid email</small>
            </div>
        </div>
    </div>
    <div class="large-3 columns">
        <a href="#" class="button tiny radius" target="_blank">Email Customer</a>
    </div>
</div>

I've tried adding the line:

<script type="text/javascript">$(document).foundation('abide','events');</script>         

To the end, but that just made the modal fail.

Anyone have any fixes?

Thanks!
-Z

abidemodalAJAX

I can't seem to get Abide to work correctly on an modal form.

Form is called from:

<a href="/admin/edit_customer/<?= $order->id ?>/<?= $order->cust_id ?>" class="button tiny" data-reveal-id="myModal" data-reveal-ajax="true">Edit Customer</a>

and everything goes just fine, except abide never fires. Here's the form (abbreviated). In particular, I'm having issue with the email pattern.

<form data-abide action="/admin/edit_customer" method="POST">
<fieldset><legend>Edit Customer Information</legend>
<div class="row">
    <div class="large-6 columns">
        <div class="row collapse">
            <div class="small-4 columns">
                <label class="prefix" for="fname">First Name <small>required</small></label>
            </div>
            <div class="small-8 columns">
                <input type="text" id="fname" required value="<?= $c_info->fname ?>" placeholder="<?= $c_info->fname ?>" name="c_fname">
                <small class="error">First name is required.</small>
            </div>
        </div>
    </div>
    <div class="large-6 columns">
        <div class="row collapse">
            <div class="small-4 columns">
                <label for="lname" class="prefix">Last Name <small>required</small></label>
            </div>
            <div class="small-8 columns">
                <input type="text" required value="<?= $c_info->lname ?>" placeholder="<?= $c_info->lname ?>" name="c_lname" id="lname">
                <small class="error">Last name is required.</small>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="large-9 columns">
        <div class="row collapse">
            <div class="small-3 columns">
                <label class="prefix" for="email">Email</label>
            </div>
            <div class="small-9 columns">
                <input type="text" name="c_email" pattern="email" id="email" value="<?= $c_info->email ?>" required>
                <small class="error">Need a valid email</small>
            </div>
        </div>
    </div>
    <div class="large-3 columns">
        <a href="#" class="button tiny radius" target="_blank">Email Customer</a>
    </div>
</div>

I've tried adding the line:

<script type="text/javascript">$(document).foundation('abide','events');</script>         

To the end, but that just made the modal fail.

Anyone have any fixes?

Thanks!
-Z

This post has been closed. No new replies can be added.

Zack almost 6 years ago

Turns out that in F5, the line should read:

 $('#your_form_id').foundation({bindings:'events'});