1

On my EE 2.8.1 site I have a Twitter bootstrap modal popup which contains an embedded video with a link to share it via email. Clicking on this link brings up a tell-a-friend form (using EE's Email module) in the same modal, which submits via Ajax in conjunction with the jQuery validate library. The email gets sent successfully, and then redirects to EE's default page and then back to a specified return URL. How do I prevent this default redirect from happening? What I would like it to do is keep the modal box open and replace the form with a custom Thank You message.

Here is my markup for the modal:

         <div id="videoModal" class="modal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">{video_caption}</h4>
                    </div>
                    <div id="video-container">
                        <div class="modal-body">
                            <div class="embed-container">
                            <iframe width="1280" height="720" src="{video_url}" frameborder="0" allowfullscreen="" title="{video_caption}"></iframe>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" alt="close">Close</button>
                           <div class="pull-left">
                                <a href="{permalink='forms/tellafriend'}" class="btn btn-default shareemail" aria-label="share button" value="Share with email"><span class="entypo mail"></span></a>
                           </div>
                        </div>
                    </div>
                    <div id="tellafriend"></div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
         </div>

Here is my tell-a-friend template code:

{exp:channel:entries channel="videos" entry_id="{segment_3}" limit="1"}
{exp:email:tell_a_friend charset="utf-8" allow_html="no" form_id="tellafriend-form" form_class="email-a-friend-form"}
<fieldset>
    <div class="form-group">
        <label for="to" class="col-md-3 control-label">Recipient's Email:</label>
        <div class="col-md-9"><input type="text" id="to" name="to" size="40" maxlength="35" class="form-control required" /></div>
    </div>
    <div class="form-group">
        <label for="name" class="col-md-3 control-label">Your Name:</label>
        <div class="col-md-9"><input type="text" id="name" name="name" size="40" maxlength="35" value="{member_name}"  class="form-control required" /></div>
    </div>
    <div class="form-group">
        <label for="from" class="col-md-3 control-label">Your Email:</label>
        <div class="col-md-9"><input type="text" id="from" name="from" size="40" maxlength="35" value="{member_email}" class="form-control required" /></div>
    </div>
    <div class="form-group">
        <label for="subject" class="col-md-3 control-label">Subject:</label>
        <div class="col-md-9"><input type="text" id="subject" name="subject" size="40" maxlength="85" value="Check this out: {video_caption}" class="form-control required" /></div>
    </div>
    <div class="form-group">
        <label for="message" class="col-md-3 control-label">Message:</label>
        <div class="col-md-9"><textarea id="message" name="message" rows="18" cols="40" class="form-control required">{video_url}</textarea></div>
    </div>
    <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
        <button class="btn btn-primary" type="submit">Submit</button>  
        </div>
    </div>
</fieldset>
{/exp:email:tell_a_friend}
{/exp:channel:entries}
<div id="#tellafriend-form-response"></div>

Here is the javascript I have written so far:

    $('.shareemail').click(function(e){
        e.preventDefault();
        $('#tellafriend').load($(this).attr("href"));
        $('#tellafriend').show();
        $('#video-container').hide();
    });

    $("#tellafriend-form").validate({
        submitHandler: function() {
         $.ajax({
             url: $("#tellafriend-form").attr("action"),
             data: $("#tellafriend-form").serialize(),
             type: 'POST',
             success: function (data) {
                 $('#tellafriend-form').hide();
                 $('#tellafriend-form-response').html("<h3 style='text-align:center;'>Thank you, your email was sent!</h3><br /><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>");
                 return false; 
             },
             error: function (jxhr, msg, err) {
                 $('#tellafriend-form').append('<li style="color:red">' + msg + '</li>');
             }
           });
           return false; // ajax used, block the normal submits
        }
    });

What am I doing wrong here?

Thanks in advance!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.